@innertia-solutions/nuxt-theme-spark 0.1.122 → 0.1.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -28,7 +28,7 @@ const iconColorClass = computed(() => ({
|
|
|
28
28
|
<div class="space-y-4">
|
|
29
29
|
|
|
30
30
|
<!-- Page header card -->
|
|
31
|
-
<div v-if="title" class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3
|
|
31
|
+
<div v-if="title" class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3 bg-background-1">
|
|
32
32
|
<div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
|
|
33
33
|
<div class="flex items-center gap-x-4 min-w-0">
|
|
34
34
|
<div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
|
|
@@ -6,7 +6,7 @@ defineProps<{
|
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
8
|
<template>
|
|
9
|
-
<div class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3
|
|
9
|
+
<div class="sticky top-0 z-20 -mx-3 -mt-3 px-3 pt-3 bg-background-1">
|
|
10
10
|
<div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
|
|
11
11
|
<div class="flex items-center gap-x-4">
|
|
12
12
|
<slot name="icon" />
|
|
@@ -1,54 +1,50 @@
|
|
|
1
|
-
<script setup
|
|
1
|
+
<script setup>
|
|
2
|
+
const isDark = ref(false)
|
|
3
|
+
|
|
4
|
+
onMounted(() => {
|
|
5
|
+
isDark.value = document.documentElement.classList.contains('dark')
|
|
6
|
+
})
|
|
7
|
+
|
|
8
|
+
async function setTheme(value) {
|
|
9
|
+
const dark = value === 'dark'
|
|
10
|
+
isDark.value = dark
|
|
11
|
+
document.documentElement.classList.toggle('dark', dark)
|
|
12
|
+
localStorage.setItem('hs_theme', value)
|
|
13
|
+
document.cookie = `hs_theme=${value};path=/;max-age=${60 * 60 * 24 * 365};SameSite=Lax`
|
|
14
|
+
|
|
15
|
+
try {
|
|
16
|
+
const api = useApi()
|
|
17
|
+
await api.put('auth/me/appearance', { appearance: value })
|
|
18
|
+
} catch { /* best-effort */ }
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
|
|
2
22
|
<template>
|
|
3
23
|
<button
|
|
24
|
+
v-if="isDark"
|
|
4
25
|
type="button"
|
|
5
|
-
class="
|
|
6
|
-
|
|
26
|
+
class="font-medium text-slate-800 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
|
|
27
|
+
@click="setTheme('light')"
|
|
7
28
|
>
|
|
8
29
|
<span class="group inline-flex shrink-0 justify-center items-center size-9">
|
|
9
|
-
<svg
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
fill="none"
|
|
16
|
-
stroke="currentColor"
|
|
17
|
-
stroke-width="2"
|
|
18
|
-
stroke-linecap="round"
|
|
19
|
-
stroke-linejoin="round"
|
|
20
|
-
>
|
|
21
|
-
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
30
|
+
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
31
|
+
<circle cx="12" cy="12" r="4"></circle>
|
|
32
|
+
<path d="M12 2v2"></path><path d="M12 20v2"></path>
|
|
33
|
+
<path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path>
|
|
34
|
+
<path d="M2 12h2"></path><path d="M20 12h2"></path>
|
|
35
|
+
<path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path>
|
|
22
36
|
</svg>
|
|
23
37
|
</span>
|
|
24
38
|
</button>
|
|
25
39
|
<button
|
|
40
|
+
v-else
|
|
26
41
|
type="button"
|
|
27
|
-
class="
|
|
28
|
-
|
|
42
|
+
class="font-medium text-slate-400 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
|
|
43
|
+
@click="setTheme('dark')"
|
|
29
44
|
>
|
|
30
45
|
<span class="group inline-flex shrink-0 justify-center items-center size-9">
|
|
31
|
-
<svg
|
|
32
|
-
|
|
33
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
-
width="24"
|
|
35
|
-
height="24"
|
|
36
|
-
viewBox="0 0 24 24"
|
|
37
|
-
fill="none"
|
|
38
|
-
stroke="currentColor"
|
|
39
|
-
stroke-width="2"
|
|
40
|
-
stroke-linecap="round"
|
|
41
|
-
stroke-linejoin="round"
|
|
42
|
-
>
|
|
43
|
-
<circle cx="12" cy="12" r="4"></circle>
|
|
44
|
-
<path d="M12 2v2"></path>
|
|
45
|
-
<path d="M12 20v2"></path>
|
|
46
|
-
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
47
|
-
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
48
|
-
<path d="M2 12h2"></path>
|
|
49
|
-
<path d="M20 12h2"></path>
|
|
50
|
-
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
51
|
-
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
46
|
+
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
47
|
+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
52
48
|
</svg>
|
|
53
49
|
</span>
|
|
54
50
|
</button>
|
package/package.json
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// Reads the hs_theme cookie (set by SwitchColorTheme + applyAppearance) and applies
|
|
2
|
+
// the dark class to <html> during SSR so there's no flash on first paint.
|
|
3
|
+
export default defineNuxtPlugin(() => {
|
|
4
|
+
const cookie = useCookie('hs_theme')
|
|
5
|
+
if (cookie.value === 'dark') {
|
|
6
|
+
useHead({ htmlAttrs: { class: 'dark' } })
|
|
7
|
+
}
|
|
8
|
+
})
|