MarinoDev/FBLA25
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

themes
All checks were successful
ci / docker_image (push) Successful in 58s
Details
ci / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
Drake Marino 2025-01-01 18:59:01 -06:00
parent 1ba1c25c84
commit 327ba53b69
7 changed files with 23 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@sveltejs/adapter-node": "^5.2.9",
"@tailwindcss/forms": "^0.5.9",
"autoprefixer": "^10.4.20",
"js-cookie": "^3.0.5",
"vitest": "^2.0.4"
},
"devDependencies": {
@ -2870,6 +2871,15 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"license": "MIT",
"engines": {
"node": ">=14"
}
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

1
package.json
View File

@ -36,6 +36,7 @@
"@sveltejs/adapter-node": "^5.2.9",
"@tailwindcss/forms": "^0.5.9",
"autoprefixer": "^10.4.20",
"js-cookie": "^3.0.5",
"vitest": "^2.0.4"
}
}

2
src/app.css
View File

@ -2,7 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
:root {
[data-theme='light'] {
--text-color: #000000;
--bg-color: #f4f4f4;
}

12
src/app.html
View File

@ -9,7 +9,17 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<script src="%sveltekit.assets%/themeGetter.ts"></script>
<!-- <script>-->
<!-- const saved_theme = localStorage.getItem('theme');-->
<!-- if (saved_theme) {-->
<!-- document.body.setAttribute('data-theme', saved_theme);-->
<!-- } else {-->
<!-- const prefers_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;-->
<!-- const theme = prefers_dark ? 'dark' : 'light';-->
<!-- document.body.setAttribute('data-theme', theme);-->
<!-- localStorage.setItem('theme', theme);-->
<!-- }-->
<!-- </script>-->
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

9
src/routes/+layout.svelte
View File

@ -1,15 +1,7 @@
<script lang="ts">
import '../app.css';
import { theme, toggleTheme } from '../stores/themeStore';
import { onMount } from 'svelte';
let { children } = $props();
onMount(() => {
theme.subscribe((value) => {
document.documentElement.setAttribute('data-theme', value);
});
});
</script>
<div class="flex justify-between p-6">
@ -18,7 +10,6 @@
<a href="/about" class="px-6">About</a>
<a href="/settings" class="px-6">Settings</a>
</nav>
<button onclick={toggleTheme} class="object-right px-6">Toggle Theme</button>
</div>
<div class="p-4">

18
src/stores/themeStore.ts
View File

@ -1,18 +0,0 @@
import { writable } from 'svelte/store';
import { browser } from '$app/environment';
let storedTheme: string = 'light';
if (browser) {
storedTheme = localStorage.getItem('theme') || 'light';
}
export const theme = writable(storedTheme);
theme.subscribe((value) => {
if (browser) {
localStorage.setItem('theme', value);
}
});
export function toggleTheme() {
theme.update((currentTheme) => (currentTheme === 'light' ? 'dark' : 'light'));
}

9
static/themeGetter.ts
View File

@ -1,9 +0,0 @@
const saved_theme = localStorage.getItem('theme');
if (saved_theme) {
document.body.setAttribute('data-theme', saved_theme);
} else {
const prefers_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = prefers_dark ? 'dark' : 'light';
document.body.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}