On this page
Overview
Loads, applies, previews, saves, resets, and synchronizes semantic Arcane themes.
- Artifact
ThemeManager.js· esm - Classification
public first party - Availability
Browser/native hybrid - Normalization
Theme values/events normalized; storage/native failures mixed. Scoped data-arcane-palette previews follow the page unless their own data-color-scheme is light or dark; this preview override leaves page mode unchanged, with chooser order/layout/toggle owned by the application.
Import and lifecycle
import * as module from '/node_modules/arcane-os/runtime/arcane/modules/ThemeManager.js';
Import reuses the classic ThemePresentation owner and connects its complete-error logger; construction binds stores and appearance bridge without I/O. load() reads preferences and applies DOM state. Set/save/activate/reset methods persist settings, mutate root presentation, call native appearance, and emit. preview() mutates root without persistence. applyUserSkin delegates to ThemePresentation and applies complete class lists synchronously and normally remembers presentation in app-scoped local storage; cache:false suppresses that write. loadAndApplyTheme restores the nonauthoritative cache before asynchronous preference loading; apply() caches only its applied appearance attributes and Theme-owned custom CSS properties. No User import, profile migration, startup barrier, or first-paint guarantee from module-only use.
Application-facing behavior: default ThemeManager, loadAndApplyTheme(), synchronous applyUserSkin(skin,{root?,body?,cache=true}={}) delegated to ThemePresentation; complete skin classes preserve unrelated body classes, names default/warm/curious/hopeful/harmony/warrior follow light/dark/system, custom themes retain precedence, and data-arcane-palette scopes shared-color previews. Bare root retains generic neutral colors. Complete strings and numeric class text are cached without a User write. apply() records only applied appearance attributes and Theme-owned custom properties; preview() stays transient. Cache is reconciled by saved preferences and existing User readiness; no profile migration or first-paint guarantee from module-only use. Existing scheme/custom/system APIs and arcane-theme-change remain.
Protocol and host implementation
PreferenceStore, DOM, Arcane.appearance This detail does not widen the application-facing API or grant authority.
Exports, signatures, parameters, and results
| Binding | Form | Declaration or signature | Parameter syntax |
|---|---|---|---|
applyUserSkin | function | function applyUserSkin(skin,options) | skin,options |
default | default · class | class ThemeManager | — |
loadAndApplyTheme | function | async function loadAndApplyTheme(options={}) | options={} |
| Callable | Kind | Exact public signature | Parameter syntax |
|---|---|---|---|
loadAndApplyTheme | exported-function | async function loadAndApplyTheme(options={}) | options={} |
applyUserSkin | exported-function | function applyUserSkin(skin,options) | skin,options |
| Member | Kind | Exact public declaration | Parameter syntax |
|---|---|---|---|
ThemeManager.constructor | constructor | constructor({appearanceStore=null,skinStore=null,systemAppearance=null,root=null}={}) | {appearanceStore=null,skinStore=null,systemAppearance=null,root=null}={} |
ThemeManager.load | async method | async load() | — |
ThemeManager.apply | method | apply() | — |
ThemeManager.current | method | current() | — |
ThemeManager.setScheme | async method | async setScheme(scheme='system') | scheme='system' |
ThemeManager.saveCustom | async method | async saveCustom(input={}) | input={} |
ThemeManager.activateCustom | async method | async activateCustom() | — |
ThemeManager.preview | method | preview(input={}) | input={} |
ThemeManager.resetCustom | async method | async resetCustom() | — |
ThemeManager.syncSystemAppearance | async method | async syncSystemAppearance() | — |
ThemeManager.emit | method | emit(reason='theme-state-applied') | reason='theme-state-applied' |
ThemeManager.dispose | method | dispose() | — |
ThemeManager.destroy | method | destroy() | — |
Parameter meanings and results
new ThemeManager({appearanceStore?,skinStore?,systemAppearance?,root?}); load(), current(), apply(), setScheme(), saveCustom(), activateCustom(), preview(), resetCustom(), syncSystemAppearance(); loadAndApplyTheme(options) resolves {manager,state}. applyUserSkin(skin,{root?,body?,cache=true}={}) preserves unrelated body classes and returns the selected named palette or null for no applicable skin/root. Strings, numbers, multi-class skins and unknown application classes remain usable; complete strings and numeric class text are cached without saving a User record. Falsy skins retain current presentation; an absent body receives the latest class list at DOMContentLoaded. Default/warm/curious/hopeful/harmony/warrior palettes honor light/dark/system and custom precedence on screen. data-arcane-palette scopes the same CSS palette variables for chooser previews; an optional data-color-scheme=light|dark on that same element selects its variant independently of the page, while absence follows the page. Applications own preview ordering, layout, and toggles. Bare root retains generic neutral colors; the prior layout default belongs to explicit default palette selection. theme.css and document-site.css import shared print.css, which overrides root/body/scoped palette tokens during print with the existing base light palette and white paper surface, sets 1in (25.4mm) page margins, and resets root/body margins. During print, the shared header/sidebar shell is hidden and main-content scrolling expands into document flow. Saved preferences, screen presentation, fonts and media remain unchanged. Snapshot expansion and documentation-site print rules remain scoped to their owned surfaces in the same stylesheet. PrintView loads that shared text before registering views.
Events, side effects, and errors
Source-literal CustomEvent dispatches
No source-literal CustomEvent dispatch is part of this artifact.
Lifecycle and event flow
- Global arcane-theme-change with current state after persisted changes.
Direct coded failures
This artifact directly assigns no stable coded failure.
Exported Error subclasses
This artifact exports no Error subclass.
Documented failure behavior
- Theme validation and authoritative preference/storage/native failures propagate.
- Invalid stored custom theme is contained as null during load.
- Presentation-cache failures log the complete original Error without blocking rendering.
Availability and capabilities
Browser/native hybrid. Theme values/events normalized; storage/native failures mixed. Scoped data-arcane-palette previews follow the page unless their own data-color-scheme is light or dark; this preview override leaves page mode unchanged, with chooser order/layout/toggle owned by the application.
Native preference reads/writes require preferences.read/preferences.write; system synchronization requires appearance.write, with related reads under appearance.read. Browser/local adapters need no Core.
Contract example
import {loadAndApplyTheme} from '/node_modules/arcane-os/runtime/arcane/modules/ThemeManager.js';
const {manager,state} = await loadAndApplyTheme();
console.log(state.mode, manager.current());