From 413a2a8f302d085346b20ea39e51006ed52673ad Mon Sep 17 00:00:00 2001 From: seriousm4x Date: Sun, 6 Aug 2023 13:55:43 +0200 Subject: [PATCH] add theming --- frontend/package.json | 3 +- frontend/pnpm-lock.yaml | 10 ++ frontend/src/app.html | 19 ++++ frontend/src/lib/components/Alert.svelte | 14 ++- frontend/src/lib/components/DeviceForm.svelte | 2 +- frontend/src/lib/components/Navbar.svelte | 107 +++++++++++++++++- frontend/src/routes/settings/+page.svelte | 4 +- frontend/svelte.config.js | 2 +- frontend/tailwind.config.js | 7 +- 9 files changed, 155 insertions(+), 13 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 89a5bd04..5d3ae576 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -86,7 +86,8 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "date-fns": "^2.30.0", "pocketbase": "^0.15.3", - "svelte-fa": "^3.0.4" + "svelte-fa": "^3.0.4", + "theme-change": "^2.5.0" } >>>>>>> 5340d83 (first commit for tailwind rewrite) } diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 34c3c79d..201019da 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -37,6 +37,9 @@ dependencies: svelte-fa: specifier: ^3.0.4 version: 3.0.4 + theme-change: + specifier: ^2.5.0 + version: 2.5.0 devDependencies: '@sveltejs/adapter-static': @@ -3436,6 +3439,13 @@ packages: } dev: true + /theme-change@2.5.0: + resolution: + { + integrity: sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ== + } + dev: false + /thenify-all@1.6.0: resolution: { diff --git a/frontend/src/app.html b/frontend/src/app.html index 93249954..575993d6 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -4,6 +4,25 @@ %sveltekit.head% +
%sveltekit.body%
diff --git a/frontend/src/lib/components/Alert.svelte b/frontend/src/lib/components/Alert.svelte index 52fbf8f3..3b327fff 100644 --- a/frontend/src/lib/components/Alert.svelte +++ b/frontend/src/lib/components/Alert.svelte @@ -4,7 +4,7 @@ import Fa from 'svelte-fa'; import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'; - export let color = ''; + export let color: '' | 'info' | 'success' | 'warning' | 'error' = ''; export let message: string; export let icon: IconDefinition; export let customClasses = ''; @@ -19,3 +19,15 @@ {/if} {message} + + diff --git a/frontend/src/lib/components/DeviceForm.svelte b/frontend/src/lib/components/DeviceForm.svelte index ad2efb6d..ec0522c4 100644 --- a/frontend/src/lib/components/DeviceForm.svelte +++ b/frontend/src/lib/components/DeviceForm.svelte @@ -196,7 +196,7 @@ required /> - * required field + * required field diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte index d5ae1314..b0949a04 100644 --- a/frontend/src/lib/components/Navbar.svelte +++ b/frontend/src/lib/components/Navbar.svelte @@ -4,7 +4,55 @@ import { pocketbase, backendUrl } from '$lib/stores/pocketbase'; import { settingsPub } from '$lib/stores/settings'; import Fa from 'svelte-fa'; - import { faCog, faHome, faPlus, faKey } from '@fortawesome/free-solid-svg-icons'; + import { + faCog, + faHome, + faPlus, + faKey, + faSwatchbook, + faChevronDown, + faCheck + } from '@fortawesome/free-solid-svg-icons'; + import { themeChange } from 'theme-change'; + import { onMount } from 'svelte'; + + let availableThemes = [ + 'light', + 'dark', + 'cupcake', + 'bumblebee', + 'emerald', + 'corporate', + 'synthwave', + 'retro', + 'cyberpunk', + 'valentine', + 'halloween', + 'garden', + 'forest', + 'aqua', + 'lofi', + 'pastel', + 'fantasy', + 'wireframe', + 'black', + 'luxury', + 'dracula', + 'cmyk', + 'autumn', + 'business', + 'acid', + 'lemonade', + 'night', + 'coffee', + 'winter' + ]; + let activeTheme: string | null = ''; + + onMount(() => { + themeChange(false); + activeTheme = document.documentElement.getAttribute('data-theme'); + }); $: avatar = $pocketbase.authStore?.model?.avatar ? $pocketbase.authStore?.model.avatar @@ -37,17 +85,27 @@ +
+
+ + + +
+
+
+ {#each availableThemes as theme} + + {/each} +
+
+
{#if $pocketbase.authStore?.model !== null} diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte index 15bb4114..1070d76f 100644 --- a/frontend/src/routes/settings/+page.svelte +++ b/frontend/src/routes/settings/+page.svelte @@ -63,7 +63,7 @@ {#if settingsPubClone === undefined || settingsPrivClone === undefined} -
+
{:else}

Settings

@@ -148,7 +148,7 @@
-
+
{#if version === undefined} UpSnap version: (untracked) {:else} diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js index f394dce7..db925274 100644 --- a/frontend/svelte.config.js +++ b/frontend/svelte.config.js @@ -15,7 +15,7 @@ const config = { fallback: 'index.html' }), prerender: { - entries: ['/', '/login', '/account', '/welcome', '/device/[id]'] + entries: ['/', '/login', '/account', '/welcome', '/device/[id]', '/device/new', '/settings'] } } }; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 56a93861..0751139b 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,9 +1,12 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/daisyui/**/*.{js,jsx,ts,tsx}'], theme: { extend: {} }, plugins: [require('daisyui')], - daisyui: {} + daisyui: { + themes: true, + darkTheme: 'dracula' + } };