A playground to explore color system in both light and dark themes, using vanilla JavaScript and CSS. No framework except Astro were used.
Edit Color
Contrast Ratios
Current Color
New Color
Brand Color Sample
Color Palette
Gradient Companion
GRADIENT PREVIEW
Gradient Background Card
This card showcases the selected gradient background.
Companion Suggestions
Component Examples
Typography on Background
Body text using the main text color for body content.
Subtle colored text for muted content and secondary information.
Primary colored text for important highlights and links.
Secondary colored text for subtle accents and labels.
Success messages for positive feedback and confirmations.
Error or danger messages for warnings and critical alerts.
Warning messages for cautionary information.
Informational messages for helpful tips and details.
This is an inner card with body text content to demonstrate contrast and readability.
Typography on Surface
Body text using the main text color for body content.
Subtle colored text for muted content and secondary information.
Primary colored text for important highlights and links.
Secondary colored text for subtle accents and labels.
Success messages for positive feedback and confirmations.
Error or danger messages for warnings and critical alerts.
Warning messages for cautionary information.
Informational messages for helpful tips and details.
This is an inner card with body text content to demonstrate contrast and readability.
Form Elements
Form inputs that adapt to the current theme automatically.
Code Examples
Code blocks and inline code that adapts to the theme colors.
Here's some inline code that adapts to the theme.
// JavaScript example
const themeManager = {
currentTheme: 'light',
toggleTheme() {
this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
}
};/* CSS Variables */
:root {
--primary: #006564;
--secondary: #FFC0CB;
--background: #FAFAFA;
}Use var(--primary) for theme colors.
How to Use
- Toggle between light and dark themes using the switch above, or press Ctrl+T for quick switching.
- Click on any color swatch to open the color picker and customize colors in real time.
- Download your customized theme configuration using the download button (📥) or upload a theme configuration file using the upload button (📤).
- Watch how all colors, components, and text automatically adapt to provide optimal contrast and readability.
