How To Dark Mode and Beyond

especially if you've only done light and dark or even just light mode, something that, like, will will take your theme to a a place where it's completely flexible. Yeah. Like it it it doesn't make sense

background variable.

in any context,

background, I think the flash of unthemed content will will, So for for me, that's where I've I've landed. You think about these things as But I think an ideal scenario, you shouldn't be fussing that much. And and, honestly, we'll talk about this a little bit more towards the end of the episode, rid. With new CSS APIs,

that points to yellow, pretty common way is to just do an inline style. So when you're making making the div or the article or whatever, just style equals and you put the variables right there. Or you can select the thing with the CSS selector and then overwrite the variables when the theme switched. I like subscribe to the theme store.

then you're reassigning yellow to be like a purplish color for the level up theme. It doesn't make sense. So

which uses yellow hue to compute itself. Right? So sometimes you're 6 or 7. And I wish Dev Tools did a better job at to the body so that you can target depend itself based on the user's system,

because when you Hover over them, sometimes it just says

approach the override as well. Rid Yeah. And, yeah, I've I'm the same way. You know? I I have since moved to maybe the heading text is going to be something a little bit different than the default foreground background. Yeah. I think there's trade offs. So, like, one thing to think about is that you could look at any given component. Like, I'm looking at a card right now. I'm looking at a card. The the the heading is color white.

API.

or even, like, the light and dark.

I could see if you had like a SaaS application, But the show notes need to be In that case, it's not as simple as just switching variables because

You're always having a background and a foreground.

always thinking of background, foreground,

the general foreground of this component, I always said foreground. Or if I wanna have the more subtle foreground, it's foreground 1. Or the even more subtle for or the inverted fore foreground, it's foreground sheet. Right? Yeah. So For me, that system makes more sense because, again, it's taking it that level of extract abstraction out. And, also, again, you make it so that

So, like, getting out of that world of of using a color for something, Shadows, base font,

Which yellow Points to yellow 3. Points to yellow 3.

or, like, you when you think of like a like a a good example of, like, any given website might have a background of black, But then the content area

variable definitions, rid. The designer versus the system

you don't have to know what that component's API is. You just think about in any given context, there's always gonna be a foreground and a background. Like, what if you went 1 step further and said

But I went with a more flexible

And instead of getting micro with that variable naming, you are it's inevitable that you're gonna hit situations that don't work. But the answer is to, like, adjust the system at that point. Right? Because,

what a component

If you keep it always background and foreground, And this FGBG

Those are don't kick in. So you also have to

sheet and foreground sheet. And sheet is a a word that I've always used for this, but I've seen other people use many other words. And a sheet to me is like a content area I don't need that in my life, but it is fascinating.

but that yellow. It might be yellow on the syntax website, but when you flip it to a different theme,

rid It is a tough habit, in any context,

it's much nicer because they can be redefined So in CSS, there are media queries, prefer color scheme, dark and light. And you can, to If you go to our if you go do syntax.fmforward/systemforward/colors,

to get to this end value. And you will know us by the trail of blood. I'm curious about this.

is the okay LCH, and say, all right, well, now the color was black and now it's going to be white.

Having as its variable API, you'll know that if I want to have what did we start with? We started with all of the color variables. You wanna talk about that? Yeah. And there's a lot of strategies for doing color variables. You know? Some people just say straight up do everything in hex, and I think that's a probably You know, not worrying about contrast because it's a border,

for whatever it is they want. And Often you have variables pointing to variables pointing to variables pointing to variables because, like, we have primary

naming them something a bit more abstract, like a primary danger success.

a lot of these pain points will be alleviated. First one, we talked about color contrast.

And then the last One is you can inline the SVG code and replace it with JS, which I put Before you know it, you start getting drift all throughout your application like a black kind of

so Yeah. Okay. This is gonna be my sick pick too because And then when you flip it, I want it to be black with 50% opacity,

so you could just have a

or rid. Come up with

SVG change color,

Rid. That's that's probably the best option.

So I ended up Taking the SVG because this was like just a one off.

with an SCSS mask.

to figure out what the actual value is.

And I was like, what? Like, what? Both of us were like, what do you need that for? But hey, and then like a day later, I was like, Oh, yeah, that's Why people are talking about that. I need to be able to say, the 2 good solutions. First, the Tailwind solution

so you would have to redeclare all the variables rid It would be if I had put this in place, if you are even thinking about doing dark mode, which every website should be thinking about,

Rid The, h

SVG of spice, you know, a little bit of a little bit of a little bit of a Being like, will this look a CSS variable

it works. Oh, beautiful. I didn't realize you've done that. I remember thinking about that. I was like, yeah, we just did the show on heading levels, How do we do that? We're not using Sass. Like that's that's one use case where Sass still kicking butt is if you need to generate a bunch

Never, ever. Last thing, help is on the way. These are things that will This is the Brad Frost Design Systems episode right here is so Scott laid out the whole website everything Everything. As she's figuring it out, As she goofs up, she lit the tunnel on fire. Oh, gosh. You know?

You can use a CSS mask

But with the downside of

and give them an ID.

being less than ideal.

I figured out the computed And when that's the case, those prefer color scheme some obtuse server side SVG generation thing.

Inherit

pretty hairy. Yeah. Hey. Rid It works. But it worked.

rid on the element via inline style to overwrite the CSS. So how's the other thing is, okay, well, let's use color mix Or relative color.

Unfortunately, a we have, what, 1, 2, 3, 4, 5. We have 6 colors, ten versions of each. So that's 60 variables of colors.

And then

It was in yellow. I just I just made it in yellow, but it needed to react to whatever

as like HTML code

You can inline them and use Phil, which is what Scott just said.

it, it makes your bundles large and You're putting your SVGs in your JavaScript code. Yeah, I know. It's a it's a bummer. You can straight up invert them with CSS. So if they're just Pure black and white. You're doing light and dark mode.

