Add support for CSS dark mode #173
Conversation
This patch adds a new stylesheet, pistar-dark.css, and links it in all of the relevant PHP files. This utilizes the (prefers-color-scheme: dark) CSS Media Query, as defined in Level 5. If the user agent says that it prefers darker color schemes, then the pistar-dark.css stylesheet will be applied to the page dynamically. We could not use @import to add this to the pistar-css*.php files, as those settings would override normal selectors if we placed the directive at the top, and it would be ignored at the bottom of the file. Thus, adding a second <link> tag to each and every page was the best course of action.
Forgot about those. The <textarea>s visible under the Expert mode settings are now styled correctly.
|
I'm fine with the idea, but not the implementation, to remove the option to customize the CSS while in dark mode isn't going to work too well. Can you convert the css file to .php, and swap the references around to call the php version - so that we can add those cusomisation options back please - that way I can extend the CSS config page to also allow the option to cusomize the dark mode color set. |
|
Sure, I'll give that a try. Give me a few days and I'll see what I can do. |
|
you don't have to get every part done, I just need the files to all point to the .php version of the CSS file you made, and for that to have the headders set to that the webserver serves the flat CSS to the browser. |
This adds support for the Level 5 prefers-color-scheme CSS media query in order to automatically apply a dark theme if the user's browser says it prefers one. Colors are generated from values specified in the pistar-css.ini file, and falling back to defaults if they are not defined there (which will be the case for a majority of users). In contrast to my previous versions, the two main stylesheets are now dynamically updated with dark mode support, should the user not opt out. Whether we make this opt-in or opt-out is a decision best left to the project team. :-)
If CSS dark mode colors do not exist in the .ini file, we will assume the default colors, until such a time as the user goes into the CSS editor and clicks on Save. I've also darkened the dark-mode light table row for better contrast.
Fixing the previous commit, this one substitutes default values if and only if the user has not defined them in the .ini file.
Merge in all of the changes from our better attempt at implementing dark mode.
That was still hanging around in this branch. Removed successfully.
If the checkbox is ever unchecked, dark mode will be disabled by having its selectors removed from the generated CSS files.
|
All right, I've done it in the Pi-Star style. The user can customize the colors if they don't like my defaults. Or, if they love light mode, the whole thing can be disabled with a checkbox on the settings page.
|
The default Pi-Star color scheme is extremely bright, especially when using it at night. This pull request adds a dark theme using the
(prefers-color-scheme)CSS media query, which is supported by almost all web browsers. Thus, if the browser requests a darker color scheme, Pi-Star will adapt.Note that this pull request does not respect any custom CSS that the user may have specified, nor can it be customized by the end user.