@synopackageland/ui 0.23.7 → 0.23.8

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 0.23.8 (2026-11-08)
+
+- Document that DSM windows leave AppRoot's `color-scheme` and `data-ui-color-scheme` unset so the app stays light with its DSM window, even under an operating system's dark preference. Only an app's own full page (a portal or its own browser tab) may follow `prefers-color-scheme`. README, the colour system, theme hooks and AppRoot's prop documentation state the rule
+
 ## 0.23.7 (2026-11-08)
 
 Phone fixes: the bars stay shown while the page is near its top, so the room above the content is never given up before content lies under it, and a settings commit footer stays put while the page scrolls and is smaller. No App change is required; a DSM window and desktop are unchanged.

package/README.md

@@ -476,14 +476,18 @@ readable on it, and leaves the status tones DSM's:
 </AppRoot>
 ```
 
-The theme has a dark scheme too: `<AppRoot color-scheme="dark">` switches
+In a DSM window, leave AppRoot's `color-scheme` unset and do not set
+`data-ui-color-scheme`. DSM draws the window light, even when the operating
+system prefers dark mode. Do not follow `prefers-color-scheme` in a DSM window.
+
+Only a full page of the app's own (a portal or its own browser tab) may follow
+`prefers-color-scheme`. There, `<AppRoot color-scheme="dark">` switches
 every token, and derives the accent for a dark page. AppRoot puts
 `data-ui-color-scheme="dark"` on its root (`[data-ui-app]`); set the attribute
 there yourself only without AppRoot. The embedded stylesheets
 (`themes/dsm7-embedded*.css`, a DSM window) read it only on `[data-ui-app]`, never on
 the host's `<html>`; `<html data-ui-color-scheme="dark">` works only with
-`theme.css`, on a page of your own. The host decides when, for
-example from `prefers-color-scheme` ([colour system](docs/color-system.md#dark-theme)).
+`theme.css`, on a page of your own ([colour system](docs/color-system.md#dark-theme)).
 
 Other tokens are overridden in a stylesheet imported after the library's:
 

package/dist/components/app/app-root/AppRoot.vue.d.ts

@@ -14,6 +14,8 @@ type __VLS_Props = {
      */
     accent?: string;
     /**
+     * Leave unset in a DSM window; DSM draws it light.
+     * Only a full page of the app's own may follow `prefers-color-scheme`.
      * `dark` draws the app in the dark theme (src/theme/dark.css), and derives the
      * accent for it. A full page can set `data-ui-color-scheme="dark"` on
      * `<html>` instead, but then passes `dark` here too when it sets an accent.

package/docs/color-system.md

@@ -3,7 +3,7 @@
 The theme draws every colour from five 12-step scales built from DSM 7's own
 colours (`src/theme/palette.css`). Components use the semantic tokens
 (`--ui-primary`, `--ui-text-secondary`, …) in `src/theme/dsm7.css`, and each
-of those is one step of a scale. The theme is light only, like DSM 7.
+of those is one step of a scale. The default theme is light, like DSM 7.
 
 ## Scales
 
@@ -110,14 +110,21 @@ step 3, so links and selected labels stay readable on a dark page.
 
 ## Dark theme
 
+In a DSM window, leave AppRoot's `color-scheme` unset and do not set
+`data-ui-color-scheme`. DSM draws the window light, even when the operating
+system prefers dark mode. Do not follow `prefers-color-scheme` in a DSM window.
+Only a full page of the app's own (a portal or its own browser tab) may follow
+that preference.
+
 The dark theme (`src/theme/dark.css`) ships inside `theme.css` and the embedded stylesheets. It applies wherever
 `data-ui-color-scheme="dark"` is set: on the app root (`[data-ui-app]`)
 through `<AppRoot color-scheme="dark">`. With `theme.css` on a page of your own,
 `<html data-ui-color-scheme="dark">` works too; the embedded stylesheets (a DSM
 window) are scoped to the app root and read the attribute only there, never on
 the host's `<html>` (an app with an accent passes `color-scheme="dark"` to
-AppRoot in any case, which derives the accent for it). The library does not follow `prefers-color-scheme` by itself;
-the host decides and sets the attribute.
+AppRoot in any case, which derives the accent for it). The library does not
+follow `prefers-color-scheme` by itself; an app that owns its full page decides
+and sets the attribute.
 
 The same roles, with the light page's sage carried into the greys:
 

package/docs/theme-hooks.md

@@ -27,6 +27,11 @@ here stay implementation details and can change in any release.
 
 ### Application root and layout
 
+In a DSM window, leave AppRoot's `color-scheme` unset and do not set
+`data-ui-color-scheme`: DSM draws the window light, even when the operating
+system prefers dark mode. Only a full page of the app's own (a portal or its
+own browser tab) may follow `prefers-color-scheme` (see [Dark theme](color-system.md#dark-theme)).
+
 | Attribute | On | Values |
 | --- | --- | --- |
 | `data-ui-app` | `AppRoot`'s root and its floating hosts (portals) | present |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.23.7",
+  "version": "0.23.8",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",