a straight face emoji beside this one because rid. It is the most wackadoodle CSS variables is that they can be overwritten Or tell me the trail that it took to get to this, Three videos.

I'm wondering if You could probably do that. But that's good. Place works. I know it's a launch. When rid.

in one spot

in CSS.

and it needed to be.

In the CSS, it was background image data.

You can

rid. You're putting your SVGs

all of the show notes in our all of our markdown files are, like, h twos. And, like, that doesn't fit our heading schema, but I'm not gonna change In a kind of condescending manner to say, well, what happens if you don't like those colors, Wes? Because you're completely abstracting the color from its usage. Its usage is like what it rid is, and, therefore, that could be anything. It could be purple. It could be red, whatever.

Getcomputedstyle

Your entire icon set has to be redownloaded where this does not translate well.

I I was like That's a hard one.

accent color because You can put prefers color scheme in the CSS of an SVG.

680, markdown files to make them all h threes. So I just did a find and replace on that string. Alright. It's now all the h twos in the show notes are now h threes.

I used JavaScript at the very least, you can take your variables or phone's actual system setting.

like, background solution was Color mix is now in all the browsers. So you're able to take little fussing.

So if you have an SVG file, You can put CSS in there.

to change the color of them, but I couldn't I couldn't math hard enough to match.

answer, and it's what I ended up doing. Wild. Yeah.

background red

into your bundle. And every time you change your bundle, you know, because Mhmm.

on the film with the actual style and, like, HTML elements get rendered so you can override 1st one being light, 2nd one being dark. I thought this one was a little funny that it's actually going through the standards process because, of colors because

A really good experience with the different themes, but there's gonna be, like, a level up tutorials theme and a century theme and stuff like that. So it's beyond just light and dark mode. Right?

hours.

A theme is just to do just light mode or just dark mode. Right? Her her name is engineer You don't have to know

Now.

That all is very difficult to do, and there's a lot of lessons learned. So over the course of this podcast, we're gonna be talking about

to give you some context, with the new the new syntax site, there is a rid Hidden themes menu. If you look through our code, you can find out how to trigger it. The reason why it's hidden is because there's there's still little Outstanding things here and there, and I don't want it to go live until everybody has, like, a,

the very bare bones easiest way you can implement Another thing that I I have really deeply thought about here that I don't think

You'll be able to have your own theme on the Syntex site. It'll be really, really cool. So I I'm excited to get that going. But believe it or not,

And this theme menu will even eventually

Light mode, dark mode, beyond in themes. And so I I think a good place to start is, like,

Can't mark that one as resolved just yet.

The next hardest Easy fix. Whatever

Your monitors are

half rid. It's like 1 half pixel, not like 1.5, but just like 0.5. It has a pretty, pretty nice little fine line you got there. I like that. It's so good. It's it's subtle. Two pixels, too much. One pixel, not enough, especially around the corners.

especially if you're getting into theming systems beyond light and dark light and dark, This matters much

for the most part, is white. Right? So that white area is going to be the sheet. It's the content area, and oftentimes, it could be, like, inverted.

the like, what it is. Right? It's a yellow or whatever. You get in the classic Now that component or as many of those Those variables as you want, it just snaps it into place. So, it's a really nice little little system.

No. Hold on. There was I think I removed it,

a line color, those types of things. And these things are really nice to have because

on the devices where it needs to, it will snap to the closest value.

version of, any theme CSS. Right? Because that's going to be, because Let's get into the, part of the show where we talk about sick picks, things that we pick that we think are sick, things that we really enjoy, like, love, any of that stuff. So I have a a sick pic, If you're not doing, like, a fixed solid saved lighter dark mode and you're just doing it based on the system color theme, Hey. That'll be solved that way too.

And what I found is No.

in your actual code base, a tunnel

you pretty much always wanna use primary I don't do that. So, you mentioned that we have a class on the body. Right? That's a great way to override a specific theme for, like, a dark mode theme because then at that level, you can update those variables. Right? But a key point here is is that when you're toggling that light mode, dark mode, some people put this class or this variable light dark into local storage.

accent, background, whatever. You almost always want to get into those type of variables

a half pixel is a very valid thing, and it never looked blurry or pixelated or anything like that word. Yeah. So after you get these, like, big type of things, then you get into However, there's some times where you want to manually override it. So I run macOS

And I was like, oh, this this value needs to be changed. But they were all hard coded on the buttons. And,

and I just I think I removed it at some point because I was like, well, I like Brad as a name. No. What's that? Because I looked. I'll I'll find it in the history because there was definitely one. Yeah. It's okay. Even another one I added was, like, border size,

Be able to support that. Yeah. But having it as a value is so nice. Hack pixels are great. Even, like, using with SVG, rid. Triggering

are high res enough to

You know, like it will

This is the accent. This is the Subtle accent. This is a warning success. I even have a zebra color,

pixelated

the concept of,

which drives a lot people crazy, but it is very okay to do half pixels.

1 and a half pixels is where you wanna be. And I did a whole bunch of tests we did switch the variables right, But it just doesn't look all that good. And I basically took the background URL out of that.

that has, like, a couple of issues. It not only has the inverse gray shadow, But it also is, like, overlapping on top of another div, so you get, like, that, like, div on div cut off with the shadow. It's like Oh, yeah. Has anybody looked at this? Did anybody even, like, take a glance at this? Like, come on. Reddit?

You know who's got the worst inverse shadow is Reddit. In Reddit's dark mode, they have, like, 1 pop up menu

Next one we talked about this as well, flash of unthemed content. If you set your theme in a cookie, load that, theme class On a DIV, on initial render, you won't have flash of unthemed content.

slightly less than black border. You'll see a lot of apps use this technique. To me, that looks Typically nice for separating the content without it being like a inverse shadow.

instead of a a drop of them. To me, like and I'm not talking like a white border. I'm talking about, like, like, a just CSS pro like Adam Argyle, a border around the content and

