srcdev-nuxt-components 9.1.57 → 9.1.58
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
`useColourScheme` provides reactive dark/light/auto mode switching, persisted in `localStorage` and applied via a
|
|
5
|
+
`useColourScheme` provides reactive dark/light/auto mode switching, persisted in `localStorage` and applied via a `data-color-scheme` attribute on `<html>`. It reads an `enabled` flag from runtime config so consuming apps can disable the feature entirely.
|
|
6
6
|
|
|
7
7
|
**This composable ships inside the `srcdev-nuxt-components` layer** (`app/composables/useColourScheme.ts`). It is auto-imported via the Nuxt layer — **do not create a local copy** in the consuming app.
|
|
8
8
|
|
|
@@ -45,11 +45,11 @@ To let the user toggle the scheme, bind `currentColourScheme` to a control:
|
|
|
45
45
|
</select>
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
Setting `currentColourScheme.value` triggers the watcher, which writes to `localStorage` and calls `applyColourScheme()` to update the `<html>`
|
|
48
|
+
Setting `currentColourScheme.value` triggers the watcher, which writes to `localStorage` and calls `applyColourScheme()` to update the `<html>` `data-color-scheme` attribute immediately.
|
|
49
49
|
|
|
50
50
|
## How scheme application works
|
|
51
51
|
|
|
52
|
-
The layer ships a head script (`utils/colour-scheme-init.ts`) that runs before paint to read `localStorage` and apply the correct
|
|
52
|
+
The layer ships a head script (`utils/colour-scheme-init.ts`) that runs before paint to read `localStorage` and apply the correct `data-color-scheme` attribute to `<html>`, preventing flash of wrong theme. `useColourScheme` then syncs its reactive state to match on `onMounted`.
|
|
53
53
|
|
|
54
54
|
The three valid values are:
|
|
55
55
|
|