mirror of
https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/snowflake.git
synced 2025-10-13 20:11:19 -04:00
Popup CSS for dark mode.
In Firefox, this requires version 67 for support for prefers-color-scheme media queries. https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/ To force Firefox into dark mode, set ui.systemUsesDarkTheme=1 (and optionally browser.in-content.dark-mode=true, to put pages such as about:addons into dark mode as well) in about:config. You can check if it's working at https://bugzilla.mozilla.org/, which has its own dark-mode styling. Note that this kind of dark mode is *independent* of the "Dark" theme that can be selected in about:addons. Chrome requires version 76 for prefers-color-scheme. You can force it by running with the --force-dark-mode command-line option.
This commit is contained in:
parent
1e6dd4d86f
commit
36815bd57b
1 changed files with 24 additions and 0 deletions
|
@ -121,3 +121,27 @@ input:checked + .slider:before {
|
||||||
-ms-transform: translateX(13px);
|
-ms-transform: translateX(13px);
|
||||||
transform: translateX(13px);
|
transform: translateX(13px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
/* https://design.firefox.com/photon/visuals/color.html#dark-theme */
|
||||||
|
color: white;
|
||||||
|
background-color: #38383d;
|
||||||
|
}
|
||||||
|
#statusimg {
|
||||||
|
background-image: url("assets/status-off-dark.png");
|
||||||
|
}
|
||||||
|
#statusimg.on {
|
||||||
|
background-image: url("assets/status-on-dark.png");
|
||||||
|
}
|
||||||
|
#statusimg.on.running {
|
||||||
|
background-image: url("assets/status-running.png");
|
||||||
|
}
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: #cc80ff;
|
||||||
|
}
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px #cc80ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue