Honestly, I’m not sure I’ve picked the perfect color combo just yet—but no worries! You can always tweak this variable later to fit your style. These days, just about every device lets you choose between Light and Dark modes, so let’s set up this Sass file variable to make switching between them super easy.

:root
    --color-text: rgba(250, 250, 250, 1)
    --color-bg: rgba(42, 42, 42, 0.8)
    --color-brand: rgba(131, 49, 119, 0.8)
    --color-primary: rgba(255, 141, 109, 0.8)
    --color-secondary: rgba(240, 232, 123, 0.8)
    --color-tertiary: rgba(191, 255, 247, 0.8) 
    
@media (prefers-color-scheme: dark)
    :root
        --color-text: rgba(42, 42, 42, 1)
        --color-bg: rgba(250, 250, 250, 0.8)
        --color-brand: rgba(131, 49, 119, 0.8)
        --color-primary: rgba(255, 141, 109, 0.8)
        --color-secondary: rgba(240, 232, 123, 0.8)
        --color-tertiary: rgba(191, 255, 247, 0.8) 

Let’s set up this preset as a dynamic color variable for our theme. When creating a color palette, it typically falls into three main categories: primary, neutral, and accent colors.

The primary color is front and center—it’s the heart of your brand and is used the most, showcasing your brand’s personality everywhere in the theme.

Neutral colors act as the base. They give you backgrounds, subtle borders, and surfaces that keep things easy to read and visually balanced.

Then you have accent colors, which you use just here and there for emphasis. These are perfect for drawing attention to key actions or statuses—like success, warnings, or errors—without taking over from your main or neutral colors.

Everyone has their favorite colors when working on brand themes, so feel free to experiment and see what works best for you. I’ll just share the basics to get you started.