A Bootstrap-style layout built with semantic HTML, Material-inspired colors, and zero JavaScript.
Container, rows, and cards modeled after Bootstrap ergonomics.
Surface-based elevation and contrast adapted for dark themes.
Theme switching handled with :checked and variables.
| Component | Type | Light | Dark |
|---|---|---|---|
| Background | Primary | #ffffff | #1e1e1e |
| Background | Secondary | #f8f9fa | #242424 |
| Surface | Default | #ffffff | #1e1e1e |
| Surface | Variant | #f1f3f4 | #2a2a2a |
| Surface | Elevated | #ffffff | #303030 |
| Text | Primary | rgba(0, 0, 0, 0.87) | rgba(255, 255, 255, 0.87) |
| Text | Secondary | rgba(0, 0, 0, 0.60) | rgba(255, 255, 255, 0.60) |
| Accent | Default | #6750a4 | #d0bcff |
| Accent | On | #ffffff | #381e72 |
/* Theme switching with :checked */
#theme-switcher:checked ~ .app {
--bg-primary: #1e1e1e;
--bg-secondary: #242424;
--surface: #1e1e1e;
--surface-variant: #2a2a2a;
--surface-elevated: #303030;
/* Other dark theme colors variables */
}