How To Dark Mode and Beyond

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.

So Scott and I, we're talking and dealing with this quite a bit in the last weeks because the Syntax site has a dark mode and hidden themes on there as well. So There are a bunch of gotchas, a bunch of things you need to think about, with when thinking about implementing dark mode. And we thought like, let's go through how to implement light and dark mode, as well as a whole bunch of like gotchas and issues that could pop up.

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 At century.i0, if you are doing anything on the web, you're gonna need to make sure that you have a tool rid like Sentry to find all of your bugs, errors, and exceptions. In fact, just moments before hitting record on this podcast, 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

rid. Triggering every 5 minutes. So Scott is like, this error has happened a 189 times in the last for

hours.

Can't mark that one as resolved just yet.

Now.

Assign it to me at rid One note too on the on the themes that we mentioned here. I think, 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, a really 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? And this theme menu will even eventually 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, 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, 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 Light mode, dark mode, beyond in themes. And so I I think a good place to start is, like, the very bare bones easiest way you can implement A theme is just to do just light mode or just dark mode. Right? 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.

The next hardest 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, and that gives you the access to use the Users a system preference 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, Hey. If they prefer dark, you can swap these variables out. If they prefer light, swap these variables out.

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

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 probably the hardest version of any of this is to do system plus light and dark and also having, 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 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,

to be able to 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 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, 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,

like, 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.

But I had, like, You know, a original 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 in 2023 and beyond, you know, people expect that. And if I open up an app At the bare minimum, it should have a light and and dark theme, and there there's some things that go along with that. Rid when you put your theme into dark mode, dark mode users expect certain things to be there. They expect The dark things to be dark, but they also expect everything to be dark.

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? So there's definitely some, like, really interesting problems

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 swapping variables for different colors and how much of it is tweaking to say, I like Now that I've swapped variables, you could simply just invert the website.

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

that a well designed system should have as little tweaking as possible.

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, is only 8 lines of CSS variables being swapped With no class overrides, that's it. Just swapping out a few variables.

And to me, I think you can get a long ways with that. When you start to get into really tight overrides on things, You start to really lock down the system more and more and more, and it's it's almost like the classic Sick example of throwing an important on something in CSS.

Sure. Throwing an important can solve your problem.

But at the end of the day, it it kind of creates other problems down the line. So I think personally That a well designed system can do a lot with just swapping out a few variables rather than tight overrides. Would you say, like, 95%

Variable swapping, 5%, little fussing.

Yeah. In in reality, who knows? 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,

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 where this does not translate well.

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

A black drop shadow or like a dark drop shadow does not look good when you switch that to a light Drop shadow. Right? And you see that a lot on on websites.

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.

So in CSS, there are media queries, prefer color scheme, dark and light. And you can, at the very least, you can take your variables And we'll talk about naming the variables next, but you just switch the variables and everything should move on over so that will depend itself based on the user's system, 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 or phone's actual system setting.

However, there's some times where you want to manually override it. So I run macOS in light mode and 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.

And when that's the case, those prefer color scheme media queries don't kick in. So you also have to often have to add like a class of dark or themedash dark to the body so that you can target

the override as well. Rid Yeah. And, yeah, I've I'm the same way. You know? I I have since moved to 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? You do you do talk mode? Wow. I'll tell you exactly why.

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 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,

our recording, which is dark mode. Yes. And Oh, yeah. My notes. Right? Wes at the beach or Wes normal? It's flickering back and forth on it. And 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.

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.

This is going to cause problems if you're doing any sort of server side rendering because when you initially load the site, local storage is not available.

Rid. It then loads that class name. So what you get is what's called flash of unstyled or unthemed content 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.

These are the lifeblood of ready. A theme light and dark mode makes things so much easier because you are able to, instead of having to Like run a media query on every single item and say, all right, well, now the color was black and now it's going to be white.

You can simply just have a variable that will be able to swap at once and every single place in your application where that variable is used will Update itself and re render itself.

So it's a good idea to start off with a bunch of Like global variables.

These are set for your entire application or for your entire website.

And then they they can be overwritten 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,

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 a good, 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, because, you know, I like to live a little dangerously, is to use oklch, which is a new color space.

And, we were able to say, alright. I have a yellow hue, which is the h of LCH. Right? I have a yellow hue, And then I'm able to use that yellow hue to develop 10 other versions of yellow in a gradient that I did by eye, rid using percentages.

