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

Dark Mode

[00:00] All right, so we want our dark mode to work and respond to the class of dark. So I'll remove this placeholder style attribute we had and instead add class name, dark. And the first thing we need to do is in the config file, let me collapse these crazy objects here.

[00:18] What we want to do is add the dark mode here and set it to class, because by default, Tailwind will look at the OS level setting of prefers color scheme, but here we want it to work with the class. So I'm going to add dark mode and you can see this class media or selector and here we just want class. And so with that set up,

[00:37] this second demo block should trigger the dark mode. And so there's the first one and second one. And just to verify that it works, let me change the border background of the card for the second one to black for dark mode. In the demo component here, the card has a background of neutral,

[00:55] but I can go dark, BG, neutral, and we're going to go neutral inverted, which is black. And now you can see that the first one is light mode and second one is dark mode. But we don't want to have to manually add dark to every element to change the colors. What we're going for here

[01:13] is a complete CSS variable first approach where the class names don't change at all. You just add a toggle of dark somewhere up the tree and everything that's a child will take effect and become dark mode without having to change anything. So I'll remove this dark modifier here.

[01:30] And instead, what we're going to do is in a CSS file where we've defined the colors, we are going to redefine these colors inside a dark scope. We have this dark class here. And what we can do is select, use that selector, that dark to redefine CSS variables.

[01:49] Oops, I should not be inside my comment. Let me remove the comment. But now inside this dark class, if I redefine the CSS variables value, that's going to be applied because it's higher in the scope. And so this is going to win. So I can basically do what Copilot is offering me to do.

[02:08] And I feel like it's pretty much this, but let's not get ahead of ourselves. I'm going to copy these semantic tokens here and paste them there. But we're going to redefine these. So let's start with the BG neutral. We want to go from gray zero to gray 100.

[02:26] You can see that the second one is making the card black. Next, let's do the background of the whole UI, which is this BG subtle. So color BG subtle is gray five, but now we're going to make it gray 80. Okay, so you can see things are taking shape.

[02:46] And then let's go in the order. And actually worth noting, you don't have to map to a color. For example, for the highlights and accents, teal and purple, I want to change the luminance or the lightness, sorry, to 30 and 70%. So I can, in the dark mode,

[03:04] instead of mapping to something else, I can redefine this. So the reason is I changed the lightness a little bit here. So it kind of looks a little bit better on dark mode than if it's using the same colors here. Then we have BG neutral that we've done. The inverted is going to go to zero. Subtle, we have already changed to 80.

[03:24] And bold, we're going to go to gray five. And yeah, you can see that it's taking shape. Obviously not everything is done, so it's not looking fantastic just yet. For the borders, we're going to not really invert this, but go 40, 60, and 80. So offset it a little bit.

[03:42] And for the text colors, we're going to go with zero. So white, and then 40, 60, and almost black with 90. And now that we have redefined these colors at the dark selector scope, we have our dark UI. And keep in mind, both are using the exact same markup.

[04:03] This is the same demo component. We haven't changed anything outside of passing the dark class. If I remove the class here, both UIs are exactly the same. And so just adding the dark toggle makes everything go to dark mode. So this is a truly automatic dark mode.

[04:22] And you might have heard that you don't always want to just flip and invert the colors. You want some more fine control. And the cool thing here is you can still, on top of it, use the dark modifier on any element and override it where you need to when you need to do a surgical precision change, however you need to.

[00:00] We're going to implement dark mode in a way where we don't have to touch any of the classes in the markup, just add a little toggle like a dark class and everything works. This sounds pretty complicated but thanks to all the work we've done up front it's going to be incredibly easy. So you've seen that we can change the value of a CSS variable with an inline style but we don't

[00:19] want to be doing this. What we want to do really is be able to add a class name of dark or anything else but we're going to go with dark and then everything inside this demo component here because it's scoped to the dark class is going to change to dark mode. So read the instructions

[00:38] and you should be able to achieve it probably easier than you think.

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.

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

Dark Mode

Transcript