Adding dark mode support. #856
Conversation
This initial version is done based on the OS theme (so it'll only be dark mode if the OS setting is dark mode). In order for this to work I've added the customised less files for semantic locally and this requires a change from the react build scripts to craco because react doesn't support less compilation. I've verified as many screens as I can to make sure they're all looking ok but I'm sure I missed some parts. CodeMirror needs a slightly different solution which needed JS code to detect the current theme. The color scheme is heavily based on githubs dark mode and is using mostly css variable support. This should make it easy to tweak in the future too.
|
Thanks! A lot of this is way over my head so I'll need a bit to digest. Do you anticipate any changes to the tooling in CI? |
|
There shouldn't need to be because everything is encapsulated in the package.json scripts and installed by npm. I haven't found any direct references to the react build scripts anywhere else in the project. |
|
I was finally able to make some time to take a look, very nice! I noticed a few compatibility issues (logs, browse tree) but I think it's probably close enough to merge and iterate. How hard would it be to add a toggle? I'd feel better about merging as is if we could allow people to go back to light. |
|
Toggle would be very easy because I implemented it using css variables. I'll look to do it this week. I'll take a look at logs and browse tree too - I'm sure I tested them, but I might have changed things later that broke them. |
|
For the toggle would you want it in the header? Or are you thinking having a config option for enforcing the theme? |
- Added a new menu item to the header to toggle the theme. The default is still the OS but it can be turned on or off. For now this is not controlled from the user Options. I'll look to see if we can do that, and make sure we honor precedence. - The above required me to shift the prefered media detection into App.js from CodeEditor.js and now I pass theme down through the components to reach it. - Fixed styling of DirectoryTree - had to move styles hardcoded into component into css - Fixed gaps in styling of logs so that different rows are color coded correctly.
…to feature/dark-mode
|
Just pushed some changes based on your feedback.
|
|
Sorry I missed the question about the location of the toggle! There's no place for frontend-only settings right now, so the menu is ok, especially for a new feature like this so users won't have to dig for it. I haven't checked your updates; I'm just going to merge and check the canary once it is out. Thanks for all of this! |
This initial version is done based on the OS theme (so it'll only be dark mode if the OS setting is dark mode).
In order for this to work I've added the customised less files for semantic locally and this requires a change from the react build scripts to craco because react doesn't support less compilation.
I've verified as many screens as I can to make sure they're all looking ok but I'm sure I missed some parts.
CodeMirror needs a slightly different solution which needed JS code to detect the current theme.
The color scheme is heavily based on githubs dark mode and is using mostly css variable support. This should make it easy to tweak in the future too.
Fixes #832