So I basically changed the lightness, and I believe it's chroma values. Rid That's the c.

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 our hyphen hyphen yellow is our yellow three, and yellow three is OKLCH with specific, rid. Lightness and chroma values with the yellow hue.

The reason why you do it this way is that now I know that if if I'm on a yellow 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.

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.

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, red, black, white, purple, 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

a preset bunch of colors because then, especially once we get into the relative color syntax, it's tempting to say, rid. Oh, yellow. I need like a little bit darker for like a border. You know, yellow darker 20%, you know? And then Before you know it, you start getting drift all throughout your application of there's not a consistent amount of darker, right. Whereas with this type of thing, you can say, all right, well, It's yellow 4, yellow 5.

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

What those values are. Yeah. Yeah. That that's actually what I was I was going to, ask you a question In a kind of condescending manner to say, well, what happens if you don't like those colors, Wes? Because Wes had situations where he was not liking some of the colors, And, he he, just added his his own color. He's added his own colors.

This is the Brad Frost Design Systems episode right here is so Scott laid out the whole website in components and cards and whatnot. And then I went through it and added a little bit of spice, you know, a little bit of a little bit of a little bit of a design to it. Yeah. A little seasoning.

Rid And there were there was many times where the system failed me.

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

I don't think I used any of the other 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 it's that's the, like, rid. The designer versus the system type of thing where like, what happens when you need it? And the answer to that is you you adjust the system,

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 into a real world and practical situation, 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, 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 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, that use Clamp so that way you don't ever have to adjust them with media queries. It's fantastic.

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

So, that way, you always have a font size for your needing.

Shadows, base font, 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 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.

No. Hold on. There was I think I removed it, 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,

you know, because Mhmm.

Rid. Initially, a lot of the buttons just had like a 4 pixel or 3 pixel border on it.

And I was like, oh, this this value needs to be changed. But they were all hard coded on the buttons. And, 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, which drives a lot people crazy, but it is very okay to do half pixels.

Your monitors are are high res enough to Be able to support that. Yeah. But having it as a value is so nice. Hack pixels are great. Even, like, using

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.

1 and a half pixels is where you wanna be. And I did a whole bunch of tests Being like, will this look pixelated Mhmm. On any browser or any device? And what I found is No.

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

And on most devices that are high res enough, 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

the concept of, Like, straight up usage for variables, right, where beyond getting into the like, what it is. Right? It's a yellow or whatever. You get in the classic version of, this is the primary.

This is the accent. This is the Subtle accent. This is a warning success. I even have a zebra color, a line color, those types of things. And these things are really nice to have because When you're working in your actual code base, for the most part, especially if you're getting into theming systems beyond light and dark light and dark, This matters much less. Okay? But if you're getting into theming systems, you pretty much always wanna use primary accent, background, whatever. You almost always want to get into those type of variables 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.

So, like, getting out of that world of of using a color for something, rid It is a tough habit, 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

to like, of course, we have a yellow variable, but that yellow. It might be yellow on the syntax website, but when you flip it to a different theme, then you're reassigning yellow to be like a purplish color for the level up theme. It doesn't make sense. So naming them something a bit more abstract, like a primary danger success.

Those are it's much nicer because they can be redefined 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 that points to yellow,

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

And yellow 3 is the okay LCH, 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 following the trail of variable definitions, because when you Hover over them, sometimes it just says like. Oh, what is yellow 3? You hover over top of it. It's like it's yellow, but like the variable yellow. No. Tell me what the computed value is Or tell me the trail that it took to get to this,

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

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, a background variable.

I could see if you had like a SaaS application, You could default to like text being a foreground color.

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.

But I went with a more flexible approach where you're always thinking of, in any context, always thinking of background, foreground, or even, like, if you wanted to get into more subtleties, the same way we have our yellow one, yellow 2, whatever system, you get into f g one, f g two.

And, likewise, background, 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 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 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.

So for for me, that's where I've I've landed. You think about these things as in any context, You're always having a background and a foreground.

And instead of getting micro with that variable naming, If you keep it always background and foreground, 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 API.

You don't have to know what a component is Having as its variable API, you'll know that if I want to have 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 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

headings 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 I feel like going a little one step further of having, like, a headings and a text and a border color variable that then point to your foreground, background, whatever variables.

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

Like sometimes we're like, okay, well, that doesn't necessarily work in this situation.

Now we have to go write a selector for that thing and override it, whereas we could just say, all right, well, In the level up theme,

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.

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 the background.

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

And, rid Like, when you make those swaps at a global level or even a local level, you know that you can control rid Large swaths of things instead of micro swaths of things, and I get it that, like, there's that 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 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.

And this FGBG 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, because the level upside does it much more like how you're referring to, as your your your example.

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

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

component level variables. So the beauty of CSS variables is that they can be overwritten at literally any level. So the fact that we set them on the route and you can go into one of your components and Override them for that specific component, which is really nice to be able to do it like on the Syntax website.

The latest show is like a black background And then the rest of them are white or vice versa if you're on dark mode.

And that was as simple as Just flipping the colors. Right?

Yeah. Yeah. And and and that's another thing, like, we mentioned. Right? When you get into light and dark mode themes, 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 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.

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 like to do it this way because then you don't have to memorize an individual component's, 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 is the same component as the normal latest show. But on the light mode, it's inverted, 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

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 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.

A a zone the to give you guys some ideas, the way that we have this zone system is that every single, 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.

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.

So okay. So light and dark. When you have a light and dark theme, you have 2 different themes. Right? And it's really easy 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? 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 rid. Can be micro 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.

But then you add a 3rd theme. Right? You add a 3rd theme that is completely different. Right? Now every single time You define any sort of override. You're defining 3 overrides.

Or you add another class. Now you're doing 4 overrides, and these things get they just stack up. So you straight up cannot do that manner of writing CSS if you're getting the theme systems. You just can't do it because The the amount of work that you'll have to do to write those overrides becomes, to the point where nobody can add their own themes or the themes become embedded rid into the system itself in such an in tight way. Like I was saying with our system, 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 any theme CSS. Right? Because that's going to be, Unattainable for when you get past beyond the light and dark.

So when you're moving into light and dark to theme systems, 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.

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 ease of use rid.

1st individual overrides.

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, 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.

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.

And it's a tough it's a tough give and play, but I think the Syntax site will prove to people, That you can have both of those things at the end of the day given enough effort and forethought into the system.

Yeah. Yeah, it's always with themes. It's always it's such a trade off. Like, I think about 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 garbage. And like we need in that case, you need a little bit more 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,

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.

But if you really wanted to get into the weeds, man, you could write a 100 line CSS file with importance and, individual component over and have it have it look like, You know, completely different website,

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

You said, all right, we're going to switch variables, I said. And I thought immediately, what if somebody wants to do a Windows 95 theme for the the website? There's no chance that switching some variables is gonna make it look like Windows 95. You're gonna have to write a couple, like select apps, you know? So having a CSS file where if you want to, you can is really nice because you could throw Somebody, please make us or somebody make a Windows XP. You know? Windows 95, we get it.

Or Windows Vista theme. I would love to see What anybody could do with the theming system, granted it might open up some giant, like, oh, shoot.

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

Another thing that I I have really deeply thought about here that I don't think I've implemented yet, but probably will.

I think individual themes should be classified as a light or a dark theme regardless 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 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.

One of the biggest ones was when moving from light to dark, There was often in the light mode.

There was often black text that went on top of yellow buttons, yellow show number.

And that looked good.

But when you flip it, So it was like black text, white background and then like yellow, like a number going behind it. But when you flip it, 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 Accessibility.

In that case, it's not as simple as just switching variables because we did switch the variables right, But it just doesn't look all that good. And Scott and I hit so many times in this is we need color contrast.

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

We we need the color contrast function where we could pass it 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, but it is falling on this specific yellow. You pick which one. So, in some cases, specifically, if you go to the show's page, so syntax. Fm/shows.

There is in the light mode, it's simply just text, black text on top of a yellow number. But when you flip it, rid. We had to put like a little, like a black kind of

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 when I did my my talk at render Atlanta this year, it was about, like, new CSS features coming to to the browser, and color contrast had to be the one that I had the most, like, feelings 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.

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, black background, white text should not become black text on white background.

Rid That's a relatively hard problem to solve unless you're 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.

In many cases, if you're going straight up black black like like 0 black, rid. You just don't have drop shadows in dark mode because there's no way. If you have like a like a lighter 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,

this.

There's, like, a couple of times when I found myself where there was, like, a light gray background on white 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, You know, not worrying about contrast because it's a border, a border around the content 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 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.

You know who's got the worst inverse shadow is Reddit. In Reddit's dark mode, they have, like, 1 pop up menu 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? Yeah. For real. Right? Get get it together.

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.

That's a, that is one thing that will Also be solved by using Prefer's color scheme.

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.

At the end of the day, I think the flash of unthemed content will will, make your site look a little un unfinished rid. Unpro.

Another issue we hit was opacity values are really tricky.

So in many cases, when I was designing, I said, okay, I want the I want this to have like a white border, but I want it to be like 50% opacity so that whatever's behind it shows through.

And then when you flip it, I want it to be black with 50% opacity, right? And If you go to our if you go do syntax.fmforward/systemforward/colors, 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 I want maybe 10, rid. Maybe even maybe even 25% increments of of opacity for each of those. So that's 1200 variables. If we were to generate a yellow 150%, yellow 160%, you know, So that wasn't ideal because, like, we're not going to just, like, pre generate a bazillion variables. And even if we were, 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

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

how's the other thing is, okay, well, let's use color mix Or relative color.

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 so So that when you change variable color, 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 I was like, Like I did just like a summary. Here's how to do, opacity colors and the 2 good solutions. First, the Tailwind solution was a really good one. Tailwind does this a little differently in that you could do something. You could do a class like BG Blue, background blue, and then you could do another one, which is like background opacity 50.

And that's really nice because when you set background blue, there's a default variable of opacity that's set to 1.

And it says background is blue with With that opacity value. But the 2nd class of opacity overwrites the opacity variable, 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.

So and that wasn't an option for us, but the end solution was Color mix is now in all the browsers. So you're able to take what, the yellow and just mix it with

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, 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 sRGB, and I mixed The variable background, which is black, and I mixed it with transparent by 4%, and guess what the end result was.

It came out pink.

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

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, 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.

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

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.

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, CSS pro like Adam Argyle, would have the exact answer like that Especially because it's deep in the CSS colors. But, yeah, that that was I was like, Okay. I guess it doesn't just Oh. Work With any input and any output, you kinda have to at least,

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, 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 Relative color, you cannot come soon enough.

That and color contrast, man.

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.

SVGs need change color too. And SVGs are a problem when you load them up as an image. Believe it or not, 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 as an image, rid.

Yeah. On the the state of CSS episode we did some one of the most requested features was the ability to do SVGs in CSS.

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, like, background SVG and for it to Inherit a CSS variable that is used inside of it. So that was specifically On one of the pages, I had this little wave detail that was an SVG and it needed to be.

It was in yellow. I just I just made it in yellow, but it needed to react to whatever color you're on. So here's the list of ways that You can make an SVG change color, all of them being less than ideal.

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

The downside to that is literally your entire JavaScript bundle. If you're using React or Svelte or whatever, rid. You're putting your SVGs as like HTML code into your bundle. And every time you change your bundle, Your entire icon set has to be redownloaded by every single visitor. It makes your bundle sizes bigger than it probably should need to be. So it's kind of sucks.

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

But with the downside of 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.

You can invert them with CSS.

You could even I even rid. Played with using hue rotate, to change the color of them, but I couldn't I couldn't math hard enough to match.

I I was like That's a hard one.

What do I what do I rotate to get to this 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.

You can use a CSS mask with SVG, so you could just have a background red and then mask that with an SCSS mask.

And then the red will Only show through where the SVG is, so that's a pretty good option, especially because you can load SVGs in the body and give them an ID.

And with CSS masks, you can reference SVGs on the page with its ID.

So if you if you're using that mask several places throughout your application, you only need to load that SVG once in one spot on the page. And then you can reference the idea of the SVG, which is really cool.

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

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

Unfortunately, it will not inherit any variables, so you would have to redeclare all the variables or rid. Come up with some obtuse server side SVG generation thing.

And then the last One is you can inline the SVG code and replace it with JS, which I put a straight face emoji beside this one because rid. It is the most wackadoodle answer, and it's what I ended up doing. Wild. Yeah.

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

I took the SVG, I converted it to a data URL, so In the CSS, it was background image data.

Colon SVG blah blah blah blah blah, And then I used JavaScript when the theme switched. I like subscribe to the theme store.

When the theme switched, I basically took the background URL out of that.

I figured out the computed accent color because You can use document.

Getcomputedstyle to figure out what the actual value is.

And then I did a regex replace on the film with the actual style and, like,

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

And then I set the background property rid on the element via inline style to overwrite the CSS. So

gnarly, gnarly, gnarly. It's not any hairier than, when I loaded the show notes.

Rid The, h 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 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.

Easy fix. Whatever

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, But the show notes need to be other elements, although I did on my website, on my my MDX website. You can specify how HTML elements get rendered so you can override Like a paragraph pack. Probably do that. Yeah. Any component.

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

Never, ever. Last thing, help is on the way. These are things that will a lot of these pain points will be alleviated. First one, we talked about color contrast.

It's going to solve all the inverted palette issues, as well as making sure that

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, split it into variables of whatever its components are into whatever you'd like, Even if you have a hex. RGB variables. I could split it out into OKLCH even as a hex and then manipulate those individually with rid or just replace them straight up, 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.

Gotta have it. Also from former guest of the show, Baranis.

He Posted a blog post the other day where there is a light dash dark helper method where you can pass it 2 values.

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, like, 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.

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

solve the same thing but better? Maybe? I don't know. May well

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? And like the background? You're right. So but it's it's basically just a shorthand syntax to 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 explicitly set like a variable on the on the root that is dark or light. You know? Rid. Does that make sense? Yeah. I yeah. Instead of having to put classes on the body of darker light, It would be nice to set, like, a high level variable

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 Occasionally, it feels like it's overengineered.

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

But rid. Every single solution 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, 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?

Rid. I should have read the rest of the blog post because it continues on that there is also a proposal for Pretty much themes. It's you would set the themes on colors on the root with a color scheme property. So dark, light, custom.

And then and then there will be a schemed value that corresponds in light, Give me hot pink and dark give me lime and a custom give me purple. So exactly what we were just talking about Is looks like it's being proposed in the CSS working group.

That's sick. Like that. Like it, love it, wants some more of it.

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, and it's a TikTok account, and it's one of the most fascinating TikTok accounts. This is probably one of my my, favorite favorite ones favorite ones to follow. I don't know if you've heard of her. She has rid. 200,000 follows, which I would have thought you'd had more.

Her her name is engineer dot everything, and Her TikTok account is that she is building a tunnel

Oh. Underneath her house. Yes.

And Unreal.

I 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, I mean, she's gotten deep into this hole. She she's got some cool Sticking a massive tunnel. It is Which is absurd. The entire Project is absurd. There's no way else to describe it.

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.

It is rid Wild.

What I like so much about her is that she posts everything Everything. As she's figuring it out, As she goofs up, she lit the tunnel on fire. Oh, gosh. You know? Most terrifying thing in the world. She she built like a little mining cart, rid to bring it up. And like 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 it's not in the middle. It's both.

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

Yeah. Okay. This is gonna be my sick pick too because Oh, yeah. I could talk about this all all day long, and she's like building A tunnel under her house. And there's another guy on on YouTube. What's his name? He's from Australia.

He always reminds me of, friend of the show, Simon. Colin Fertz.

He's been digging a tunnel on in his backyard for for years, and it's so nicely done.

And, like, I just keep thinking, like, is this just allowed? 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.

I don't need that in my life, but it is fascinating.

I love it. I watched another documentary about how, like, London 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.

And then Apparently, they put a they put an end to that, but it's wild that no one ever thought to say rid. Make a rule of how deep you can go. You know? Like, you're just allowed to make 3 levels deep

in your house. Oh, yeah. This is so rid. Gary today. I just, like, feel, like, anxiety thinking about the

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 $600 a dumpster, and she's done, like, 12 dumpsters already of rock, which Just like there's no small feat alone in just

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.

Yeah. Yeah. That's definitely a sick pick. Check it out, engineer. Everything on TikTok.

Apparently she has a YouTube channel as well.

So I should I've never that's the weird thing about rid TikTok is you find these people Yeah. And you think they're just TikTokers. And then you realize, oh, no, this person's had a YouTube channel for yeah. 7 years, But I've never seen anything. Now they've surfed this amazing thing.

No, not much of a YouTube channel.

Three videos.

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

Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Rid.