slococo-uni
/
breakoften
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ThemePicker

This commit is contained in:
Santiago Lo Coco 2024-04-23 23:17:46 +02:00
parent 13832dc13a
commit d63597a480
2 changed files with 32 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/components/NavBar.svelte
View File

@ -1,49 +1,9 @@
<script lang="ts" context="module">
export const themes = ["light", "dark", "auto"] as const
// export type Theme = (typeof themes)[number]
</script>
<script lang="ts">
// import {browser} from '$app/environment'
import { applyAction, enhance } from "$app/forms"
import { page } from "$app/stores"
import { slide } from "svelte/transition"
import ThemePicker from "./ThemePicker.svelte"
import type { Theme } from "../../hooks.server"
let { theme } = $props<{ theme: Theme }>()
// const deriveNextTheme = (theme: Theme): Theme => {
// switch (theme) {
// case 'dark':
// return 'light'
// case 'light':
// return 'dark'
// case 'auto':
// default:
// if (!browser) return 'auto'
// return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark'
// }
// }
// $derived nextTheme = deriveNextTheme($theme)
function toggleTheme() {
const currentIndex = themes.indexOf(theme)
theme = themes[(currentIndex + 1) % themes.length]
if (theme == "auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "light"
: "dark"
}
console.log(theme)
}
let icon = $derived.by(() => {
if (theme === "light") return "🌞"
if (theme === "dark") return "🌙"
if (theme === "auto")
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "🌙"
: "🌞"
})
</script>
<header class="flex items-center justify-between px-2 py-4">
@ -54,21 +14,6 @@
<nav class="flex items-center gap-4">
<button class="py-2 px-4"> Login </button>
<form
method="POST"
action="/?/theme"
use:enhance={async () => {
return async ({ result }) => {
await applyAction(result)
}
}}
>
<input name="theme" value={theme} hidden />
{#key theme}
<button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
{icon}
</button>
{/key}
</form>
<ThemePicker bind:theme />
</nav>
</header>

49
src/lib/components/ThemePicker.svelte
View File

@ -1,38 +1,47 @@
<script lang="ts" context="module">
export const themes = ["light", "dark"] as const
export type Theme = (typeof themes)[number]
export const themes = ["light", "dark", "auto"] as const
</script>
<script lang="ts">
import { slide } from "svelte/transition"
import type { Theme } from "../../hooks.server"
import { applyAction, enhance } from "$app/forms"
let { theme } = $props<{ theme: Theme }>()
function toggleTheme() {
const currentIndex = themes.indexOf(theme)
theme = themes[(currentIndex + 1) % themes.length]
// if (typeof window !== "undefined" && typeof localStorage !== "undefined") {
// localStorage.setItem("theme", theme)
// }
if (theme == "auto") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "light"
: "dark"
}
console.log(theme)
}
let icon = $derived.by(() => {
if (theme === "light") return "🌞"
if (theme === "dark") return "🌙"
if (theme === "auto")
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "🌙"
: "🌞"
})
</script>
{#key theme}
<button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
{icon}
</button>
{/key}
<slot />
<style lang="postcss">
button {
@apply absolute top-0 right-0;
@apply text-3xl;
@apply cursor-pointer;
}
</style>
<form
method="POST"
action="/?/theme"
use:enhance={async () => {
return async ({ result }) => {
await applyAction(result)
}
}}
>
<input name="theme" value={theme} hidden />
{#key theme}
<button transition:slide={{ axis: "x" }} onclick={toggleTheme}>
{icon}
</button>
{/key}
</form>