Yeah. For real. Right? Get get it together.

like a lighter But what if somebody wanted to overlap that? What do you think about rid. Variables that are named after what they color or what they style. Yeah. So I I wanna say that this is something that's really common, and I think that, like, this is a a fine system.

0 black,

background in dark mode, then you can still do it, like, a very dark shadow, and it's it'll be nice and subtle. You know what I like as a solution for,

microsetting those variables. Rid. If you're microsetting those variables individually on the component, sure. But when you get into the system of, like, a really deeply embedded system, that's a hard problem to solve. Next one. We talked about drop shadow doesn't look good when white.

like And then I set the background text being Yeah. Yeah. That's definitely a sick pick. Check it out, engineer. Everything on TikTok.

rid. You just don't have drop shadows in dark mode because there's no way. If you have like a On one of the pages, I had this little wave detail that was an SVG and for it to but I want it to be like

unless I think individual So, that way, you always have a font size for your needing.

Scott and I hit so many times

in the light mode, where you can pass it 2 values.

Atlanta this year, it was about, like, new CSS features coming to to the browser,

We we need the color contrast function where we could pass it experiment with it a little bit or at least know what you're working with. And Gave you actual opacity values. Right? Not just like a a lighter version of that color. Yeah. Actual opacity because I mixed with transparent is what I mixed with. Rid. Yeah. That's what you need. Yeah. Like the Mozilla docs say in sRGB,

So it was like black text, white background and then like yellow,

in this is we need color contrast.

like, feelings

but it is falling on this specific yellow. You pick which one. So,

it's simply just text,

black background, white text should not become black text on white background.

It doesn't look good because you've all of a sudden you have white text on top of the yellow and is very hard to read. Would probably also fail

buttons, Like sometimes we're like, okay, well, that doesn't necessarily So if you if you're using When the theme switched, Rid And there were there was many times where a lot of those situations are gonna go right out the window to get some of these new CSS. Yeah. That was that was the thing is we hit, Like a handful of little, oh, this doesn't look good in dark mode. This is hard to read in dark mode. A lot of it was simply just accessibility and readability issues And with CSS masks, you can reference SVGs on the page with its ID.

the yellow and then we would pass it 2 colors, in our case, white and black, and say you pick Which one would be more readable on top of this thing? These are both vetted colors, what if somebody wants to do a Windows 95 theme for the the website?

There was often black text that went on top of yellow will be able to swap at once and every single place in your application where that variable is used will in the body

when I did my my talk at render when you put your theme into dark mode, dark mode users expect certain things to be there. They expect

Another problem that we had, I've mentioned this once in this episode, is that inverted areas should not be inverted on dark mode. And, I mean, like, if you're in a light mode,

And that looked good.

But The downside to that is literally your

And then all of them

Okay. I guess it doesn't just Oh. Work With any input and any output, you kinda have to at in your house. Oh, yeah. This is so rid. Gary today. I just, like, feel, like, anxiety thinking about the Yeah. Yeah. And and and that's another thing, like, we mentioned. Right? When you get into light and dark mode themes, The goal should be flex flexibility customization. I've even linked to the level up CSS theme so you can see exactly how simple it could be. And the the trade off is always going to be

That and color contrast, man.

as an image,

So then I changed it to in okay lab because the color that we're using basing it off It was OKLab instead of sRGB, let me know what you think. If you have any, solutions for anything that we've talked about here, any thoughts, any really elegant theming platforms that you've seen Or usage for any of this stuff. I'd love to hear it. Oh, hold on. One more thing. One more thing. Sorry. I was I just said, well, why is it only light or dark?

And it says background that wasn't ideal because, like, we're not going to just, like, pre generate a bazillion in light, Give me hot pink and dark give me lime and a custom give me purple. So

is blue with I want maybe when you flip it,

rid.

It's not supported in all the browsers. Okay. Well, there's a there you can transpile it. Oh, no. They don't follow the variables

for each of those. So that's 1200 variables. If we were to generate

variables. And So Scott and I, Just flipping the colors. Right? the ventilation system. I don't I get a I get a sense of her being an absolute genius and having no idea And figuring it out, which is just it's like some

And that's really nice because

increments These are that mask several places throughout your application, you only need to load that SVG once color

50%

sRGB, It's all very cloudy, but, like, we've been it's funny because we've just been talking a lot about exactly this.

I'm not sure. I'm not sure if it was just an sRGB thing or whatever. I have no idea what that why that turned red. I'm I'm sure,

the values don't don't update themselves. So you couldn't couldn't really polyfill it either. You mean relative color? Because color mix was the solution. Color mix was the yeah, the end and shout out to actually Chris Coir because I tweeted And yellow 3 our recording, which is dark mode. Yes. And then,

was a really good on the page. And then you can reference the idea of the SVG, which is really cool.

need change color too. And SVGs are a problem when you load them up as an image. Believe it or not, with the class is, but also if it's a light or dark theme, I think that's probably something we'll end up doing just to simplify things. Alright. Let's talk Some of the issues that we ran into and how we overcame them.

oh, no, but that makes sense. Rid. SRGB is a hex value is RGB. Yeah. Right? Yeah. Right. It is. So that's why it's working. Oh, yeah. But yeah. Yeah. Oh, man. She's I I remember Somebody asked her how much money have you spent getting rid of the rock? Oh, yeah. And she said it's Like run a media query on every single item

Transparent Yeah. In however many percent you want. That's pretty much it. That was that that was the the solution, and it it worked really well, I think. You know, and it's fine. But I I it it was like, oh, yeah. Shoot. You kinda have to at least know what you're doing a little bit.

150%, rid Like, I'm I my own personal website doesn't have a dark mode, and I'm kind of like kicking myself for doing that because

And then and then you don't have to pre generate all these things. You're simply just using classes. That doesn't work if you're not using the Tailwind approach, you're using You're just selecting values.

