36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
/* global $ */// dom.js
|
|
/* global API msg */// msg.js
|
|
'use strict';
|
|
|
|
/**
|
|
* This file must be loaded in a <script> tag placed after all the <link> tags
|
|
* that contain dark themes so that the stylesheets are loaded by the time this script runs.
|
|
* The CSS must use `@media screen and (prefers-color-scheme: dark), dark {}` that also works
|
|
* in old browsers and ensures CSS loads before the first paint, then we toggle the media here,
|
|
* which also happens before the first paint unless the browser "yields", but that's abnormal
|
|
* and not even a problem in the most popular case of using system dark/light mode.
|
|
*/
|
|
|
|
API.colorScheme.isDark().then(isDark => {
|
|
const ON = 'screen';
|
|
const OFF = 'not all';
|
|
const map = {[ON]: true, [OFF]: false};
|
|
toggleDarkStyles();
|
|
msg.onExtension(e => {
|
|
if (e.method === 'colorScheme') {
|
|
isDark = e.value;
|
|
toggleDarkStyles();
|
|
}
|
|
});
|
|
function toggleDarkStyles() {
|
|
$.root.dataset.uiTheme = isDark ? 'dark' : 'light';
|
|
for (const sheet of document.styleSheets) {
|
|
for (const {media: m} of sheet.cssRules) {
|
|
if (m && m[1] === 'dark' && map[m[0]] !== isDark) {
|
|
m.mediaText = `${isDark ? ON : OFF},dark`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|