vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main.js: Improve dark mode

Browse Source 
Make use of the [`color-scheme` meta tag][0] to style buttons and other 
widgets to match the selected color scheme.

When the scheme is toggled, the `content` of the tag is set to "light" 
or "dark" to tell the user agent how to theme input elements, which 
should match the colors of the rest of the app.


[0]: https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme
This commit is contained in:
Noelle Leigh 2024-08-19 20:55:15 -04:00 committed by GitHub
parent f3f22fb884
commit 615dcd5f89
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/assets/main.js
View File

@ -338,6 +338,12 @@ class ThemeToggler extends HTMLAnchorElement {
this.innerText = "◑"; this.innerText = "◑";
this.setAttribute("aria-hidden", "true"); this.setAttribute("aria-hidden", "true");
this.style.cursor = "pointer"; this.style.cursor = "pointer";
// Add color-scheme meta tag to style buttons
const colorSchemeMeta = document.createElement("meta");
colorSchemeMeta.name = "color-scheme";
colorSchemeMeta.content = this.theme;
document.head.appendChild(colorSchemeMeta);
} }
click() { click() {
@ -369,6 +375,7 @@ class ThemeToggler extends HTMLAnchorElement {
$(".corner .bordered").style.border = "1px solid black"; $(".corner .bordered").style.border = "1px solid black";
$$("a").forEach((e) => { e.style.color = "black" }); $$("a").forEach((e) => { e.style.color = "black" });
} }
$("meta[name=color-scheme]").content = this.theme;
} }
} }