commit 36815bd57bcc1e91fcd4dd8d7ddff5b7e1d8850e Author: David Fifield david@bamsoftware.com Date: Tue Jul 23 10:14:37 2019 -0600
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. --- proxy/static/embed.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+)
diff --git a/proxy/static/embed.css b/proxy/static/embed.css index 156a688..4a58d45 100644 --- a/proxy/static/embed.css +++ b/proxy/static/embed.css @@ -121,3 +121,27 @@ input:checked + .slider:before { -ms-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; + } +}