Built-in themes

Catalog of shipped themes you can copy as templates. To write your own pack from scratch, start with Authoring. For loader behavior, see Engine architecture.

Built-in themes live in project/frontend/core/src/themes/. Each has a manifest and stylesheet; animated themes also commit dist/theme.js.

Register new built-ins in core/src/scripts/theme.ts (createTheme(...)). Community packs use the same files under Skeleton/Themes/<id>/.

Stylesheet-only (token packs)

ID	Summary
`default-dark`	Default Carbon Dark v3 tokens + Mica
`default-light`	Light Mica + optional `icons/`
`polaris`	North-star dark palette
`midnight`	Starfield / nebula SCSS
`obsidian`	Deep dark glass
`minimal`	Low-distraction dark
`lumina`	Light surfaces
`carbon-web`	Marketing-site navy grid
`neon-district`	Cyan neon cyberpunk
`amber-forge`	Warm forge amber
`void`	Near-black minimal
`phantom`	Purple ghost tones
`witching-hour`	Halloween-adjacent dark
`frost`	Ice / winter
`ember-christmas`	Hearth seasonal

Reference stylesheet: default-dark/default-dark.scss (complete --crbn-* set).

Interactive JavaScript (+ stylesheet)

ID	Technique
`frosted`	2D crystal particles
`slipstream`	Flow-field particles (`theme.yaml`)
`astral-drift`	2D space / planets
`aurora`	2D northern lights
`halloween`	Seasonal canvas
`christmas`	Seasonal canvas (Northern Lights)
`sakura`	Spring petals
`prism-flow`	Gradient flow animation
`deep-lattice`	WebGL crystal polyhedra

For WebGL patterns, read deep-lattice/dist/theme.js. For 2D + tokens, start with frosted/dist/theme.js.

Pattern: Mica token theme {#default-dark}

configuration:
  backdrop:
    type: mica
    theme: dark
  source: ./default-dark.scss

Pattern: YAML + JS {#slipstream}

configuration:
  source: ./slipstream.scss
javascript:
  enabled: true
  entry: dist/theme.js
  layer: backdrop

Pattern: WebGL {#deep-lattice}

"configuration": {
  "backdrop": { "type": "none", "theme": "dark" }
},
"javascript": {
  "enabled": true,
  "entry": "dist/theme.js",
  "layer": "backdrop"
}

backdrop.type: none plus layer: backdrop lets the WebGL canvas show through tempered glass SCSS (--crbn-bg alphas).

Pattern: overlay (“frontdrop”) {#overlay}

Not used by a shipped built-in yet, but fully supported by the host:

javascript:
  enabled: true
  entry: dist/theme.js
  layer: overlay

Use overlay when the canvas should sit above the app chrome (z-index 9000). Use backdrop when it should stay behind the UI.

Page	Link
Overview	Themes
Authoring	Create a theme pack
Engine architecture	Runtime pipeline
Manifest reference	theme.yaml
Built-in catalog	This page