This content originally appeared on text/plain and was authored by ericlaw
I am not really a fan of Dark Mode — I like my screens bright and shiny. But it’s October, and it’s sometimes fun to make things dark and spooky.
Some users of my Show Browser Version extension wanted it to better support Dark Mode– the default text colors didn’t work well when the browser frame was black. I landed a simple change to select bright text colors when the browser is in Dark Mode and called it done.
However, after testing my updates, I lazily left my Dev Channel browser in Dark Mode. Over the following months, I noticed that a surprising number of Chromium’s built-in pages were still rendering in brilliant white. Encountering a bright white screen after surfing around in dark mode can be jarring, to say the least.
I wondered how hard it would be to fix some of these pages. The answer, it turns out, is “it’s mostly trivial.”
To indicate that a page supports dark mode styling, simply add a color-scheme meta tag to the head section of the HTML.
<meta name="color-scheme" content="light dark">
This change alone is enough for simple pages to render nicely in Dark Mode.
However, many pages use more colors than just the default text and background color, and new colors to be used in Dark Mode must be selected. To do so, use the prefers-color-scheme media query to override the default color in your stylesheet. For example:
#tab-list a:hover {
color: white;
}
@media (prefers-color-scheme: dark) {
#tab-list a:hover {
color: black;
}
}
Tip: Use CSS Variables for Dynamic Updates
When I originally updated the about:Net-Internals page, I updated a JavaScript function used to temporarily highlight a div:
function highlightFade(element) {
const isDarkMode =
window.matchMedia('(prefers-color-scheme: dark)').matches;
element.style.transitionProperty = 'background-color';
element.style.transitionDuration = '0s';
element.style.backgroundColor =
isDarkMode ? '#03DCB0' : '#fffccf';
setTimeout(function() {
element.style.transitionDuration = '1s';
element.style.backgroundColor =
isDarkMode ? '#121212' : '#fff';
}, 0);
}
However, I noticed a downside to this approach– if I changed my OS color theme from Light to Dark after this function had run without reloading the page, the old white (#fff) background color lingered on the div— it didn’t update to dark like the rest of the background of the page.
The fix was to specify the light and dark colors using CSS Variables within the stylesheet:
:root {
--color-active-tab: black;
--color-background: #fff;
--color-highlight: #fffccf;
}
@media (prefers-color-scheme: dark) {
:root {
--color-active-tab: white;
--color-background: #121212;
--color-highlight: #03DCB0;
}
}
…and update the JavaScript function to reference them:
function highlightFade(element) {
element.style.transitionProperty = 'background-color';
element.style.transitionDuration = '0s';
element.style.backgroundColor = "var(--color-highlight)";
setTimeout(function() {
element.style.transitionDuration = '1s';
element.style.backgroundColor = "var(--color-background)";
}, 0);
}
Now, as the OS switches between light/dark, the CSS variable is recalculated and the colors in the page are updated automatically.
Tip: UA Stylesheets are Special
Updating Chromium’s View-Source to support Dark Mode was a bit more tricky than the other pages, because the styles used in View-Source rendering come from a User-Agent stylesheet.
Unlike a regular stylesheet, UA Stylesheets’ support for Media Queries is very limited. The solution turns out to be pretty simple: instead of using a media query, we express colors using a special (only usable in UA Stylesheets) LightDarkValuePair function that returns one of its two color arguments based on whether light or dark theme is in use:
color: -internal-light-dark(#00e, rgb(159, 180, 214));
This allows the View-Source page to respect dark mode without using a media query.
Changelists and Bugs
There’s still more to do (e.g. text, json, and xml) but here’s a list of changes I’ve done so far.
Some of these changes are so simple you can even make them using Chromium’s web-based editor!
-Eric
This content originally appeared on text/plain and was authored by ericlaw
ericlaw | Sciencx (2021-10-17T05:43:35+00:00) Spooky: Enhancing Dark Mode in Chromium. Retrieved from https://www.scien.cx/2021/10/17/spooky-enhancing-dark-mode-in-chromium/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.