Skip to content

Commit e50f54e

Browse files
huntabytehuntabyte
committed
more
1 parent 480b0b7 commit e50f54e

182 files changed

Lines changed: 380 additions & 9597 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/.velite/docs.json‎

Lines changed: 205 additions & 133 deletions
Large diffs are not rendered by default.

‎docs/src/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import "@svecodocs/kit/theme-blue.css";
1+
@import "@svecodocs/kit/theme-amber.css";
22
@import "@svecodocs/kit/globals.css";
33
@source "../node_modules/@svecodocs/kit";

sites/docs/content/api-reference/mode-storage-key.md renamed to docs/src/content/api-reference/mode-storage-key.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: modeStorageKey
33
description: The key used to store the mode in local storage.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
The key used to store the `mode` in local storage.
@@ -15,10 +15,10 @@ If you wanted to clear the history of the user's mode preference, you could use
1515
import { modeStorageKey } from "mode-watcher";
1616
1717
function clearModeFromLocalStorage() {
18-
localStorage.removeItem($modeStorageKey);
18+
localStorage.removeItem(modeStorageKey.current);
1919
}
2020
</script>
2121
2222
<p>Clear the user's mode preference history.</p>
23-
<button on:click={clearModeFromLocalStorage}>Clear</button>
23+
<button onclick={clearModeFromLocalStorage}>Clear</button>
2424
```

sites/docs/content/api-reference/mode-watcher.md renamed to docs/src/content/api-reference/mode-watcher.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
title: <ModeWatcher />
33
description: API Reference for the ModeWatcher component.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
<script>
8-
import { Callout } from '$lib/components'
8+
import { Callout } from '@svecodocs/kit'
99
</script>
1010

1111
## Usage
@@ -15,10 +15,11 @@ Add the `ModeWatcher` component to your root `+layout.svelte` component.
1515
```svelte title="src/routes/+layout.svelte"
1616
<script lang="ts">
1717
import { ModeWatcher } from "mode-watcher";
18+
let { children } = $props();
1819
</script>
1920
2021
<ModeWatcher />
21-
<slot />
22+
{@render children()}
2223
```
2324

2425
The `ModeWatcher` component will automatically detect the user's preferences and apply/remove the "dark" class, along with the corresponding color-scheme style attribute to the html element.
@@ -73,8 +74,8 @@ Now, when the mode is dark, the root `html` element will have the `dddd` class,
7374

7475
By default, `ModeWatcher` will use the following local storage keys to store the mode and theme:
7576

76-
- `mode-watcher-mode`
77-
- `mode-watcher-theme`
77+
- `mode-watcher-mode`
78+
- `mode-watcher-theme`
7879

7980
You can customize these keys by passing a custom `modeStorageKey` and/or `themeStorageKey` to the `ModeWatcher` component:
8081

‎docs/src/content/api-reference/mode.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
title: mode
3+
description: A state for tracking the current mode.
4+
section: API Reference
5+
---
6+
7+
A readable state that contains the current mode. It can be `"light"` or `"dark"`, or if evaluated on the server, `undefined`. For user selectable modes, use [`userPrefersMode`](/docs/api-reference/user-prefers-mode).
8+
9+
## Usage
10+
11+
```svelte
12+
<script lang="ts">
13+
import { setMode, mode } from "mode-watcher";
14+
15+
function handleModeChange() {
16+
if (mode.current === "light") {
17+
setMode("dark");
18+
} else {
19+
setMode("light");
20+
}
21+
}
22+
</script>
23+
24+
<button onclick={handleModeChange}>{$mode}</button>
25+
```

sites/docs/content/api-reference/reset-mode.md renamed to docs/src/content/api-reference/reset-mode.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: resetMode
33
description: Programatically reset the mode to system preference.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
A function that resets the mode to system preferences.
@@ -13,5 +13,5 @@ A function that resets the mode to system preferences.
1313
import { resetMode } from "mode-watcher";
1414
</script>
1515
16-
<button on:click={resetMode}>System</button>
16+
<button onclick={resetMode}>System</button>
1717
```

