Global: Implement Dark Mode 🌙

[Samk13]

❤️ 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.

[fenekku]

We can just use white and black directly in places where these are used. If the idea is to abstract the references to have a single point of control, then a different name would be best e.g., --main-light / --main-dark, or --white-like / --black-like or smtg else ... (what concept is abstracted here is a bit hard to tell which I suspect was why just values were used before. Using values seems fine by me.)

[Samk13]

I've thought about it, but using --main-light and --main-dark suggests a relation to the main theme, which isn't the case here. The purpose, as you mentioned, is to have a single point of control for easy color management. Custom changes can still be made directly when needed.

Another point is that much of the extra.css is redundant and can be minimized even more. I'd prefer to keep it as is for now, and in a future PR, we could remove more of the custom rules altogether.

[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]

Awesome! So glad we got

• dark mode
• search on frontpage
• break from replacing base.html completely and therefore URL of assets problem fixed

Thanks for all the effort on this one!

[fenekku]

Final look: