98 lines
4.9 KiB
Markdown
98 lines
4.9 KiB
Markdown
# Theme Domain
|
|
|
|
Manages the theming engine: CSS variable injection, layout grid, theme library persistence, element picker for live editing, and schema validation. Drives the theme settings UI and the `ThemeNodeDirective` used across the app.
|
|
|
|
## Module map
|
|
|
|
```
|
|
theme/
|
|
├── application/
|
|
│ └── services/
|
|
│ ├── element-picker.service.ts DOM element picker for live theme editing
|
|
│ ├── layout-sync.service.ts Syncs grid layout state between editor and theme document
|
|
│ ├── theme-library.service.ts Saved-theme CRUD via Electron file system
|
|
│ ├── theme-registry.service.ts Wraps static registry/container lookups as signals
|
|
│ └── theme.service.ts Core orchestrator: CSS injection, draft/active, validation
|
|
│
|
|
├── domain/
|
|
│ ├── constants/
|
|
│ │ └── theme-llm-guide.constants.ts LLM prompt context for AI-assisted theme editing
|
|
│ ├── logic/
|
|
│ │ ├── theme-defaults.logic.ts Built-in presets, default theme document, JSON template, legacy detection
|
|
│ │ ├── theme-registry.logic.ts Static registry of themeable elements and layout containers
|
|
│ │ ├── theme-schema.logic.ts Schema field definitions, animation starters, suggested defaults
|
|
│ │ └── theme-validation.logic.ts Theme document validation against registry + schema
|
|
│ └── models/
|
|
│ └── theme.model.ts All domain types (ThemeDocument, ThemeElementStyles, etc.)
|
|
│
|
|
├── infrastructure/
|
|
│ ├── services/
|
|
│ │ └── theme-library-storage.service.ts Electron bridge for saving/loading theme files
|
|
│ └── util/
|
|
│ └── theme-storage.util.ts localStorage read/write for active + draft theme text
|
|
│
|
|
├── feature/
|
|
│ ├── settings/
|
|
│ │ ├── theme-grid-editor.component.* Visual grid layout editor
|
|
│ │ ├── theme-json-code-editor.component.* CodeMirror JSON editor
|
|
│ │ └── theme-settings.component.* Main theme settings page
|
|
│ ├── theme-node.directive.ts Applies theme styles + picker interaction to host elements
|
|
│ └── theme-picker-overlay.component.* Floating overlay showing picked element info
|
|
│
|
|
└── index.ts Barrel exports
|
|
```
|
|
|
|
## Built-in presets
|
|
|
|
`theme-defaults.logic.ts` exports `BUILT_IN_THEME_PRESETS` for themes that ship with the app and do not depend on the Electron saved-theme library. The default preset is `Toju Default Dark 11`, a blue-accented dark glass shell with hover tokens (`secondary`, `accent`) lifted above the background and card surfaces. `Toju Website Dark` and the legacy cyan `Toju Default Dark` presets remain available from Theme Studio.
|
|
|
|
The importable artifact at `project-files/themes/toju-default-dark-11.json` is kept byte-for-byte aligned with `DEFAULT_THEME_JSON` by the ThemeService spec.
|
|
|
|
## Layer composition
|
|
|
|
```mermaid
|
|
graph TD
|
|
ThemeService[ThemeService]
|
|
Registry[ThemeRegistryService]
|
|
Library[ThemeLibraryService]
|
|
Layout[LayoutSyncService]
|
|
Picker[ElementPickerService]
|
|
LibStorage[ThemeLibraryStorageService]
|
|
Storage[theme-storage.util]
|
|
Defaults[theme-defaults.logic]
|
|
Validation[theme-validation.logic]
|
|
Schema[theme-schema.logic]
|
|
RegistryLogic[theme-registry.logic]
|
|
Models[theme.model]
|
|
|
|
ThemeService --> Defaults
|
|
ThemeService --> Schema
|
|
ThemeService --> RegistryLogic
|
|
ThemeService --> Validation
|
|
ThemeService --> Storage
|
|
Library --> LibStorage
|
|
Library --> ThemeService
|
|
Layout --> ThemeService
|
|
Layout --> Registry
|
|
Layout --> Defaults
|
|
Registry --> RegistryLogic
|
|
Picker --> Registry
|
|
Validation --> Defaults
|
|
Validation --> RegistryLogic
|
|
Defaults --> RegistryLogic
|
|
Defaults --> Models
|
|
|
|
click ThemeService "application/services/theme.service.ts" "Core orchestrator" _blank
|
|
click Registry "application/services/theme-registry.service.ts" "Registry wrapper" _blank
|
|
click Library "application/services/theme-library.service.ts" "Theme library CRUD" _blank
|
|
click Layout "application/services/layout-sync.service.ts" "Grid layout sync" _blank
|
|
click Picker "application/services/element-picker.service.ts" "Element picker" _blank
|
|
click LibStorage "infrastructure/services/theme-library-storage.service.ts" "Electron file I/O" _blank
|
|
click Storage "infrastructure/util/theme-storage.util.ts" "localStorage" _blank
|
|
click Defaults "domain/logic/theme-defaults.logic.ts" "Default theme" _blank
|
|
click Validation "domain/logic/theme-validation.logic.ts" "Validation" _blank
|
|
click Schema "domain/logic/theme-schema.logic.ts" "Schema fields" _blank
|
|
click RegistryLogic "domain/logic/theme-registry.logic.ts" "Static registry" _blank
|
|
click Models "domain/models/theme.model.ts" "Domain types" _blank
|
|
```
|