Dynamic Theme
Pick Base Color
Generated Theme Colors
#color1
#color2
#color3
#color1b
#color2b
#color3b
#fill
#background
#card1
#card2
#card3
#card4
#card5
#error
#error2
Copied!
About Dynamic Themes
BeerCSS includes a powerful Material Design 3 color system that can generate a complete color palette from a single source color. When you select a color using the picker above, BeerCSS automatically:
- Generates a color scheme - Creates primary, secondary, and tertiary color variations
- Applies the theme - Updates all UI elements to use the new color scheme
- Maintains accessibility - Ensures proper contrast ratios for text and backgrounds
Using Dynamic Themes in Rhyme
To apply a dynamic theme in your Rhyme apps, you can use the color action:
// Set a blue theme
color theme is #2196f3
// Or use a Rhyme color tag
color theme is #blue6
Tips for Choosing Colors
- Brand colors - Use your organization’s primary brand color as the theme
- Contrast - Darker colors work better for light themes, lighter colors for dark themes
- Accessibility - Test your color choices with both light and dark modes
- Consistency - Once chosen, use the generated palette throughout your app
Click on any color swatch above to copy its hex value to your clipboard!