sites/docs/content/api-reference/set-mode.md renamed to docs/src/content/api-reference/set-mode.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: setMode
33
description: Programatically set the mode.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
A function that sets the current mode. It accepts a string with the value `"light"`, `"dark"` or `"system"`.
@@ -13,6 +13,6 @@ A function that sets the current mode. It accepts a string with the value `"ligh
1313
import { setMode } from "mode-watcher";
1414
</script>
1515
16-
<button on:click={() => setMode("light")}>Set Light Mode</button>
17-
<button on:click={() => setMode("dark")}>Set Dark Mode</button>
16+
<button onclick={() => setMode("light")}>Set Light Mode</button>
17+
<button onclick={() => setMode("dark")}>Set Dark Mode</button>
1818
```

sites/docs/content/api-reference/set-theme.md renamed to docs/src/content/api-reference/set-theme.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: setTheme
33
description: Programatically set the custom theme.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
A function that sets the current custom theme, not to be confused with [`setMode`](/docs/api-reference/set-mode), which sets the mode (`'light'`, `'dark'` or `'system'`).
@@ -15,6 +15,6 @@ The theme can be set to any arbitrary string value, and is persisted to localSto
1515
import { setTheme } from "mode-watcher";
1616
</script>
1717
18-
<button on:click={() => setTheme("dracula")}>Dracula Theme</button>
19-
<button on:click={() => setTheme("retro")}>Retro Theme</button>
18+
<button onclick={() => setTheme("dracula")}>Dracula Theme</button>
19+
<button onclick={() => setTheme("retro")}>Retro Theme</button>
2020
```

sites/docs/content/api-reference/system-prefers-mode.md renamed to docs/src/content/api-reference/system-prefers-mode.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: systemPrefersMode
3-
description: A store for tracking the system's preferred mode.
4-
tagline: API Reference
3+
description: A state for tracking the system's preferred mode.
4+
section: API Reference
55
---
66

7-
A readable store that represents the operating system's mode preference. It can be `"light"` or `"dark"`, or if evaluated on the server, `undefined`.
7+
A readable state that represents the operating system's mode preference. It can be `"light"` or `"dark"`, or if evaluated on the server, `undefined`.
88

9-
This store will automatically track changes to the operating system's mode preference unless this is disabled by setting the `track` prop to `false` in the [ModeWatcher](/docs/api-reference/mode-watcher) component.
9+
This state will automatically track changes to the operating system's mode preference unless this is disabled by setting the `track` prop to `false` in the [ModeWatcher](/docs/api-reference/mode-watcher) component.
1010

1111
## Usage
1212

@@ -15,5 +15,5 @@ This store will automatically track changes to the operating system's mode prefe
1515
import { systemPrefersMode } from "mode-watcher";
1616
</script>
1717
18-
<p>The system prefers mode is: {$systemPrefersMode}</p>
18+
<p>The system prefers mode is: {systemPrefersMode.current}</p>
1919
```

sites/docs/content/api-reference/theme-storage-key.md renamed to docs/src/content/api-reference/theme-storage-key.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: themeStorageKey
33
description: The key used to store the theme in local storage.
4-
tagline: API Reference
4+
section: API Reference
55
---
66

77
The key used to store the `theme` in local storage.
@@ -15,10 +15,10 @@ If you wanted to clear the history of the user's mode preference, you could use
1515
import { themeStorageKey } from "mode-watcher";
1616
1717
function clearThemeFromLocalStorage() {
18-
localStorage.removeItem($themeStorageKey);
18+
localStorage.removeItem(themeStorageKey.current);
1919
}
2020
</script>
2121
2222
<p>Clear the user's theme preference history.</p>
23-
<button on:click={clearThemeFromLocalStorage}>Clear</button>
23+
<button onclick={clearThemeFromLocalStorage}>Clear</button>
2424
```

0 commit comments

Comments
 (0)