diff --git a/deno.json b/deno.json index 7e96665..524d39f 100644 --- a/deno.json +++ b/deno.json @@ -1,6 +1,9 @@ { "imports": { - "$config": "./src/utils/config/config.ts" + "$config": "./src/utils/config/config.ts", + "$stores": "./src/stores", + "$components": "./src/components", + "$static": "./src/static" }, "tasks": { "dev": "APP_BASE_PATH=./temp vite dev", diff --git a/deno.lock b/deno.lock index 2c9a3e3..ff44b35 100644 --- a/deno.lock +++ b/deno.lock @@ -12,6 +12,7 @@ "npm:eslint-plugin-svelte@^3.12.4": "3.12.4_eslint@9.37.0_svelte@5.40.2__acorn@8.15.0_postcss@8.5.6", "npm:eslint@^9.36.0": "9.37.0", "npm:globals@^16.4.0": "16.4.0", + "npm:lucide-svelte@0.546": "0.546.0_svelte@5.40.2__acorn@8.15.0", "npm:prettier-plugin-svelte@^3.4.0": "3.4.0_prettier@3.6.2_svelte@5.40.2__acorn@8.15.0", "npm:prettier-plugin-tailwindcss@~0.6.14": "0.6.14_prettier@3.6.2_prettier-plugin-svelte@3.4.0__prettier@3.6.2__svelte@5.40.2___acorn@8.15.0_svelte@5.40.2__acorn@8.15.0", "npm:prettier@^3.6.2": "3.6.2", @@ -1369,6 +1370,12 @@ "lodash.merge@4.6.2": { "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" }, + "lucide-svelte@0.546.0_svelte@5.40.2__acorn@8.15.0": { + "integrity": "sha512-vCvBUlFapD59ivX1b/i7wdUadSgC/3gQGvrGEZjSecOlThT+UR+X5UxdVEakHuhniTrSX0nJ2WrY5r25SVDtyQ==", + "dependencies": [ + "svelte" + ] + }, "magic-string@0.30.19": { "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==", "dependencies": [ @@ -1817,6 +1824,7 @@ "npm:eslint-plugin-svelte@^3.12.4", "npm:eslint@^9.36.0", "npm:globals@^16.4.0", + "npm:lucide-svelte@0.546", "npm:prettier-plugin-svelte@^3.4.0", "npm:prettier-plugin-tailwindcss@~0.6.14", "npm:prettier@^3.6.2", diff --git a/package.json b/package.json index f51f097..5e51d33 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "version": "2.0.0", "type": "module", "dependencies": { + "lucide-svelte": "^0.546.0", "sveltekit-adapter-deno": "^0.16.1" }, "devDependencies": { diff --git a/src/app.css b/src/app.css index ffb96a1..47048f8 100644 --- a/src/app.css +++ b/src/app.css @@ -1,2 +1,13 @@ +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); @import 'tailwindcss'; @plugin '@tailwindcss/forms'; + +@custom-variant dark (&:where(.dark, .dark *)); + +@theme { + --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif; +} + +* { + font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; +} diff --git a/src/components/navigation/navbar/navbar.svelte b/src/components/navigation/navbar/navbar.svelte new file mode 100644 index 0000000..caef572 --- /dev/null +++ b/src/components/navigation/navbar/navbar.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/components/navigation/navbar/themeToggle.svelte b/src/components/navigation/navbar/themeToggle.svelte new file mode 100644 index 0000000..47dfa96 --- /dev/null +++ b/src/components/navigation/navbar/themeToggle.svelte @@ -0,0 +1,30 @@ + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 850ac50..2b05c39 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,8 +1,7 @@ @@ -10,4 +9,6 @@ Profilarr -{@render children?.()} + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc88df0..09cfbff 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

+

wip

\ No newline at end of file diff --git a/src/stores/theme.ts b/src/stores/theme.ts new file mode 100644 index 0000000..341219f --- /dev/null +++ b/src/stores/theme.ts @@ -0,0 +1,55 @@ +/** + * Theme store for light/dark mode + */ + +import { writable } from 'svelte/store'; +import { browser } from '$app/environment'; + +type Theme = 'light' | 'dark'; + +function createThemeStore() { + // Initialize theme from localStorage or system preference + let initialTheme: Theme = 'dark'; + if (browser) { + const stored = localStorage.getItem('theme') as Theme | null; + if (stored) { + initialTheme = stored; + } else { + initialTheme = globalThis.matchMedia('(prefers-color-scheme: dark)').matches + ? 'dark' + : 'light'; + } + } + + const { subscribe, set, update } = writable(initialTheme); + + // Apply theme on initialization + if (browser) { + applyTheme(initialTheme); + } + + function applyTheme(newTheme: Theme) { + if (browser) { + document.documentElement.classList.remove('light', 'dark'); + document.documentElement.classList.add(newTheme); + } + } + + function toggle() { + update((current) => { + const newTheme = current === 'light' ? 'dark' : 'light'; + applyTheme(newTheme); + if (browser) { + localStorage.setItem('theme', newTheme); + } + return newTheme; + }); + } + + return { + subscribe, + toggle + }; +} + +export const themeStore = createThemeStore(); diff --git a/svelte.config.js b/svelte.config.js index c8ba8db..2b82417 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -10,7 +10,10 @@ const config = { usage: 'deno-compile' }), alias: { - $config: './src/utils/config/config.ts' + $config: './src/utils/config/config.ts', + $stores: './src/stores', + $components: './src/components', + $static: './src/static' } } };