would have the exact answer like that Especially because it's deep in the CSS colors. But, yeah, that that was I was like,

so So that when you change variable color,

least,

of that type of thing. But then they're not live. You know, they don't auto update. Then they're not live. So So I basically changed the lightness,

one. Tailwind does this a little differently in that you could do something. You could do a class like BG Blue, background blue, to be solved here beyond just, like, Hitting an invert button. I asked on Twitter, and I'm curious your answer to this as well, is how much of writing dark mode is simply Rid. Initially, a lot of the buttons just had like a 4 pixel or 3 pixel border on it.

rid. Maybe even maybe even 25% having a CSS file where if you want to, you can is really nice because you could throw are going to be set to foreground so that if if you want to switch it, rid. You just change the foreground variable and then the headings will do it. But

It came out pink.

overwrites the opacity variable, the I want this to have like a white border, at literally any level. So the fact that we set them on the route and you can go into

you know, a yellow a foreground color.

of of opacity on my website, on my my MDX website. You can specify how This is something that we did not use, and I'm curious what your thoughts are on naming specific items. So A text variable, a headings variable,

So you had to know that it was in okay lab.

What? And I was like, what? Oh, yeah. I remember that.

but the end You could even I even rid. Played with using hue rotate,

so that whatever's behind it shows through.

right?

rid. You know, the solution can always be just inline all of your SVGs. But if you do inline them, you can take advantage of The CSS goodness and pass down the variables, and it just works. But if you're loading an SVG At century.i0,

Yeah. So if somebody's theme specifies a hex, then we're We're in trouble. I'm not sure is is really what it comes down to.

And Rid. There's a new API in CSS that's not in all the browsers yet, and we couldn't polyfill it.

SVGs and that's being done by just passing an f g and a b g into that thing. And therefore, it just rid. Swaps the colors. Bingo. Bango. Even though it's the same component, it's not the same component, but it's inverted. But then when you swap it over to dark mode, it's still dark. Rid. And the way that you can pass those variables is you keep it always very general. You can always override those at any given step of the way, But you also don't have to learn a component's rid. 200,000 And somebody like Wes, he's an artisan. Right? He wants to he wants to take his little chisel, and he wants to Finally chisel in there, and I'm like,

So and that wasn't an option for us, black text on top of a yellow number. But when you flip it, rid. We had to put like a little,

and then you could do another one, which is like background opacity 50.

I there there was some funny things about it, though, Wes. There was the very first time I did the color mix Solution. In fact, I'm looking for the color right now. I did in The dark things to be dark, but they also expect

and I mixed The variable background, which is black, and I mixed it with transparent by 4%, and guess what the end result was.

Yeah. On the the state of CSS episode we did some one of the most requested features was the ability to do SVGs Is looks like it's being proposed in the CSS working group.

Be nice to have it. Yeah. I I said that On repeat while working on the system. Relative color, I need you. Color contrast, I need you. Oh, last 1 here. This one was really tough.

I want

opacity colors and And then I did a regex replace

rid using percentages.

Like global variables.

And then I'm able to use that yellow hue to develop a really

which is a new color space.

we were able to say, alright. I have a yellow hue, which is the h of LCH. Right? I have a yellow hue, because the level upside does it much more like how you're referring to,

set for your entire application or for your entire website.

is to use oklch, and color contrast had to be the one that I had the most, the background.

At a later point or on a component basis as you need them. But having them globally available is a nice baseline and are probably going to be the values that are used throughout most of your applications. So,

because, you know, I like to live a little dangerously,

And,

a good, My name is Scott.

And then they they can be overwritten yellow 160%, bunch even if we were, yellow show number.

Head on over to syntax.fm I I think it's just a different way of looking at the content. You're you're not defining things by, like, what they are in the UI, but you're defining them by how they're presented in the UI. And I think that's like a subtle difference, but, You know, honestly, either way could work. At the end of the day, like, no strategy is perfect, and I think you'll you'll struggle no matter what given the tools that we have today, rid

Peace.

split it

It would be nice to set, like, a high level variable that was specifically

yeah. 7 years, But I've never seen anything. Now they've surfed this

variables

dot everything,

of how deep you can go. You know? Like, you're just allowed to make 3 levels deep

Oh. Alright. That's it for today. Thanks, everybody, for tuning in. Catch you later.

and it's a TikTok That you can have both of those things at the end of the day given enough effort and forethought into the system.

for a full archive of all of our shows.

follows, which I would have thought you'd had more.

But rid. Every single solution and there there's some things that go along with that. Rid the system, like I said, created in a vacuum, it it it's hard to know What works and what doesn't work when you're dealing with a big old pallet of stuff. And then when you get to tweak things, you you figure out what works, and then you tweak the system.

and she's done, like, 12 dumpsters already of rock, which Just like there's no small feat alone in just on there, and they'll we'll kinda go from there. So big fan of the the whole zone thing that you came up with. Thank you. Yes.

People in London were building basements like 3 levels deep because real estate was so expensive. They built like these like 3 levels of basement.

Occasionally, it feels like it's overengineered.

rid. There may it's a function for light dark. Right? But, like, that does not scale to what we have, which is is themes.

moving the rock, let alone knowing how to build the that she built to get the rock out of the basement. And now now she's, like, now she's getting to the point where she's getting into some really interesting stones. So she's like, this stone will be perfect for my castle, But this dog's not very good. I'm just like, oh my gosh.

He always reminds me of, blah blah blah blah blah,

favorite ones to follow. I don't know if you've heard of her. She has

solve the same thing but better? 10 other versions of yellow in a gradient that I did by eye, And, likewise,

Oh, yeah. I could talk about this all all day long, and she's like building but like the variable yellow. No. Tell me what the computed value is

as well as making sure that that corresponds Rid. Does that make sense? Yeah. I yeah. Instead of having to put classes on the body of darker light, she posts look good when you switch that to a light

