paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Fix flatpickr dark theme in automatic mode.

Browse Source 
Flatpickr had been unconditionally using the light theme in automatic
color scheme mode; this fixes it to follow the system preference like
the rest of the app.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2023-02-16 01:58:23 -08:00
committed by Tim Abbott
parent d3403dde86
commit f99cff0735
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
postcss.config.js
View File

@@ -11,7 +11,7 @@ module.exports = ({file}) => ({
// the flatpickr dark theme. We do this because flatpickr themes // the flatpickr dark theme. We do this because flatpickr themes
// are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168. // are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168.
require("postcss-import")({ require("postcss-import")({
plugins: [require("postcss-prefixwrap")("%dark-theme-block")], plugins: [require("postcss-prefixwrap")("%dark-theme")],
}), }),
require("postcss-nested"), require("postcss-nested"),
require("postcss-extend-rule"), require("postcss-extend-rule"),

15
static/styles/dark_theme.css
View File

@@ -1,11 +1,6 @@
@import url("flatpickr/dist/themes/dark.css"); @import url("flatpickr/dist/themes/dark.css");
:root.dark-theme { %dark-theme {
/* the following block(s) are generated by the import statements.
See postcss.config.js for details.
*/
@extend %dark-theme-block;
color-scheme: dark; color-scheme: dark;
body { body {
@@ -1502,13 +1497,17 @@
} }
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
:root.dark-theme #settings_page select { %dark-theme #settings_page select {
background-color: hsla(0, 0%, 0%, 0.2); background-color: hsla(0, 0%, 0%, 0.2);
} }
} }
:root.dark-theme {
@extend %dark-theme;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root.color-scheme-automatic { :root.color-scheme-automatic {
@extend :root.dark-theme; @extend %dark-theme;
} }
} }