@placeholderco/placeholder-ui 2.2.4 → 2.2.5
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.
- package/dist/ui/ThemeSwitcher.svelte +16 -4
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte';
|
|
2
3
|
import { setTheme, themeState } from '../theme.svelte.js';
|
|
3
4
|
|
|
4
5
|
import sunSvg from '../icon/sun.svg?raw';
|
|
@@ -31,6 +32,17 @@
|
|
|
31
32
|
system: 'System theme'
|
|
32
33
|
};
|
|
33
34
|
|
|
35
|
+
// The server always renders the 'system' theme (no localStorage), but the client loads the
|
|
36
|
+
// saved theme at module load. Rendering the server values until mounted keeps the hydrated
|
|
37
|
+
// markup identical and avoids a hydration_html_changed warning from the {@html} icon.
|
|
38
|
+
let mounted = $state(false);
|
|
39
|
+
onMount(() => {
|
|
40
|
+
mounted = true;
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
const theme = $derived(mounted ? themeState.theme : 'system');
|
|
44
|
+
const isDarkMode = $derived(mounted ? themeState.isDarkMode : false);
|
|
45
|
+
|
|
34
46
|
function cycleTheme() {
|
|
35
47
|
const index = themeCycle.indexOf(themeState.theme);
|
|
36
48
|
setTheme(themeCycle[(index + 1) % themeCycle.length]);
|
|
@@ -38,14 +50,14 @@
|
|
|
38
50
|
</script>
|
|
39
51
|
|
|
40
52
|
<div class="theme-switcher">
|
|
41
|
-
{#key
|
|
53
|
+
{#key theme}
|
|
42
54
|
<ActionIcon
|
|
43
|
-
variant={
|
|
44
|
-
svg={icons[
|
|
55
|
+
variant={isDarkMode ? darkVariant : lightVariant}
|
|
56
|
+
svg={icons[theme]}
|
|
45
57
|
class="action-icon"
|
|
46
58
|
size="1.6em"
|
|
47
59
|
onclick={cycleTheme}
|
|
48
|
-
tooltip={tooltips[
|
|
60
|
+
tooltip={tooltips[theme]}
|
|
49
61
|
/>
|
|
50
62
|
{/key}
|
|
51
63
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@placeholderco/placeholder-ui",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.5",
|
|
4
4
|
"description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Placeholderco",
|