@foxui/core 0.4.3 → 0.4.4
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,61 +1,24 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
export const theme = $state({
|
|
3
|
-
dark: false
|
|
4
|
-
});
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
1
|
<script lang="ts">
|
|
8
2
|
import { onMount } from 'svelte';
|
|
9
3
|
import { Button, type ButtonProps } from '../button';
|
|
10
4
|
import { cn } from '../../utils';
|
|
5
|
+
import { ModeWatcher, toggleMode } from 'mode-watcher';
|
|
11
6
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// remove local storage
|
|
23
|
-
// localStorage.removeItem("darkMode");
|
|
24
|
-
setTheme(theme.dark);
|
|
25
|
-
|
|
26
|
-
// recommended method for newer browsers: specify event-type as first argument
|
|
27
|
-
window
|
|
28
|
-
.matchMedia('(prefers-color-scheme: dark)')
|
|
29
|
-
.addEventListener('change', (e) => e.matches && toggleTheme());
|
|
30
|
-
|
|
31
|
-
window
|
|
32
|
-
.matchMedia('(prefers-color-scheme: light)')
|
|
33
|
-
.addEventListener('change', (e) => e.matches && toggleTheme());
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
function setTheme(dark: Boolean) {
|
|
37
|
-
var root = document.getElementsByTagName('html')[0];
|
|
38
|
-
|
|
39
|
-
if (dark) {
|
|
40
|
-
root.classList.add('dark');
|
|
41
|
-
} else {
|
|
42
|
-
root.classList.remove('dark');
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function toggleTheme() {
|
|
47
|
-
theme.dark = !theme.dark;
|
|
48
|
-
// save to local storage
|
|
49
|
-
localStorage.setItem('darkMode', JSON.stringify(theme.dark));
|
|
50
|
-
setTheme(theme.dark);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
let { class: className, ref = $bindable(null), ...restProps }: ButtonProps = $props();
|
|
7
|
+
let {
|
|
8
|
+
class: className,
|
|
9
|
+
ref = $bindable(null),
|
|
10
|
+
defaultMode = 'system',
|
|
11
|
+
...restProps
|
|
12
|
+
}: ButtonProps & {
|
|
13
|
+
defaultMode?: 'light' | 'dark' | 'system';
|
|
14
|
+
} = $props();
|
|
54
15
|
</script>
|
|
55
16
|
|
|
17
|
+
<ModeWatcher {defaultMode} />
|
|
18
|
+
|
|
56
19
|
<Button
|
|
57
20
|
variant="link"
|
|
58
|
-
onclick={
|
|
21
|
+
onclick={toggleMode}
|
|
59
22
|
class={cn(
|
|
60
23
|
'theme-toggle focus-visible:outline-base-900 dark:focus-visible:outline-base-100 flex items-center justify-center rounded-2xl focus-visible:outline-2',
|
|
61
24
|
className
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export declare const theme: {
|
|
2
|
-
dark: boolean;
|
|
3
|
-
};
|
|
4
1
|
import { type ButtonProps } from '../button';
|
|
5
|
-
|
|
2
|
+
type $$ComponentProps = ButtonProps & {
|
|
3
|
+
defaultMode?: 'light' | 'dark' | 'system';
|
|
4
|
+
};
|
|
5
|
+
declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
6
6
|
type ThemeToggle = ReturnType<typeof ThemeToggle>;
|
|
7
7
|
export default ThemeToggle;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as ThemeToggle } from './ThemeToggle.svelte';
|
|
2
|
-
export {
|
|
2
|
+
export { toggleMode, setMode, resetMode, mode, userPrefersMode, systemPrefersMode } from 'mode-watcher';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as ThemeToggle } from './ThemeToggle.svelte';
|
|
2
|
-
export {
|
|
2
|
+
export { toggleMode, setMode, resetMode, mode, userPrefersMode, systemPrefersMode } from 'mode-watcher';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxui/core",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -21,7 +21,9 @@
|
|
|
21
21
|
"@eslint/compat": "^1.2.5",
|
|
22
22
|
"@eslint/js": "^9.18.0",
|
|
23
23
|
"@sveltejs/adapter-auto": "^6.0.0",
|
|
24
|
+
"@sveltejs/adapter-static": "^3.0.8",
|
|
24
25
|
"@sveltejs/kit": "^2.16.0",
|
|
26
|
+
"@sveltejs/package": "^2.3.11",
|
|
25
27
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
26
28
|
"@tailwindcss/forms": "^0.5.9",
|
|
27
29
|
"@tailwindcss/typography": "^0.5.15",
|
|
@@ -38,14 +40,13 @@
|
|
|
38
40
|
"tailwindcss": "^4.1.5",
|
|
39
41
|
"typescript": "^5.0.0",
|
|
40
42
|
"typescript-eslint": "^8.20.0",
|
|
41
|
-
"vite": "^6.2.6"
|
|
42
|
-
"@sveltejs/adapter-static": "^3.0.8",
|
|
43
|
-
"@sveltejs/package": "^2.3.11"
|
|
43
|
+
"vite": "^6.2.6"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@number-flow/svelte": "^0.3.7",
|
|
47
47
|
"bits-ui": "^1.4.3",
|
|
48
48
|
"clsx": "^2.1.1",
|
|
49
|
+
"mode-watcher": "^1.1.0",
|
|
49
50
|
"svelte-sonner": "^0.3.28",
|
|
50
51
|
"tailwind-merge": "^3.2.0",
|
|
51
52
|
"tailwind-variants": "^1.0.0"
|