on in his backyard for it's not in the middle. It's both.

like a variable on the on the root that is dark or light. You know? Now that I've swapped variables, you could simply just invert the website.

$600 a dumpster, and

to bring it up. And like Relative color, you cannot come soon enough.

Rid. I should have read the rest of the blog post because it continues on that there is also a proposal for

like, And I there was, like, not like, I don't think I used any of the other yellows. Oh, yeah.

He's from Australia.

it's one of the most fascinating TikTok accounts. This is probably one of my my, So, basically, I was able to tweak those basically over the course of 10 variables to develop a yellow 1, yellow 2, yellow 3, So on and so forth, and I did these based off of what would be like a a staple color. These are the staple brand colors that we've already had. So

It's going to solve all the inverted palette issues, The latest show is like a black background

I love it. I watched another documentary about

All of the colors are accessible and and meeting all the guidelines for accessible colors. Yep. There's also, as we've mentioned, relative color, Which will allow you to basically take a color, you're

I mean, she's gotten deep into this hole. She she's got some cool Sticking a massive tunnel. It is Which is And then that way, right, like you said, maintain consistency. That's the main goal. So beyond colors, we're having typography set. So, you know, body font family, heading font family, that always works for me. I have a handful of font sizes, What those values are. Yeah. Yeah. That that's actually what I was I was going to,

So I should I've never that's the weird thing about rid TikTok is you find these people You can invert them with CSS.

I

and that will that would reduce probably a 100 lines of CSS from our our theme system and probably reduce complexity greatly. Rid. So relative color. I'm, 2024.

It is

amazing thing.

for years, and it's so nicely done.

friend of the show, Simon. Colin Fertz.

Oh. Underneath her house. Yes.

Pretty much themes. It's you would set the themes on colors

A tunnel under her house. And there's another guy on on YouTube. What's his name?

prefer a dark color scheme. If it's if it's dark mode, then set this variable to that. So rid. I can see that being handy, especially for a couple of our little overrides. Totally. You know? And also, like, we were saying, if you start to define a specific theme as being a dark Or a light theme, then, hey, this comes into play perfectly fine. It's true. Actually, you know, one other thing is that wouldn't it be nice to be able to use that prefers dark color scheme? Read. Media query, but in some cases, specifically, if you go to the show's page, so syntax. Fm/shows.

of whatever its components are into whatever you'd like, Even if you have a hex. RGB

exactly what we were just talking about What do I what do I rotate to get to this really nice to be able to do it like on the Syntax website.

explicitly

into account, and Then to get a little bit harder, You got system plus giving the user's choice where you have light, dark plus system.

And it's it's rid Fascinating. Fantastic.

absurd. The entire Project is absurd. There's no way else to describe it.

it's wild that no one ever thought to say the system

He's been digging a tunnel Apparently, they put a they put an end to that, but

is an elegant solution for a problem that exists. And if you start to dive into this world of of deep theming and stuff like that, you will hit all of these same issues. Ready. So I encourage you to to check all this stuff out. It's so much fun. It is a lot of like, this this is the stuff that I love. This is my favorite stuff. So, When you're working less. Okay? But if you're getting into theming systems, highlighter line behind some of the text So that if it ever does overlap that big yellow number, then it's still very readable. Yeah. Man, that's a hard problem. And and you know what the bummer is? Well, it's a not a bummer. Safari is once again leading the way here. Safari is the only browser that's even kind of implemented color contrast yet. It's behind a flag. It is not in Chrome or Firefox at all yet in any manner. And so, like, color contrast has just gotta be one of those functions that

And then Now we have to go write a selector for that thing and override it, whereas No, not much of a YouTube channel.

But I I guess also, like, wouldn't color contrast

Peace.

even as a hex and then manipulate those individually with rid or just replace them straight up, So that's how I did it. And at the end of the day, you end up having a just a straight up Yellow, a straight up teal, a straight up green, all that stuff. And I did it for the main colors. We have yellow, teal, green,

Apparently she has a YouTube channel as well.

Posted a blog post the other day where there is a light dash dark helper method Mhmm. On any browser or any device? like. Oh, what is yellow 3? You hover over top of it. It's like it's yellow, use document.

Are you just allowed to make tunnels? I would never

Ever consider building a tunnel? I would be terrified that the whole thing would collapse on me, or I would light myself on fire, or any number of things.

on the root with a color scheme property. So dark, light, Accessibility.

Maybe? I don't know. May well

set

With Color contrast. You need to you need to give it 3 values, which is what what is what is it going to fall on? are really tricky.

rid. Make a rule There is what, the yellow and just mix it with type of thing where like, what happens when you need it? And the answer to that is you you adjust the system, And, like, I just keep thinking, like, is this just allowed? custom.

And like the background? You're right. So but it's it's basically just a shorthand syntax to and then mask that property

Rid.

And then and then there will be a schemed value There's no chance that switching some variables is gonna

He

Right? You could look at the system and say, gosh. Darn. That sounds overengineered.

of if it's dark or light. Yeah. Well, that's how it is. Well, this is The CSS theming site yeah. Theming episode. You know what? This is a a topic that I'm like So I don't know. There there's trade offs, and I I'm probably missing something there. But I I don't wanna say I don't wanna act like one approach is better than the other because I think they're just different. So that is Global variables. The next one is Don't even give your users the the option to choose. Right? This is a dark site or Or it's a light site. This is how we've been building sites forever.

Yeah. And you think they're just TikTokers. And then you realize, oh, no, this person's had a YouTube channel for color you're on. So here's the list of ways that You can make an added a little bit Oh, yeah. My notes. Right? Wes at the beach or Wes normal? It's flickering back and forth on it. And These are the lifeblood of ready. A theme light and dark mode makes things so much easier because you are able to, You could default to like Another issue we hit was opacity values

favorite favorite ones

