Introduction to themes
Theme
Themes are at the heart of Mytril’s flexible design system, powered by custom CSS variables generated via JS-to-CSS. This allows for simple and complete customization of your application. With Mytril, you can build:
- Customize surfaces, text colors, and other styling elements
- Modify the default theme or create entirely new themes
- Leverage a color-scheme (light/dark modes supported)
- Enjoy auto-inherited styles for all Mytril components
Preset themes
Mytril default theme supports both light and dark color schemes. These are applied automatically or are user-configurable, allowing you to start styling right from the start without additional configuration.
Other themes will be added with new versions of Mytril
Default
Light
primary
oklch(48.37% 0.003 197.07)
primary-container
oklch(100.00% 0.000 0)
on-primary
oklch(100.00% 0.000 0)
on-primary-container
oklch(45.98% 0.002 247.87)
secondary
oklch(48.19% 0.000 0)
secondary-container
oklch(92.65% 0.002 17.20)
on-secondary
oklch(100.00% 0.000 0)
on-secondary-container
oklch(40.91% 0.000 0)
tertiary
oklch(48.37% 0.003 197.07)
tertiary-container
oklch(100.00% 0.000 0)
on-tertiary
oklch(100.00% 0.000 0)
on-tertiary-container
oklch(45.98% 0.002 247.87)
error
oklch(50.60% 0.193 27.70)
error-container
oklch(91.83% 0.042 25.23)
on-error
oklch(100.00% 0.000 0)
on-error-container
oklch(23.60% 0.096 27.19)
warning
oklch(84.42% 0.172 84.93)
warning-container
oklch(98.37% 0.088 107.92)
on-warning
oklch(0.00% 0.000 0)
on-warning-container
oklch(44.46% 0.108 56.79)
success
oklch(67.31% 0.162 144.21)
success-container
oklch(99.92% 0.001 197.14)
on-success
oklch(0.00% 0.000 0)
on-success-container
oklch(26.44% 0.090 142.50)
info
oklch(65.82% 0.169 248.81)
info-container
oklch(96.94% 0.045 196.44)
on-info
oklch(0.00% 0.000 0)
on-info-container
oklch(27.62% 0.157 263.91)
background
oklch(98.22% 0.004 17.23)
on-background
oklch(22.32% 0.002 17.27)
surface
oklch(98.22% 0.004 17.23)
surface-variant
oklch(91.35% 0.003 197.10)
surface-bright
oklch(98.22% 0.004 17.23)
surface-dim
oklch(88.85% 0.004 17.24)
surface-container
oklch(94.89% 0.005 34.31)
surface-tint
oklch(48.37% 0.003 197.07)
surface-container-lowest
oklch(100.00% 0.000 0)
surface-container-low
oklch(96.62% 0.003 39.48)
surface-container-high
oklch(93.11% 0.004 17.24)
surface-container-highest
oklch(91.48% 0.004 39.48)
on-surface
oklch(22.32% 0.002 17.27)
on-surface-variant
oklch(39.55% 0.004 219.59)
outline
oklch(56.93% 0.005 197.02)
outline-variant
oklch(82.76% 0.004 219.54)
shadow
oklch(0.00% 0.000 0)
scrim
oklch(0.00% 0.000 0)
Dark
primary
oklch(100.00% 0.000 0)
primary-container
oklch(86.99% 0.000 0)
on-primary
oklch(31.12% 0.003 197.01)
on-primary-container
oklch(36.96% 0.003 197.04)
secondary
oklch(82.82% 0.002 17.20)
secondary-container
oklch(36.77% 0.000 0)
on-secondary
oklch(30.92% 0.000 0)
on-secondary-container
oklch(87.04% 0.002 67.80)
tertiary
oklch(100.00% 0.000 0)
tertiary-container
oklch(86.99% 0.000 0)
on-tertiary
oklch(31.12% 0.003 197.01)
on-tertiary-container
oklch(36.96% 0.003 197.04)
error
oklch(83.83% 0.089 26.76)
error-container
oklch(41.71% 0.170 27.38)
on-error
oklch(32.75% 0.134 27.32)
on-error-container
oklch(91.83% 0.042 25.23)
warning
oklch(94.67% 0.188 105.90)
warning-container
oklch(60.95% 0.130 72.30)
on-warning
oklch(100.00% 0.000 0)
on-warning-container
oklch(98.37% 0.088 107.92)
success
oklch(82.94% 0.160 144.79)
success-container
oklch(43.00% 0.145 142.77)
on-success
oklch(100.00% 0.000 0)
on-success-container
oklch(99.92% 0.001 197.14)
info
oklch(79.12% 0.129 231.71)
info-container
oklch(42.83% 0.163 258.60)
on-info
oklch(100.00% 0.000 0)
on-info-container
oklch(96.94% 0.045 196.44)
background
oklch(18.79% 0.002 17.30)
on-background
oklch(91.48% 0.004 39.48)
surface
oklch(18.79% 0.002 17.30)
surface-variant
oklch(34.56% 0.001 17.22)
surface-bright
oklch(34.56% 0.001 17.22)
surface-dim
oklch(18.79% 0.002 17.30)
surface-container
oklch(24.04% 0.002 17.26)
surface-tint
oklch(82.69% 0.001 286.37)
surface-container-lowest
oklch(16.38% 0.000 0)
surface-container-low
oklch(22.32% 0.002 17.27)
surface-container-high
oklch(28.50% 0.000 0)
surface-container-highest
oklch(32.60% 0.001 17.23)
on-surface
oklch(91.48% 0.004 39.48)
on-surface-variant
oklch(82.76% 0.004 219.54)
outline
oklch(65.45% 0.004 219.55)
outline-variant
oklch(39.55% 0.004 219.59)
shadow
oklch(0.00% 0.000 0)
scrim
oklch(0.00% 0.000 0)
Theme variables
Theme variables are defined in the mytril.config.js file. Mytril uses these variables to ensure consistent styles across all components in your app.
Example structure:
- The theme is applied to the
<html>tag through themytril-theme="default"attribute. - Light and dark variants are appended as
.lightor.darkclasses.
Compatibility:
Mytril variables follow a strict format to prevent conflicts with popular CSS frameworks such as UnoCSS or TailwindCSS.
Define your custom theme
Easily customize your own theme by defining keys for variables like colors, fonts, and more. Below are examples of different configurations.
Single Color Key Example
Use for themes with identical light and dark setups.
Light and dark color variants
Create themes with separate values for light and dark modes.
Advanced nested configurations
Use nested keys for variations or hover states.
Normalize Mytril variables
Customize Mytril using well-structured variables for consistent application-wide styles.
Here’s a breakdown of available variable types:
| Variable | Usage |
|---|---|
--color-{key} | Customize theme colors for design consistency. |
--font-{key} | Define font family for Mytril components. |
--radius-{key} | Set consistent border-radius values for all components. |
Example:
Dynamic theme switching
Customize themes based on user interaction, content sections, or preferences using Mytril’s built-in API.
Define your themes in config:
Switch themes using setTheme:
This dynamically updates themes and propagates the changes to all components.
Dark mode: easy setup
Dark mode is becoming a fundamental design element in web apps. Mytril simplifies its implementation with built-in support for light and dark themes.
Default behavior
By default, Mytril adapts to the operating system’s color mode (light or dark). You can override this behavior in the mytril.config.js file.
Color scheme configuration:
Set your preferred default color scheme:
| Key | Description |
|---|---|
system | Automatically adjusts based on OS mode. |
dark | Forces dark mode regardless of OS settings. |
light | Always uses the light theme. |
Theming utilities
Mytril includes utilities to handle theme-related functionality programmatically:
| Utility | Description |
|---|---|
themeStore | Tracks the current active theme (system, etc.) |
setColorScheme | Switch between modes (system, dark, light) |
Example:
Start customizing your themes
By fully utilizing Mytril’s theming system, you can create stunning, adaptable, and user-oriented UIs. Mytril’s flexibility allows you to define color schemes, seamlessly switch between dark and light modes, and customize designs down to the smallest detail.
Explore further by experimenting with dynamic themes, integrating with CSS frameworks like TailwindCSS or UnoCSS, or setting preferences through the built-in API tools. Build the exact experience your users expect with Mytril’s tailored theming capabilities.
Does this improved version align better? Let me know if you’d like more refinement!
Next steps: Experiment with advanced theme configurations for tailored user experiences!