Dynamic Client-Side color themes using x-theme-x and --var()

[mauricekindermann]

I found mysellf needing two complex color related features that weren't obvious or out-of-the-box features of tailwind.

1. Each of my categories has a different color spectrum, eg one is Green, another is Red. So in all my compontents I needed a way to access these themes without having to duplicate everything simply for colors.

2. I also have printable templates that a user can theme (eg select purple, orange, green), and I wanted this to work client-side, and somehow make sure every tailwind class is cpatured by the compliler for every color.

So I came up with this:

First, define your colors in your tailwind config, and then add a "theme" color using vars. (I moved my colors to a JSON file so I can visualize them on the frontend.)

const colors = require('./colors.json');

colors: {
    ...colors,
    theme: {
        50: 'var(--theme-100)',
        100: 'var(--theme-100)',
        200: 'var(--theme-200)',
        300: 'var(--theme-300)',
        400: 'var(--theme-400)',
        500: 'var(--theme-500)',
        600: 'var(--theme-600)',
        700: 'var(--theme-700)',
        800: 'var(--theme-800)',
        900: 'var(--theme-900)',
        950: 'var(--theme-950)',
    },
},

Then add an @import "themes-color-variables.scss"; at the top of app.css:

$themes: 'blue', 'red', 'orange', 'green', 'purple', 'teal';
$shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;

@mixin create-theme($theme) {
    @each $shade in $shades {
        --theme-#{$shade}: theme('colors.#{$theme}.#{$shade}');
    }
}

:root {
    @include create-theme('blue'); //default
}

@each $theme in $themes {
    .theme-#{$theme} {
        @include create-theme($theme);
    }
}

This creates a relatively small footprint of CSS, but now, like magic, you can do this anywhere:

<div class="theme-{{ $category->getCateogryColor() }}">
    <div class="bg-theme-200 text-theme-800"></div>
</div>

No safelist, no CSS abstraction, no duplicate code (except the color themes), no javascript, no data-targets, no inline-styles, just simple tailwind that works with your IDE.

The best part is if you want to make color selection dynamic on the frontend, you only need to change the theme-x class and this will change all colors on the fly for that element and it's children using x-theme-x.

I assume this is kind of how light/dark mode works, so maybe this isn't news for some, but I've never built a dark/light mode system myself.

Sharing in case anyone runs into a similar scenario, or has a better way to handle this kind of color selection in Tailwind.