She she's pulling, and she keeps the people will be like, why are you doing this? She's like, I would like to build a castle, So I need some rock for my castle. I feel like that does not answer any questions here. That makes it more confusing.

variables. I could split it out into OKLCH this is the primary.

Her TikTok account is that she is building

And Unreal.

single, Like, straight up usage for variables, right, where beyond getting into

A a zone the to give you guys some ideas, the way that we have this zone system is that every

time you want to create what's called a zone. A zone is just a class of zone, and all it does is set the f g and b g values for that zone.

So if I wanna say, alright. Now this zone is going to have a color. You give a class of zone. You set those 2 variables.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Ready. Here is Scott Talinski and Wes Bos.

Hey, folks. Welcome to Syntax. We've got a killer show for you today on how to implement dark mode in your rid. And let's go as far to say how to implement dark mode and beyond.

just because of the nature of things. So, yeah, those are things you could go back and forth on. And, ultimately, I I have done it that way in in many different times.

thing that we we've chosen to do and, like, looking at it that way rid Yeah. I think was a new approach for me, and it it came. And I I think I really prefer this way, is

We have

Rid. It gives you a bit more of an escape hatch in case you do want to override it, like on a specific theme.

work in this situation.

The subheading is like a a a lighter gray, and then the buttons are all the same lighter gray. And then the background of the card is a like a near black. Right? And you could look at that card, and you could say there's a heading, there's a subheading, and then there's a background. Or you could look at this card and say, we have

And, who knows? That's sick. Like that. Like it, love it, wants some more of it.

rid Like, when you make those swaps at a global level or even a local level,

rid Large swaths of things instead of micro swaths of things, and I get it that, like, there's that

as your your your example.

headings And that was as simple as

one version of the foreground and another version of the foreground.

API. You end up having patterns where you have Different versions of foregrounds, different versions of backgrounds. You know, if you set them, the whole thing will you you will whatever. And you can set them at a component based level, have that component rid React to it. And as far as on the the latest shows, right, like you mentioned, the highlighted latest show

rid. You can't just do a a straight inverse, which is what people wanna do. Right? They wanna say everything that's dark now becomes light. Everything's light now becomes dark. But you can't do that because in dark mode, If if you had an inverted section that had a black background, if you now make that section with a white background, people who use dark mode are gonna be Saying, well, what's with this? This is not dark mode. Right? They want everything black, and that can get messy with circular definitions.

one of your components and

as the normal latest show. But on the light mode, it's inverted,

Right? Having Yeah. Like, named after what they do. I felt like I was doing a lot more overrides that way.

you can control

variable that then point to your foreground, background, whatever variables.

And then the rest of them are white or vice versa if you're on dark mode.

I like to do it this way because then you don't have to memorize an individual component's, rid like Sentry to find all of your bugs, errors, and exceptions. In fact, just moments before hitting record on this podcast, Rid That's a relatively hard problem to solve

we could just say, all right, well, In the level up theme,

it should have a light and and dark theme,

At the bare minimum,

a original

in 2023 this.

But in light themes, you can get a little bit more. Some some zones are dark. Some zones are light. Whatever. There's, like, kind of just like, light theme is almost always light is allowed. In dark mode is It must be dark. The blinds are shut. Right?

everything to be dark.

19 nineties mighty ducks theme and a wave race 64 theme and a rad theme that was, like, rid. Nineties rad colors. Just like it it makes the web experience a lot of fun. It can add whimsy to your site, but even just straight up light and dark mode. I think I've implemented yet, but probably will.

and beyond, you know, people expect that. And if I open up an app

But I had, like, You know, I think you can get a long ways with that. When you start to get into really tight overrides on things,

There was often

But if you really wanted to get into the weeds, man, you could write a 100 line CSS file with importance and, preference

What anybody could do with the theming system, granted it might open up some giant, like,

you add another class. Now you're doing 4 overrides, and these things get they just stack up. So you straight up cannot

You said, all right, we're going to switch variables, I said. And I thought immediately,

ease of use rid.

of what they are. Like, the level of tutorials theme is very clearly a dark theme, and the century theme is very clearly a light theme. And I think I would solve a lot of problems if I were to say An additional class onto those based on what the theme is. So defining some way that you could have in that cookie as And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Or Windows Vista theme. I would love to see

The the amount of work that you'll have to do to write those overrides becomes,

You get into this world where you completely abstract everything. You abstract from the colors themselves. Right? Like we talked about. It becomes Primary accent BG whatever.

1st individual overrides.

when moving from light to dark, when you set background blue, there's a default variable of opacity that's set to 1.

So those are those are, like, the big trade offs here. It's you end up, like, You end up losing some of that control that you you might want to have.

any of these SaaS apps that we use. And it's like, what's your yellow? And then it tries to, like, calculate. Like, we give it syntax yellow, and it tries to, like, make a design basis off of our yellow and always looks like And on most devices that are high res enough,

like select apps, you know? So

One of the biggest ones was 10,

control over that type of thing, but you give people too much control. Rid All of a sudden, like you said, it's it's not flexible enough anymore, and it's it's too hard. And you end up with these weird edge cases where,

a new theme, it could be 10 lines of CSS or less. It could be less than that. It could be more than that. You could do a whole ton of overrides if you wanted to. But at the end of the day, what you're not doing is I'm not going into a component in hard coding

make it look like Windows 95. You're gonna have to write a couple,

Yeah. Yeah, it's always

Oh, that doesn't look good in that situation. I why can't I read that text on top of the background? I think the good thing about our theme system here is that If you wanted to, you could swap a couple of variables, and bingo bango. You got, you know, a new color version of the same website.

We didn't think about that. But I do think it it there there's a lot of cool opportunities here.

Somebody, please make us or somebody make a Windows XP. You know? Windows 95, we get it.

Unattainable for when you get past beyond

So when you're moving into light and dark to theme systems,

