Custom Themes
Match Archflow to your brand with custom themes
Archflow supports custom themes so you can match the interface to your brand colors. Import themes from TweakCN or choose from preset options.
Theme System
Archflow uses a semantic CSS variable system for theming. All UI components reference theme variables like --primary, --card, and --foreground rather than hardcoded colors, making comprehensive theming possible.
Preset Themes
Archflow ships with 7 preset themes following Swiss design principles:
| Theme | Description |
|---|---|
| Candy Pink | Vibrant pink and teal with warm highlights |
| Warm Earth | Natural browns and oranges inspired by nature |
| Ocean Blue | Professional blues and teals for clean interfaces |
| Forest Green | Nature-inspired greens for a fresh look |
| Purple Gradient | Modern purple and violet gradients |
| Minimal Gray | Clean and professional monochromatic design (default) |
| Bumble Bee | Bold yellow and black theme with golden accents |
Select a preset from the theme grid on your Profile page. The theme applies instantly across the entire application.
Custom Themes
Import custom themes from TweakCN, a visual theme editor for Tailwind CSS:
- Go to your Profile page and click Import Custom Theme
- Design your theme in TweakCN's visual editor
- Copy the exported CSS content
- Paste it into the import textarea (supports both Tailwind v3
:root/.darkformat and v4@theme inlineformat) - Preview the theme to verify it looks correct
- Save and activate
The theme import page provides a 4-step instruction guide and an example theme you can paste to try it out.
Managing Custom Themes
On the theme import page, you can:
- Edit existing custom themes
- Delete custom themes you no longer need
- Apply any saved custom theme with one click
- View theme warnings if any issues are detected
Dark Mode
Custom themes automatically adapt to dark mode. Archflow uses a MutationObserver to detect dark mode toggles and switches theme variables dynamically --- no page reload required.
Toggle dark mode using the theme switcher in the navigation bar. Both preset and custom themes provide separate light and dark mode color values.
Themes in Documentation
Custom themes carry through to published documentation:
- Shared documentation links respect your theme
- Guest access tokens embed the active theme automatically
- Documentation readers see your branded experience
- Both preset and custom themes work in published views