@innertia-solutions/nuxt-theme-spark 0.1.122 → 0.1.123
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.
|
@@ -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
|
+
})
|