RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix incorrect theme when loading settings

This commit is contained in:
JovannMC 2025-02-06 19:05:32 +03:00
parent ba4288b3be
commit 6e0b10b055
No known key found for this signature in database
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.html
View File

@ -8,13 +8,15 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
%sveltekit.head% %sveltekit.head%
<script> <script>
(function() { (function () {
// Apply theme before DOM is loaded // Apply theme before DOM is loaded
let theme = localStorage.getItem("theme"); let theme = localStorage.getItem("theme");
const prefersDark = window.matchMedia( const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)", "(prefers-color-scheme: dark)",
).matches; ).matches;
console.log(`Theme: ${theme || "default"}, prefers dark: ${prefersDark}`); console.log(
`Theme: ${theme || "N/A"}, prefers dark: ${prefersDark}`,
);
if (theme !== "light" && theme !== "dark") { if (theme !== "light" && theme !== "dark") {
console.log("Invalid theme, setting to default"); console.log("Invalid theme, setting to default");
@ -23,14 +25,15 @@
// first time visitor // first time visitor
window.addEventListener("load", () => { window.addEventListener("load", () => {
window.plausible("Theme set", { window.plausible("Theme set", {
props: { theme: prefersDark ? "dark" : "light" }, props: {
theme: prefersDark ? "dark" : "light",
},
}); });
}); });
} }
// invalid theme or first time visitor, set to default // invalid theme or first time visitor, set to default
theme = prefersDark ? "dark" : "light"; theme = prefersDark ? "dark" : "light";
console.log(`Setting theme to ${theme}`);
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
} }

7
src/routes/+layout.svelte
View File

@ -16,6 +16,7 @@
isMobile, isMobile,
motion, motion,
showGradient, showGradient,
theme,
} from "$lib/store/index.svelte"; } from "$lib/store/index.svelte";
import { import {
InfoIcon, InfoIcon,
@ -93,8 +94,8 @@
isMobile.set(window.innerWidth <= 768); isMobile.set(window.innerWidth <= 768);
}); });
// defaults to true if not set motion.set(localStorage.getItem("motion") !== "false"); // defaults to true if not set
motion.set(localStorage.getItem("motion") !== "false"); theme.set(localStorage.getItem("theme") as "light" | "dark" || "light");
}); });
let goingLeft = $state(false); let goingLeft = $state(false);
@ -218,7 +219,7 @@
<div <div
class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden" class="fixed -z-30 top-0 left-0 w-screen h-screen flex items-center justify-center overflow-hidden"
> >
<VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]"/> <VertVBig class="fill-[--fg] opacity-10 w-[108%] h-[108%]" />
</div> </div>
<div <div
id="gradient-bg" id="gradient-bg"