@webority/theme 0.34.0 → 0.35.0

package/README.md

@@ -107,28 +107,19 @@ and Bootstrap's utility classes (`.text-body`, `.bg-secondary`) and components r
 the `[data-bs-theme="dark"]` selector that Bootstrap provides. **Pair the attributes**—setting
 one without the other leaves part of the system on the wrong palette.
 
-Persist the choice in localStorage and restore it on next visit:
+Use `AppThemeToggle` (React) or `<app-theme-toggle>` (Razor) rather than wiring the attributes
+by hand: it offers System, Light and Dark, stores the choice in localStorage, writes both
+attributes, and announces `wui:theme:change`. Nothing stored means System (`data-theme="auto"`),
+so a page follows the device until someone picks a theme. Put the before-paint script in
+`<head>` on every page, before the stylesheets, so the stored theme lands before first paint:
+`<app-theme-script storage-key="theme" />` on Razor, the inlined output of
+`themeBootScript("theme")` from `@webority/ui-react` on React.
 
-```js
-// On mount:
-const theme = localStorage.getItem('theme') || 'light';
-document.documentElement.setAttribute('data-theme', theme);
-document.documentElement.setAttribute('data-bs-theme', theme);
-
-// On toggle:
-const newTheme = theme === 'light' ? 'dark' : 'light';
-document.documentElement.setAttribute('data-theme', newTheme);
-document.documentElement.setAttribute('data-bs-theme', newTheme);
-localStorage.setItem('theme', newTheme);
-```
-
-### Automatic detection (opt-in)
+### Automatic detection
 
 Set `data-theme="auto"` on `<html>` to detect the system preference via `@media (prefers-color-scheme: dark)`
-and apply the dark remap automatically. Works with user-level system settings (OS dark mode);
-**does not persist a user's manual toggle** (every reload reads the OS setting). Use for opt-in
-portals where the portal doesn't control color preference; omit for apps that give users a
-theme picker.
+and apply the dark remap automatically. The toggle's System choice is this mode; it also writes the
+resolved theme to `data-bs-theme` and keeps it in step when the device changes.
 
 ### Implementation
 

package/dist/purge-safelist.json

@@ -122,6 +122,7 @@
         "btn-outline-secondary",
         "btn-primary",
         "btn-secondary",
+        "btn-secondary-danger",
         "btn-sm",
         "btn-static",
         "btn-subtle",
@@ -714,6 +715,13 @@
         "workspace-switcher-tick",
         "workspace-switcher-trigger",
         "workspace-switcher-trigger-name",
+        "wui-avatar-picker",
+        "wui-avatar-picker-actions",
+        "wui-avatar-picker-badge",
+        "wui-avatar-picker-camera",
+        "wui-avatar-picker-face",
+        "wui-avatar-picker-img",
+        "wui-avatar-picker-placeholder",
         "wui-banner",
         "wui-banner-body",
         "wui-banner-dismiss",
@@ -827,7 +835,12 @@
         "wui-crop-frame--round",
         "wui-crop-handle",
         "wui-crop-img",
+        "wui-crop-preview",
+        "wui-crop-previews",
+        "wui-crop-previews--round",
         "wui-crop-stage",
+        "wui-crop-toolbtn",
+        "wui-crop-tools",
         "wui-crop-zoom",
         "wui-crop-zoombtn",
         "wui-dashboard-cell",
@@ -899,6 +912,8 @@
         "wui-icon",
         "wui-icon-tip",
         "wui-kanban",
+        "wui-kanban-action",
+        "wui-kanban-actions",
         "wui-kanban-board",
         "wui-kanban-body",
         "wui-kanban-card",
@@ -911,6 +926,7 @@
         "wui-kanban-ghost",
         "wui-kanban-head",
         "wui-kanban-hint",
+        "wui-kanban-lock",
         "wui-kanban-more",
         "wui-kanban-summary",
         "wui-kanban-switch",