[Fix]: Fixed Navbar dark mode navigation

[officeneerajsaini]

This Pull Request Fixes the Navbar Navigation Color in Dark mode.

Issue Number:

• Closes #1057

Screenshots/videos: Before:

https://github.com/user-attachments/assets/eeec6f55-fa84-4c9a-83ee-2658141c4594

After :

https://github.com/user-attachments/assets/9bcd0f82-f0b8-4259-841b-596bf9390f2a

[officeneerajsaini]

In macOS, I'm encountering another issue with the Navbar search button. The search button's style contains a background-color property.

[officeneerajsaini]

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	1923643b1795804c538646e0003d56212ba97f95

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 100.00%. Comparing base (7ecd915) to head (1923643). Report is 23 commits behind head on main.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #1059 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 10 10 Lines 373 373 Branches 94 94 ========================================= Hits 373 373 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[officeneerajsaini]

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

[DhairyaMajmudar]

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

No worries with that just remove the changes from yarn.lock and package.json files.

[officeneerajsaini]

I'm sorry for making this pull request complex for the reviewer. Initially, I did my work well, but the package-lock.json and yarn.lock files were included. Then I made another commit, and I wanted to combine both commits into a single one. Due to some issues, I deleted my branch and then restored it. Now, I've combined both commits into one, but it also includes the previous merged commit. That's what has been happening with me.

No worries with that just remove the changes from yarn.lock and package.json files.

Yeah I did 😄

[officeneerajsaini]

The commit #1049 is also included in my pull request.

[officeneerajsaini]

@DhairyaMajmudar Please Review Code now.

[DhairyaMajmudar]

@officeneerajsaini pls. don't change the font colors

[officeneerajsaini]

@officeneerajsaini pls. don't change the font colors

In dark mode, some light colors look better than a dark-on-dark combination.

Consistent color:

https://github.com/user-attachments/assets/7fa172a0-1b4d-4dfa-bfe0-1c1f1c9dd76c

Some Lightness :

https://github.com/user-attachments/assets/99eb2397-6a14-4ee3-9945-266d136dfcf8

Should I go with the website theme color?

[officeneerajsaini]

Looks great, Thanks!!

However I do prefer the white color for the navbar fonts instead that light grey. Can we change that?

Yes, and what about the color for the active and hover effects?

[officeneerajsaini]

https://github.com/user-attachments/assets/9bb68b07-00d7-4f28-8a54-facde004797f

[officeneerajsaini]

@benjagm now take a look on code

[benjagm]

It looks better. However, the blue color is difficult to distinguish from the background. Can we find something lighter? Why not just underlying the current section instead of changing the color?

[officeneerajsaini]

https://github.com/user-attachments/assets/238f50a2-bb47-4f62-ba21-bac1bfbd9542

[benjagm]

Hi everyone.

I checked the current version and found this behavior:

• Light style:
  • Style looks good
  • When navigating using links in the header, all styles to highlight the current section work with the exception of Tools. When in tools there is no style in the header highlight the current version.
• Drak Style:
  • When navigating using links in the header, the styles to highlight the current version don't work.

[officeneerajsaini]

• Light style:

  • Style looks good
  • When navigating using links in the header, all styles to highlight the current section work with the exception of Tools. When in tools there is no style in the header highlight the current version.

Yes , Found that part too .

[benjagm]

@officeneerajsaini we are very close! Let's make the last change and push it. Great work so far. Thanks for your patience.