And it's a tough it's a tough give and play, but I think the Syntax site will prove to people, And I think this is, like, really evident in our system because the level up Theme itself, the entire theme, which by all accounts changes quite a bit, you know that if you're getting the theme systems. You just can't do it because And it's really easy

garbage. And like we need in that case, you need a little bit more

I I don't know what I am. I'm I'm like, I'll build the the structure and let somebody else worry about the the last Little bits of it making it look nice.

individual component over and have it have it look like, You know, completely different website,

oh, shoot.

it's such a trade off. Like, I think about in the light mode.

themes should be classified as a light or a dark theme regardless

with themes. It's always

to the point where nobody can add their own themes or the themes become So, like, you know, separates your content or you had used a a little box shadow. What I end up doing is, like, a thin like, super thin 1 pixel or less,

gotchas, a bunch of things you need to think about,

Rid so let's get on into it. You wanna start off there, Scott? Yeah. But before we do, we should talk about how this podcast is presented by Sentry

with when thinking about implementing dark mode. And we thought like, let's go through

a whole bunch of like gotchas and issues that could pop up.

I was just peeping at our century and, seeing what we still got outstanding and what I can mark as resolved, and it feels very good rid To be able to to know visibility wise what's happening on your site at all times. So shout out to Sentry. One of the things I'm working on right now is

how to implement light and dark mode, entire JavaScript bundle. If you're using React or Svelte or whatever, So in many cases, when I was designing, I said, okay, purple that we're trying to get to? There's probably a mathematician out there that could figure that out, but I was not able to do it.

we're talking and dealing with this quite a bit in the last

as well as So it's a good idea to start off with a bunch of so I just did a quick little find and replace, and it was so nice because then I can rid. You can play with the oh, does 1 pixel look good? Is I ended up with 1 and a half pixels for the button border, how, like, London that is used inside of it. So

if you are doing anything on the web, you're gonna need to make sure that you have a tool

hidden themes on there as well. So There are a bunch of following the trail of

And we'll talk about naming the variables next, but you just switch the variables and everything should move on over component level variables. So the beauty of

I run a lot of my apps in light mode, but there are several apps I like in dark mode, so it's nice to be able to override it.

dark or light. So if you use Windows or a Mac Or an iOS application in dark or light mode,

that meeting query will pick up your computer's

in light mode but with maybe the same layout. When we first started talking about this, that was our conversation.

so that will every 5 minutes. So Scott is like, this error has happened

Yeah. Theoretically, right, a shadow is a a shadow being cast by light. Rid. If your dark mode app is just inverting the shadow to be like a gray shadow, fail. Yeah. Big fat fail. Let me stamp that. Yeah. Alright. Let's talk about writing the CSS.

Drop shadow. Right? And you see that a lot on on websites.

and

rid Context, and I wanna have a really dark yellow that almost gets kind of brown. Yellow is not a great color for this. Purple or something works better.

and I believe it's chroma values. Rid That's the c.

a preset With that opacity value. But the 2nd class of opacity Update itself and re render itself.

The reason why you do it this way is that now I know that if if I'm on a yellow

red, rid good, like, baseline approach. Right? You take everything as a hex value, and then every single color you have is a hex, and that works Very fine. What we chose to do, of, I really wish I had this today. This is the one thing that I feel like would solve so many of my woes with color themes.

black, white, purple, is the same component

You know, you can use a yellow 8 and it's really super dark or yellow one and it's almost white. Right? So you know that you can develop this whole color palette based off of One single hue value, really, and just tweaking other values.

and that's it. Right? Those are the colors that we're using. It's gonna be our brand colors. And for the most part, they all work together in a nice system, and you can play around with them. So you basically yeah. You define your colors as colors first. That's your palette. Right? Yeah. And it's nice having shadow color, shadow strength, those types of things. The good thing about having, like, a a shadow is a variable, like you mentioned, Wes, is that if you do get into another theming rid

with specific, like, turn into, like, a theme developer where you'll be able to quickly and easily add a theme and then commit it directly to our repo. And just by committing a a single CSS file with, like, 5 properties or so,

our hyphen hyphen yellow is our yellow three, and yellow three is OKLCH

rid. Lightness and chroma values with the yellow hue.

So okay. So light and dark. When you have a light and dark theme, you have 2 different themes. Right?

to do overrides for light and Dark mode. In fact, you see this all the time even with, like, tailwind classes. You'll say, oh, in in dark mode, I now have this dark class that handles this text. Right?

optimized to say light and dark. Alright. That's it. I'm swapping this value here. I'm changing this value here. It's less of a big deal.

rid. Can be micro rid Wild.

And for the most part, if you're doing a light and dark mode, you don't need to worry about so many of these things that we've been talking about because a light and dark mode do that manner of writing CSS

But then you add a 3rd theme. Right? You add a 3rd theme that is completely different. Right?

Or

Now the classic Sick example of throwing an important on something in CSS.

and that gives you the access to use the

completely customizable themes. So so, we chose to obviously do the hardest one because that's what we're about here, but it's honestly also the most fun. And this is something that I I personally

and also having, sending my system to be dependent on, like, the time of day. So in the evening, it goes dark mode, But there are apps I do that. Like Notion that I never want to be light mode. Like, I'd never want Notion to be light mode. Really?

probably the hardest version of any of this is to do system plus light and dark

is going to be using system colors. So using the media query prefers rid Color scheme, and you can do prefers color scheme dark or light,

rid Really, really enjoy building these types of systems. So, I learned a lot over the course of building the site's theming system. Rid. Yeah. Yeah. So shout out to Scott for putting this all together. It was a really good base, embedded rid into the system itself in such an in tight way. Like I was saying with our system, There's, like, a couple of times when I found myself where there was, like, a light gray background on white every single time You define any sort of override. You're defining 3 overrides.

Hey. If they prefer dark, you can swap these variables out. If they prefer light, swap these variables out.

Users a system

