open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix scheme detection in ancient browsers

Browse Source
This commit is contained in:
tophf 2022-02-15 22:57:39 +03:00
parent b9d7ceb4b7
commit e55c0e190e
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
edit/codemirror-default.css
View File

@ -85,7 +85,7 @@
background: linear-gradient(0deg, hsla(180, 100%, 30%, .75) 2px, hsla(180, 100%, 30%, .2) 2px); background: linear-gradient(0deg, hsla(180, 100%, 30%, .75) 2px, hsla(180, 100%, 30%, .2) 2px);
} }
@media (prefers-color-scheme: dark) { @media screen and (prefers-color-scheme: dark), dark {
.CodeMirror-dialog { .CodeMirror-dialog {
background-color: #333; background-color: #333;
} }

10
js/dark-themer.js
View File

@ -3,9 +3,9 @@
/** /**
* This file must be loaded in a <script> tag placed after all the <link> tags * 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 synchronously * that contain dark themes so that the stylesheets are loaded by the time this script runs.
* by the time this script runs. The CSS must use `@media (prefers-color-scheme: dark) {}` * The CSS must use `@media screen and (prefers-color-scheme: dark), dark {}` that also works
* to ensure the rules are loaded before the first paint, then we toggle the rule here, * 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 * 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. * and not even a problem in the most popular case of using system dark/light mode.
*/ */
@ -22,8 +22,8 @@ API.colorScheme.shouldIncludeStyle('darkUI').then(val => {
function toggleDarkStyles() { function toggleDarkStyles() {
for (const sheet of document.styleSheets) { for (const sheet of document.styleSheets) {
for (const {media: m} of sheet.cssRules) { for (const {media: m} of sheet.cssRules) {
if (m && /dark/.test(m) && (m[0] === 'screen') !== isDark) { if (m && m[1] === 'dark' && (m[0] === 'screen') !== isDark) {
m.mediaText = isDark ? 'screen,dark' : 'dark'; m.mediaText = isDark ? 'screen,dark' : 'not all,dark';
} }
} }
} }