Guides
In-depth guides for using Turbo Themes effectively.
Guides
In-depth guides for getting the most out of Turbo Themes.
Available Guides
| Guide | Description |
|---|---|
| Theme Switching | Implement runtime theme switching |
| Custom Themes | Create your own color schemes |
| Accessibility | Ensure your themed UI is accessible |
Quick Tips
Use Semantic Tokens
Instead of hardcoding colors, use semantic tokens that adapt to themes:
/* Good - semantic */
.error {
color: var(--turbo-state-danger);
}
/* Avoid - hardcoded */
.error {
color: #f38ba8;
}Test Both Light and Dark
Always test your UI with at least one light and one dark theme to ensure proper contrast and readability.
Persist User Preference
Remember to save theme choices to localStorage so users don’t have to re-select their
theme on every visit.
Prevent Flash of Unstyled Content
Use a blocking script in <head> to apply the saved theme before the page renders.
Next Steps
Start with the Theme Switching guide to learn how to implement dynamic theme changes.