app dev and CI

2024-12-17 19:26:53 -06:00
parent 960a5b4c57
commit d32a6b412e
12 changed files with 162 additions and 10 deletions
@@ -1,3 +1,29 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
+
+:root {
+  --text-color: #000000;
+  --bg-color: #f4f4f4;
+}
+
+[data-theme='dark'] {
+    --text-color: #f4f4f4;
+    --bg-color: #010101;
+}
+
+body {
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+h1 {
+    color: var(--text-color);
+    @apply  text-4xl
+}
+
+a {
+    @apply text-blue-500
+}
+
+
@@ -9,6 +9,7 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<script src="%sveltekit.assets%/themeGetter.ts"></script>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
@@ -1,13 +1,26 @@
 <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>

-<nav>
-	<a href="/">Home</a>
-	<a href="/about">About </a>
-	<a href="/settings">Settings </a>
-</nav>
+<div class="flex justify-between p-6">
+	<nav>
+		<a href="/" class="pr-3">Home</a>
+		<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>

-{@render children()}
+<div class="p-4">
+	{@render children()}
+</div>
@@ -1,2 +1,6 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Test Text</p>
+<h1>Hello world</h1>
+
+<div class="text-center text-green-500">
+	<p class="text-red-800">Test Text</p>
+	<p>hello</p>
+</div>
@@ -0,0 +1,18 @@
+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'));
+}