Feat: Adoptive theme foundation
This commit is contained in:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user