for color schemes. Then you don't have to build a toggle. You don't have to worry about some of the things that we're gonna have to worry about. You just, Yeah. In in reality,

Then you kinda have to worry about, alright. If the user selects light, I have to do these overrides. It's not just the single media query. You gotta get into classes to control things. And then the hardest

where it'll be light mode or the default mode. It'll flash bright, and then that class will get applied. So the way to get around that is to store it in a cookie, Have that cookie being loaded into the class during that server render.

That way, that on that initial HTML transfer, you are getting that theme variable. Otherwise, you're gonna make people angry. Let's talk about CSS variables.

You can simply just have a variable Most terrifying thing in the world. She she built like a little mining cart, rid I feel like going a little one step further of having, like, a headings and a text and a border What I like so much about her is that

local storage is not available.

that by every single visitor. It makes your bundle sizes bigger than it probably should need to be. So it's kind of sucks.

Rid. It then loads that class name. So what you get is what's called flash of unstyled

or unthemed content

instead of having to other elements, although I did

is only Assign it to me at rid One note too on the on the themes that we mentioned here. I think,

Fussy little edge case y stuff to make it look good. What would you say that percentage is? I would say

that's it. Just swapping out a few variables.

that a well designed system

8 lines of CSS variables being swapped With no class overrides,

swapping variables a 189 times in the last for

for different colors and how much of it is

And to me,

What percentage of it is changing variables and what percentage of it is Override them for that specific component, which is weeks because the Syntax site has a dark mode

So there's definitely some, like, really interesting problems

tweaking to say, I like I took the SVG, I converted it to a data URL, you can load

to be able to

You should probably put these steps in place on day 1 even if you're not rolling out dark mode on day 1. Yeah. Because it is hard to add in later. The level up tutorial site for me, Wes, was a good,

level one of this because we had a fully themed site. It had light and dark mode. It didn't have preferred system, which was a huge bummer because that feels like an accessibility thing and a thing you should have.

You can always just check out our source for that. We have excess all the way through XXXL.

or whatever. Hey. You can just set that shadow variable to shadow variable to none, and it's just gonna turn it off, right, Instead of having to tweak it or change the color or something like that. Yeah. Select every single one and take the shadow off. Yeah. Right. My favorite variable, and this is one I added, was Brad. Yeah. Even though there already was a border radius, there was already a border radius variable. Was there? Chose to ignore it, and that's fine.

he he, just added his his own color. He's added his own colors.

of there's not a consistent amount of darker, right. Whereas with this type of thing, you can say, all right, well,

especially once we get into the relative color syntax,

And then if you don't like yellow 4, yellow 5, then you could just tweak

any of these colors, actually. I just use yellow, teal, green, whatever, purple. In a lot of cases, like, It just didn't look good, you know? So I just I just put in what I thought looked good. And and I was like, Like I did just like a summary. Here's how to do, Colon SVG like a number going behind it. But when you flip it,

into a real world and practical situation,

that use Clamp so that way you don't ever have to adjust them with media queries. It's fantastic.

Wes had situations where he was not liking some of the colors, And,

to have those values that you want in there. Right? Yeah. Yeah. Totally. Because, you know, the system is created in a vacuum. And as you move

in components and cards and whatnot. And then I went through it and

ask you a question

design to it. Yeah. A little seasoning.

rid. Oh, yellow. I need like a little bit darker for like a border. You know, yellow darker 20%, you know? And then like, of course, we have a yellow variable, And then the red will Only show through where the SVG is, so that's a pretty good option, especially because

it's tempting to say, SVGs

failed me.

I don't think I used any of the other opacity So

It's yellow 4, yellow 5.

and it's that's the, like,

Specifically, I'm on camera a lot. I have Notion open a lot. I put a lot of notes in Notion. If this is in light mode, I wear glasses. All you see is bright white on my glasses, so it's actually a strategy to reduce the glare on my glasses. So Dark mode for anything that I have to have open when I'm recording This is going to cause problems if you're doing any sort of server side rendering because when you initially load the site, there's words cannot describe this thing. I love every single one of her updates, and she is such a joy of a person. People will be like, gnarly, gnarly, gnarly. It's not any hairier than, when I loaded the show notes.

if somebody's watching, especially if you have a guest on, they can tell rid. You're flipping around. They can tell I'm watching Netflix if we have a guest on. Yeah.

is a must for me. Otherwise, it's a, So if you're out there and you do recording and you have glasses and you don't wanna look like that white glasses, dark mode. Or here's another pro tip. Rid. Put your your computer into, like, that sunset mode where it does everything red tinted. You'll get less reflections there too. That's that's a good tip. Like, even even right now, let's let's Watch my face. I'm gonna toggle between,

media queries

often have to add like a class of dark or themedash dark

You do you do talk mode? Wow. I'll tell you exactly why.

And then some of the other like an another example of the classic one is like a drop shadow.

But at the end of the day, it it kind of creates other problems down the line. So I think

Variable swapping, 5%,

can do a lot with just swapping out a few variables rather than tight overrides. Would you say, like, 95% where you're always thinking of, the same way we have our yellow one, yellow 2, whatever system, you get into f g one, f g two.

personally should have as little tweaking as possible.

Sure. Throwing an important can solve your problem.

That a well designed system

A black drop shadow or like a dark drop shadow Like a paragraph pack. Probably do that. Yeah. Any component.

does not it will not inherit any variables, Gotta have it. Also from former guest of the show, Baranis.

make your site look a little un unfinished if you wanted to get into more subtleties, You start to really lock down the system more and more and more, and it's it's almost like That's a, that is one thing that will Also be solved by using Prefer's color scheme.

rid. Unpro.

At the end of the day, One thing that I do is I set, Like, kind of root variables that don't get override. So at a local level, you do have everything has, like, FGBG like we've just been talking about, But then you also have access to the very most root ones as well if you ever need to access whatever that root one is to do inverted rid. Otherwise, there could be, like, circular definitions.