Add dark theme #730
Add dark theme #730
Conversation
|
I deployed nixos-search with this PR to search.wirs.ing (via github pages) |
|
I cannot turn this off, can I? The contrast feels very irritating and makes the text kinda hard to read. When comparing this to dark reader which isn't much better, at least the links are still visible and the outline of the sort button is there.
Also I needed to go into the developer tools and change prefer color scheme to light because Chrome offers no setting to overwrite the Windows theme. |
|
|
||
| // Define darkmode colors | ||
| :root { | ||
| --text-color: #ffffff; |
There was a problem hiding this comment.
I've just remembered something I've picked up randomly somewhere on the net: using pure white is usually not that great fort dark themes as I think it makes rather sharp edges.
Using something like #e5e5e5 improved the readability for me already a lot.
There was a problem hiding this comment.
Usually you want white for important elements like headlines, important data, and interactive elements, and a less intense shade of grey for longer text. The general recommendation I found online is that the less intense color should not be grey, but the main text color with a bit of transparency (e.g. rgba(255, 255, 255, 0.85)) so it works on all backgrounds.
As the style sheet does not really have a separation between the different types of text, I chose to use white for all text but light grey is also a valid option. In #733 this will be changed to a rgba(255, 255, 255, 0.85).
|
Thanks for this @zebreus 🙏🏽 |
|
This pull request has been mentioned on NixOS Discourse. There might be relevant details there: https://discourse.nixos.org/t/thankyou-for-dark-mode/40889/1 |
|
Thanks for this. Control over this would be good as librewolf always reports a lightmode preference to combat fingerprinting |
This PR adds a dark theme that is activated if the user has
prefers-color-schemeset to dark. The light theme is unchanged, the dark theme has some minor UI tweaks, to make it look better with a darker color scheme. The dark theme also does not have color gradients on some buttons, because I do not like them.You can try nixos-search with darkmode at search.wirs.ing.
Screenshots
Some comparison screenshots between dark and light mode
Package search
Option search
Flakes search
Remarks
I had to actively fight the ancient bootstrap stylesheet we are using for styling some things. The bootstrap stylesheet is imported from nixos.org but I am pretty sure that it has not been used there for multiple years. As a consequence the CSS here is quite hacky, but we should probably rework the entire design anyways at some point in the future (related issue #286). For now this should be fine.
This PR will resolve #554