Multi-Theme Support

[00:00] All right so we have a light mode and we have a dark mode and we're going to create another theme we'll call it citrus and this citrus theme is going to have light and dark mode as well. So in our app we're going to duplicate these two demo elements so we got four of them now

[00:19] and these two are going to have we could add a class name of citrus but I think it's pretty cool to use a data theme data attribute which is more like explicit of saying hey I am a toggle for a theme anything works you can use any selector that you want but here data theme

[00:38] equals citrus and here we're going to combine both citrus theme and the dark mode. So now we have four of our elements one two three four and the last two this one and this one we're going to give

[00:51] a nice orangey lemony citrusy colors for the highlight and the accent colors. So in the Tailwind CSS file we have our root scope then we have our dark mode scope and we're going to do

[01:06] exactly the same but we're only going to care of these two for simplicity I'll copy these and we are going to add a new data theme citrus here so brackets data dash theme equals citrus I'm going

[01:22] to paste these values but reset the lightness to 50 for both and so I'm going to change the hue and that's the beauty about HSL is you can just change the hue and have colors that have similar

[01:35] lightness and saturation and so 60 and 30 is a lime green and orangey which is going to feel perfectly citrusy so by just doing this the first two have the normal theme and then check this out

[01:49] we have the citrus theme see this is why I was changing the lightness in the dark mode for these I feel like it works quite well if you change the lightness of this one to 30 this one to 70. Once again we're going to do exactly the same we're going to redefine that scope and combine it

[02:09] with the dark selector and now here I can change this to 30 and this to 70 and we should have a pretty cool looking dark and light mode citrus theme so obviously we've just changed these colors

[02:25] but you could go to town and change colors of the text change the border radius like do everything you want with the exact same approach and so one thing to note is when we have that selector with the data citrus and dark without space it means that both the data attribute and the dark

[02:44] class need to be on the exact same element for things to work luckily for us this works here because we have both on the same level if you wanted to have the class dark on the HTML attribute and then add a data theme citrus further down the line you could not do this so make sure that if

[03:03] you want this to be a bit more flexible and be able to combine things in more different scenarios you might want to add the same selector but with a space which means that the dark class can be a

[03:14] child of the data theme citrus parent and maybe even add the inverse so have dot dark space citrus so you can have the dark class higher on the tree than the data citrus and with these three you are

[03:29] able to completely mix and match add a leaf component just add dark mode for a specific leaf component and this is super super super powerful so i hope you enjoyed this play with this try to add the dark class or the citrus theme try to add three five two hundred thousand six hundred and

[03:46] seventy nine themes with different colors and it's all going to work and it's pretty fun

[00:00] Dark mode is cool, but you're going to add multi-themes, multi-color themes that work in both dark and light mode super easily with the exact same approach. You've got this.

Semantic, themable color design tokens in Tailwind CSS

In this workshop, we're going to define semantic color tokens in Tailwind CSS,
to adhere to a convention set in a Figma design File.

We'll cover both Tailwind CSS v3 and v4 approaches 🔥

## What to expect:

**Figma to Tailwind CSS:** Convert a Figma design to a Tailwind CSS project.

**Color Design Tokens:** Implement custom colors in your Tailwind CSS project,
starting with raw colors and adding a layer of abstraction for semantic color
tokens.

**Semantic Design Tokens:** Lock down color usage to specific scenarios.

**CSS Variables:** Leverage CSS variables to make your color tokens themable.

**Tailwind CSS v4:** Prepare for the future by porting your work to the Tailwind
v4 CSS-first theme configuration.

Tailwind CSS Color Tokens

Simon Vrachliotis

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

Support enabling dark mode support in your tailwind project with just a single class.

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

Multi-Theme Support

Transcript