Merge pull request #74 from bob2402/theme-switch

problem: can't select light/dark mode theme
This commit is contained in:
gsovereignty
2024-08-07 23:05:57 +08:00
committed by GitHub
3 changed files with 27 additions and 6 deletions

9
package-lock.json generated
View File

@@ -25,6 +25,7 @@
"mode-watcher": "^0.3.0",
"paneforge": "^0.0.4",
"qrious": "^4.0.2",
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.24",
"sveltekit-superforms": "^2.14.0",
"tailwind-merge": "^2.3.0",
@@ -5003,6 +5004,14 @@
}
}
},
"node_modules/svelte-radix": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-1.1.0.tgz",
"integrity": "sha512-kyE9wZiJV937INGb+wiBkAjmGtQUUYRPkVL2Q+/gj+9Vog1Ewd2wNvNmpNMUd+c+euxoc5u5YZMuCUgky9EUPw==",
"peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
}
},
"node_modules/svelte-sonner": {
"version": "0.3.24",
"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.24.tgz",

View File

@@ -55,6 +55,7 @@
"mode-watcher": "^0.3.0",
"paneforge": "^0.0.4",
"qrious": "^4.0.2",
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.24",
"sveltekit-superforms": "^2.14.0",
"tailwind-merge": "^2.3.0",

View File

@@ -1,9 +1,9 @@
<script lang="ts">
import Menu from 'lucide-svelte/icons/menu';
import Search from 'lucide-svelte/icons/search';
import Sun from 'svelte-radix/Sun.svelte';
import Moon from 'svelte-radix/Moon.svelte';
import { toggleMode } from 'mode-watcher';
import { Button } from '$lib/components/ui/button/index.js';
import { Input } from '$lib/components/ui/input/index.js';
import * as Sheet from '$lib/components/ui/sheet/index.js';
import NewMenu from '../components/Menu.svelte';
import RocketPillCard from '../components/RocketPillCard.svelte';
@@ -57,10 +57,21 @@
</div>
</Sheet.Content>
</Sheet.Root>
<NotifyMe />
<div class="w-full flex-1 shrink"><Badge class="flex h-8 max-w-16 shrink-0 items-center justify-center rounded-sm">{$bitcoinTip.height}</Badge>
<NotifyMe />
<div class="w-full flex-1 shrink">
<Badge class="flex h-8 max-w-16 shrink-0 items-center justify-center rounded-sm"
>{$bitcoinTip.height}</Badge
>
</div>
<Button on:click={toggleMode} variant="outline" size="icon" class="shrink-0">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
<Login />
</header>
<div class="flex flex-1 flex-col gap-4 overflow-auto p-4 lg:gap-6 lg:p-6">