Global: Implement Dark Mode 🌙

[Samk13]

:heart: Thank you for your contribution!

Description

This pull request includes the following changes:

• Set up dark mode 🌙
• Remove outdated overrides
• Auto pick prefers-color-scheme from system settings
• Resolves the asset URL problem failing CI by removing the base override.

These changes enhance the user experience by providing an alternative color scheme that is easier on the eyes in low-light environments.

Screenshots:

Checklist

Ticks in all boxes and 🟢 on all GitHub actions status checks are required to merge:

• [ ] I'm aware of the code of conduct.
• [ ] I've created logical separate commits and followed the commit message format.
• [ ] I've added relevant test cases.
• [ ] I've added relevant documentation.
• [ ] I've marked translation strings.
• [ ] I've identified the copyright holder(s) and updated copyright headers for touched files (>15 lines contributions).
• [ ] I've NOT included third-party code (copy/pasted source code or new dependencies).
  • If you have added third-party code (copy/pasted or new dependencies), please reach out to an architect.

Frontend

• [ ] I've followed the CSS/JS and React guidelines.
• [ ] I've followed the web accessibility guidelines.
• [ ] I've followed the user interface guidelines.

Reminder

By using GitHub, you have already agreed to the GitHub’s Terms of Service including that:

1. You license your contribution under the same terms as the current repository’s license.
2. You agree that you have the right to license your contribution under the current repository’s license.

[fenekku]

Thanks for that.

When I run it here is what I get on the frontpage by default:

... where the dark mode toggle is missing. Let's have it there too. It's also missing on the Features page.

Then when I click on the "Install" tab, it switches to dark mode automatically:

And then when I click on the home logo to go back to the frontpage:

...it switches to dark mode.

I suspect the frontpage starts with a value unset. The pages that have the dark mode toggle set that value, and so when visiting the frontpage after, the value is now set and the dark theme kicks in. My slightly quirky setup may be revealing that issue: Ubuntu 22.04 light mode + Firefox automatic mode + Mozilla dark theme addon enabled. (For comparison this didn't happen on Brave (Chromium based) browser on the same platform).

Getting dark mode setting for front+feature page should provide a consistent experience.

[Samk13]

I suspect the frontpage starts with a value unset. The pages that have the dark mode toggle set that value, and so when visiting the frontpage after, the value is now set and the dark theme kicks in. My slightly quirky setup may be revealing that issue: Ubuntu 22.04 light mode + Firefox automatic mode + Mozilla dark theme addon enabled. (For comparison this didn't happen on Brave (Chromium based) browser on the same platform).

Getting dark mode setting for front+feature page should provide a consistent experience.

As we discussed in the DMs, the reason the toggle is not showing is that the current inheritance doesn't support displaying the toggle and search input on the front page without routing in the docs. You can simply replace one line {% extends "main.html" %} here, but then we need to refactor these pages and rewrite the CSS again.

[Samk13]

Update: I fixed it now, there is still the CSS color cut left to fix.

[Samk13]

Update:

• Adapting the style without overriding base.html which in result resolves the asset URL problem we have experienced for a while now.
• Fix the CSS color cut in the gradient
• Fix the toggle not showing on the front page and features page.
• Show Github stats
• Remove outdated CSS styles to reduce future maintenance costs.

[fenekku]

Final look: