Tutorial 08 · Theming
Theming — Light & Dark
Use data-theme, semantic tokens, and persistence — components adapt automatically.
10 minBeginnerlucUI 2 · v2.1.3
Objectives
- Toggle via
data-luc-theme-toggle. - Understand
--luc-canvas--luc-ink--glass-bg.
Steps
Toggle
theme.html
<html data-theme="light">
<button class="luc-theme-toggle" data-luc-theme-toggle>
<svg data-luc-theme-icon="moon"></svg><svg data-luc-theme-icon="sun"></svg>
</button>
<script>lucUI.setTheme("light")</script>Tokens
| Token | Dark | Light |
|---|---|---|
--luc-surface | rgba(10,18,32,0.80) | rgba(255,255,255,0.72) |
--glass-bg | glass dark | glass light |
Exercise
Listen to luc:themechange to swap logo SVG.