Feat: Adoptive theme foundation

This commit is contained in:
MangoPig
2026-06-15 10:54:55 +01:00
parent ecd214652a
commit a5ca826a6e
10 changed files with 673 additions and 30 deletions

View File

@@ -3,19 +3,21 @@
// @refresh reload
import type { JSX } from "solid-js";
import { createHandler, StartServer } from "@solidjs/start/server";
import { DEFAULT_THEME, THEME_STORAGE_KEY } from "./theme/runtime";
import { THEME_MODE_NAMES } from "./theme/schema";
const themeBootstrapScript = `
(() => {
try {
const storageKey = "theme";
const storageKey = ${JSON.stringify(THEME_STORAGE_KEY)};
const stored = localStorage.getItem(storageKey);
const theme = stored === "light" || stored === "dark"
const theme = stored === ${JSON.stringify(THEME_MODE_NAMES[0])} || stored === ${JSON.stringify(THEME_MODE_NAMES[1])}
? stored
: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
: (window.matchMedia("(prefers-color-scheme: dark)").matches ? ${JSON.stringify(THEME_MODE_NAMES[1])} : ${JSON.stringify(DEFAULT_THEME)});
document.documentElement.setAttribute("data-theme", theme);
} catch {
document.documentElement.setAttribute("data-theme", "light");
document.documentElement.setAttribute("data-theme", ${JSON.stringify(DEFAULT_THEME)});
}
})();
`;
@@ -28,7 +30,7 @@ type DocumentRenderProps = {
const renderDocument = ({ assets, children, scripts }: DocumentRenderProps): JSX.Element => {
return (
<html lang="en" data-theme="light">
<html lang="en" data-theme={DEFAULT_THEME}>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />