Dark theme CSS #351
Dark theme CSS #351
Conversation
|
@jankeromnes This should be ready for review now :) It now simply uses the system dark mode media query. |
There was a problem hiding this comment.
@nt1m Thank you for the PR. I am having difficulty getting the dark theme to work in getting this to work on Firefox 66.0.3 and Firefox Nightly 68.0a1 (2019-05-02) despite having support for this the CSS query. The best I could achieve was:
in Firefox Nightly.
To be clear, I am fine with using newer CSS queries provided that we have fallbacks for browsers with no support.
Otherwise, I am concerned that the title for this PR is misleading as there a significant amount of changes made to the light theme that seem to be unrelated to the dark theme (e.g. changing the background colour for a button hover)
| @@ -38,6 +38,12 @@ | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| } | |||
|
|
|||
| @media (prefers-color-scheme: dark) { | |||
There was a problem hiding this comment.
I admire the use of new CSS APIs, I was also wondering if there are plans to build a fall back for the many browsers that don't support this media query?
|
@Coder206 Those changes are related, without them, the dark theme would have quite poor color contrast. |
There was a problem hiding this comment.
I was finally able to enable the Dark Theme by using Firefox Developer Edition and changing my OS's theme. Here are some changes I would like to see before approving:
- The search bar for projects has a white background
- Controls (forms and input boxes) are unusually dark, it doesn't feel like it fits with the dark theme
- The insecure header background colour makes it hard to see the warning icon
- All of the API examples have white backgrounds on white text
See:
Less critical but I would like to see more use of black (#000) instead of a dark gray.
Please note, my review was only able to cover Janitor in absence blog posts, containers and projects.
No description provided.