A playground to explore color system in both light and dark themes, using vanilla JavaScript and CSS. No framework except Astro were used.

Color Palette

Background

Surface

Text

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Component Examples

Interactive Buttons

These buttons demonstrate the different color variants available in both themes.

Button Text Color:

Light Dark Text

Bold text

Typography on Background

Regular text using the main text color for body content.

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.

Typography on Surface

Regular text using the main text color for body content.

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.

Form Elements

Form inputs that adapt to the current theme automatically.

Code Examples

Code blocks and inline code that adapt 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;
  --bg: #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.

Edit Color