# mrcashmere/harmonyos_arkui_demo_api26 architecture

> Architecture diagram of the GitHub repository mrcashmere/harmonyos_arkui_demo_api26, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mrcashmere/harmonyos_arkui_demo_api26
- Repository: https://github.com/mrcashmere/harmonyos_arkui_demo_api26

## Overview

CashmereAppThemeDemo is a HarmonyOS ArkUI teaching app demonstrating live theme colors, system-following dark mode, and API 26 immersive materials with a lower-version fallback. Users open the home page, explore the theme lab and immersive showcase, or change appearance in settings; settings persist across restarts. The graph also captures the embedded copyable-source teaching feature. Relationships for the deeper page implementations are based on README descriptions and the documented five-layer structure; page/component call wiring was not sampled directly.

Main entry points: [`entry/src/main/ets/pages/ImmersiveShowcasePage.ets`](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ImmersiveShowcasePage.ets) (Immersive showcase), [`entry/src/main/ets/components/SourceBlock.ets`](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/SourceBlock.ets) (Source block), [`entry/src/main/ets/pages/Index.ets`](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/Index.ets) (Home page), [`entry/src/main/ets/pages/ThemeSettingsPage.ets`](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ThemeSettingsPage.ets) (Appearance settings)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and preferences"]
  node_home["Home page<br/>[Index.ets]"]
  node_ability["App startup<br/>[EntryAbility.ets]"]
  node_preferences[("Appearance store")]
end

subgraph group_theme["Theme system"]
  node_settings["Appearance settings"]
  node_theme_lab["Theme lab<br/>[ThemeLabPage.ets]"]
  node_tokens["Design tokens<br/>[DesignTokens.ets]"]
  node_scaffold["Demo scaffold<br/>[DemoScaffold.ets]"]
end

subgraph group_material["Material demos"]
  node_showcase["Immersive showcase"]
  node_material_card["Material card layer<br/>[MaterialCard.ets]"]
  node_card_surface["Card surface<br/>[CardSurface.ets]"]
  node_icon_button["Circle button"]
  node_material_adapter["System material<br/>[SystemMaterial.ets]"]
end

subgraph group_teaching["Teaching snippets"]
  node_source_block["Source block<br/>[SourceBlock.ets]"]
  node_snippets["Source snippets<br/>[SourceSnippets.ets]"]
end

node_user(("App user"))
node_clipboard["System clipboard"]

node_user -->|"opens"| node_home
node_home -->|"opens"| node_theme_lab
node_home -->|"opens"| node_showcase
node_home -->|"opens"| node_settings
node_ability -->|"loads and broadcasts"| node_preferences
node_settings -->|"saves preferences"| node_preferences
node_theme_lab -->|"uses"| node_scaffold
node_theme_lab -->|"resolves colors"| node_tokens
node_settings -->|"updates theme"| node_tokens
node_showcase -->|"uses"| node_material_card
node_showcase -->|"uses"| node_card_surface
node_showcase -->|"uses"| node_icon_button
node_material_card -->|"adapts material"| node_material_adapter
node_card_surface -->|"adapts material"| node_material_adapter
node_icon_button -->|"adapts material"| node_material_adapter
node_theme_lab -->|"shows snippets"| node_source_block
node_showcase -->|"shows snippets"| node_source_block
node_settings -->|"shows snippets"| node_source_block
node_source_block -->|"renders"| node_snippets
node_source_block -->|"copies to"| node_clipboard

click node_home "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/Index.ets"
click node_ability "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/entryability/EntryAbility.ets"
click node_preferences "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/storage/AppearanceStore.ets"
click node_settings "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ThemeSettingsPage.ets"
click node_theme_lab "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ThemeLabPage.ets"
click node_tokens "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/utils/DesignTokens.ets"
click node_scaffold "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/DemoScaffold.ets"
click node_showcase "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ImmersiveShowcasePage.ets"
click node_material_card "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/MaterialCard.ets"
click node_card_surface "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/CardSurface.ets"
click node_icon_button "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/IconCircleButton.ets"
click node_material_adapter "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/utils/SystemMaterial.ets"
click node_source_block "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/SourceBlock.ets"
click node_snippets "https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/teaching/SourceSnippets.ets"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_ability,node_preferences,node_user toneBlue
class node_settings,node_theme_lab,node_tokens,node_scaffold toneAmber
class node_showcase,node_material_card,node_card_surface,node_icon_button,node_material_adapter toneMint
class node_source_block,node_snippets toneRose
class node_clipboard toneIndigo
```

## Components

### App and preferences

- [Home page](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/Index.ets): `entry/src/main/ets/pages/Index.ets`
- [App startup](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/entryability/EntryAbility.ets): `entry/src/main/ets/entryability/EntryAbility.ets`
- [Appearance store](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/storage/AppearanceStore.ets): `entry/src/main/ets/storage/AppearanceStore.ets`

### Theme system

- [Appearance settings](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ThemeSettingsPage.ets): `entry/src/main/ets/pages/ThemeSettingsPage.ets`
- [Theme lab](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ThemeLabPage.ets): `entry/src/main/ets/pages/ThemeLabPage.ets`
- [Design tokens](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/utils/DesignTokens.ets): `entry/src/main/ets/utils/DesignTokens.ets`
- [Demo scaffold](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/DemoScaffold.ets): `entry/src/main/ets/components/DemoScaffold.ets`

### Material demos

- [Immersive showcase](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/pages/ImmersiveShowcasePage.ets): `entry/src/main/ets/pages/ImmersiveShowcasePage.ets`
- [Material card layer](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/MaterialCard.ets): `entry/src/main/ets/components/MaterialCard.ets`
- [Card surface](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/CardSurface.ets): `entry/src/main/ets/components/CardSurface.ets`
- [Circle button](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/IconCircleButton.ets): `entry/src/main/ets/components/IconCircleButton.ets`
- [System material](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/utils/SystemMaterial.ets): `entry/src/main/ets/utils/SystemMaterial.ets`

### Teaching snippets

- [Source block](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/components/SourceBlock.ets): `entry/src/main/ets/components/SourceBlock.ets`
- [Source snippets](https://github.com/mrcashmere/harmonyos_arkui_demo_api26/blob/main/entry/src/main/ets/teaching/SourceSnippets.ets): `entry/src/main/ets/teaching/SourceSnippets.ets`

### Other components

- **App user**
- **System clipboard**

## Connections

- App user → Home page: opens
- Home page → Theme lab: opens
- Home page → Immersive showcase: opens
- Home page → Appearance settings: opens
- App startup → Appearance store: loads and broadcasts
- Appearance settings → Appearance store: saves preferences
- Theme lab → Demo scaffold: uses
- Theme lab → Design tokens: resolves colors
- Appearance settings → Design tokens: updates theme
- Immersive showcase → Material card layer: uses
- Immersive showcase → Card surface: uses
- Immersive showcase → Circle button: uses
- Material card layer → System material: adapts material
- Card surface → System material: adapts material
- Circle button → System material: adapts material
- Theme lab → Source block: shows snippets
- Immersive showcase → Source block: shows snippets
- Appearance settings → Source block: shows snippets
- Source block → Source snippets: renders
- Source block → System clipboard: copies to