Antares/com.gregkilmer.www
1
0
Fork 0
mirror of https://github.com/Patiun/com.gregkilmer.www.git synced 2026-11-08 04:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

General Update

Browse Source
This commit is contained in:
Greg Kilmer
2026-07-04 10:53:14 -04:00
parent 71bffad507
commit 33fa312645
18 changed files with 921 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scripts/theme-init.ts
+10 -21
View File
@@ -2,34 +2,23 @@
* theme-init.ts
* ---------------------------------------------------------------------------
* Inlined (as a string) into the <head> of BaseLayout.astro so it runs BEFORE
* first paint. Reads the saved theme from localStorage, falling back to the OS
* preference via prefers-color-scheme, and sets `data-theme` on <html>.
* first paint. Doing this inline + blocking is what prevents the flash-of-wrong-
* theme (FOUC). Keep this file dependency-free and tiny: it ships to every page.
*
* Doing this inline + blocking is what prevents the flash-of-wrong-theme (FOUC).
* Keep this file dependency-free and tiny: it ships to every page.
* DARK MODE IS CURRENTLY FORCED. The site is designed dark-first; light mode is
* deferred. This script pins data-theme="dark" and ignores any stored/OS
* preference, so the page never flashes light and the (removed) toggle can't
* desync it. To reintroduce light mode later: restore the stored/prefers-color-
* scheme logic and re-add the ThemeToggle.
*/
export const themeInitScript = `
(function () {
try {
var STORAGE_KEY = 'gk-theme';
var stored = localStorage.getItem(STORAGE_KEY);
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = stored || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
// React to OS theme changes only if the user hasn't chosen explicitly.
if (!stored) {
var mq = window.matchMedia('(prefers-color-scheme: dark)');
var onChange = function (e) {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
};
if (mq.addEventListener) mq.addEventListener('change', onChange);
else if (mq.addListener) mq.addListener(onChange);
}
// Dark mode is forced for now (light mode is deferred).
document.documentElement.setAttribute('data-theme', 'dark');
} catch (e) {
// If anything fails (private mode, etc.), default to light.
document.documentElement.setAttribute('data-theme', 'light');
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
`;