A simple mistake that can screw up your light/dark theme (and how to fix it)

Looking to step up your CSS game? I have free & premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ Finished example: codepen.io/kevinpowell/pen/KK...
✅ More in-depth video on creating a light/dark toggle: • Cloning Google Font's ...
⌚ Timestamps
00:00 - Introduction
00:12 - Following system preferences for color-scheme
00:30 - emulating light and dark modes
01:10 - using preferes-color-scheme
02:00 - Letting a user change the color scheme can cause a problem
03:33 - The solution to this problem
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@TheSdfasdfsaf]

Sorry, but my mind is blown right now. I have been watching your videos for at least the last two years, and this entire time, I thought you were saying "Friend and Friends". I always thought...hmm...kind of a weird introduction, but whatever. This is the first video where I actually noticed the "t" sound in "front-end". And I hade one of those moments where I just question everything I think I know about reality and the meaning of life. I'm shook.

[@k12moyo]

You are absolutely right! I cannot believe this lol

[@ittixen]

saaame and I'd never know if it wasn't for this comment lmao

[@boheeatelier6681]

Haha, thanks for that comment. I am not a native English speaker and I was wondering why does Kevin say 'Hello my friend and friends'? 🤔 I have never heard anybody to make a greeting like that before. And now, thanks to you, I finally know, what he really says. It won't bother me anymore (my sleepless nights are over ;)).

[@manojht8036]

This comment is repeated. I've seen this before as well

[@TheSdfasdfsaf]

@@manojht8036 I have watched Kevin Powell's videos for some time, but I don't spend much time looking at the comments. Maybe someone else made this observation before me...but what's your point?

[@LePhenixGD]

0:35 You can alternatively swiftly shift between dark and light mode by clicking on the paint brush icon

[@KevinPowell]

I wish I knew this earlier 😅

[@LePhenixGD]

Good thing is, we can acknowledge that at the very least, you're helping beginners familiarize themselves with commands in the DevTools

[@bobhearinger]

Wuuuuut, thanks!

[@ClarkeDesign]

Nice One - just been banging my head against a wall for a few days trying to sort out my stragglers. You've made it so somple to mop them up and have a better switcher from light, dark and system. Thank you.

[@RayAndrewsDev]

Your timing is impeccable, I needed to know exactly this today. Helpful as ever, each time I started to mentally "but what about .." you were already ahead of me.

[@ryandotfurrer]

This is ridiculously simple but I never thought of it...thank you, Kevin!

[@AngriestEwok]

Brilliantly simple, thanks. Also, I can think of one case where you'd want to switch your colour scheme from your own system default: when presenting a demo to people on your machine and they complain that they can't read it because it's 'all dark' (as frequently happens to me at work).

[@kylevandeusen]

Huge thanks for this video! I know you probably question doing smaller, narrower things like this - but this is actually SUPER helpful! 🙌

[@yevhenkharko1377]

Just wow! Thank you for this:)

[@maersux]

Did not know about this attribute. Great to know - thanks!

[@ometaxas]

That's an awesome fix. Thank you

[@TeianDown]

Today's iCodeThis challenge asked for a pair of sample notification boxes, one with a light color scheme and the other with a dark. This video inspired me to make an interactive theme-picker for it :)

[@deco-der]

life saver this one💯💯

[@santiagojimenezpinedo3473]

Very interesting that I found this problem just yesterday when styling the scrollbar, by putting in my media query the color-scheme to light just by curiosity and looking that the text changed it's color, and I didn't even noticed that before since the text color (which is white by default) matched very well with both dark and light themes, and after putting that I saw the text changing to black.

[@mmoustik]

Great content as always! I do something similar in my Chrome extension. If the user has not specified a color scheme preference I default it to ‘auto’ and utilise `matchMedia('(prefers-color-scheme: dark)').matches` to decide on which theme to set. The user can make a preference using the radio buttons provided. If they select light or dark I add a data attribute to the html element specifying the theme. Been working like a charm 🎉 What I struggle the most with light and dark theme in general is creating my color palette.

[@bobhearinger]

Thanks Kevin!

[@lausianne]

Thank you!

[@xyssxy]

also, for privacy respecting browsers, it is actually forced to be light, to make the users have a more similar fingerprint.

[@carolmckay5152]

Brilliant!

[@alabhyajindal]

You're the GOAT

[@dj10schannel]

Funnily enough was facing this issue few weeks ago(just bg for preference but particularly for mobile) wasn't aware scheme set's preference then, i do now lol but either way good vid 👍 informative to those unaware

[@jtsimoes]

Hi Kevin. Great vid! I have one question about color-scheme property: there is any diference between "light dark" vs "dark light" on its value?

[@thiagonatal]

Another nice video!!! Can you talk about html/css for newsletter (including color-scheme / dark mode)?

[@KevinPowell]

If it involves email, I'm not your guy 😅

[@WePiphany]

Emulate is a killer tip!

[@kh_trendy]

0:55 which style of scrollbars do you prefer?

[@chrisicotec7652]

very useful

[@krzysztofprzygoda7635]

Referring to JS version, why not simply: document.getElementById("theme")?.addEventListener("change", (e) => { document.documentElement.setAttribute("data-theme", e.target.value); }); or even simpler:

[@vladanton9]

Thanks

[@KevinPowell]

Thank you so much!

[@killymxi]

The times when i want to deviate from system theme - is when particular app or website does poor job with it. Unfortunately, it is very common that people don't understand what makes a dark theme work, and so they hurt my eyes unintentionally, instead of helping.

[@Gigusx]

For me, the main problem with this trend is that most people are super lazy and go with colors that will look decent on both dark and light background. I.e. you can change the background, but (almost) all elements, text, links, etc. will look the same. All it really does is that you have 2 mediocre, albeit functional themes with little personality, with just enough contrast as necessary. It makes things super boring and diluted, and the site never looks better than if it has a single dedicated theme that's either light or dark or anything in-between. And sometimes, this approach makes one of the themes look straight out terrible.

[@natbud7987]

The problem I had was that in the requirements, it said that the user should be able to toggle the themes but the chosen theme has to persist across different pages of the site. So, the solution was to store the state (light or dark theme) either in local storage or cookies and toggle the themes with Javascript. But since JS needs a bit of time to load, the rendered page would flash shortly before "getting" the right theme from JS. Putting that script at the very top of the file in order to have it loaded before the page renders only meant a delay in loading. Is there a solution I haven't thought of?

[@mind.journey]

You can use a class in the html to set dark mode. The first time the user opens the page, you use js to set a cookie that reflects their preferred theme. On subsequent page loads, you check the cookie and set the appropriate class (before the css loads). If the user changes preference, you update the cookie. If you're using an SPA without SSR, I don't know what the correct approach is

[@space8143]

BEST 🥰

[@Thoscellen]

Does that mean I can have part a webpage in color scheme light and other part in color scheme dark ?

[@larswilliamskold]

One thing I have struggled with is the various icons when it comes to dark themes. There is some support for media queries when loading favicons, and for SVG icons it works. But these are not the versions used in a lot of places, where instead it seems to use the web manifest definitions - which lacks support for theming. Another annoying thing is that chromes tab bar is quite bright even in a dark theme, so the resulting dark theme icon gives very low contrast to the background. What approach is good in order to make it work nicely?

[@truvc]

Could you put html { color-scheme: dark } in the media query? And set it to light outside of the media query?

[@luca9298]

I have encountered a problem related to color theme just the other day. Basically to gracefully change from one theme to another I’ve added a transition to the body element for the color and background color properties. So far so good. The problem is when I add transition color to an element (to achieve a hover effect) It seems that the two transition stack upon each other or conflict with one another. Any idea how to solve this?

[@dealloc]

It overrides the anchor's transition with the transition one, and depending on if your a:hover has its own transition, it will then reset the transition to whatever was specified in the :hover (which is why you should put the transition on the main selector itself, and not within pseudo selectors, unless you need to have different effects). I assume you use some global selector (i.e. *) that adds a transition to every element in which case whichever selector came first or had higher specificity (nothing is higher than *, btw) will override the transition. There's a few ways to go around this: - Don't transition on theme change. There's no value to do it and it creates headaches for you (and possibly your users, literally). - If you want the anchor's transitions to have higher precedence (not to be overridden by your "global" transition), you can prepend its selector with ":root" (i.e. :root a { ... }). This selector will have higher specificity than * and :root by themselves. - If on the other hand you want the "global" transition to have higher precedence, use the :where selector (i.e. :where(a) { ... }) this will override the anchor's transition no matter where in the CSS it is specified as it has 0 specificity.

[@Wolfci]

How can we prevent on refresh the default theme flashing the background color if black theme is the default so if I’m on white theme it flashes the black and vice versa

[@D7460N]

When my system is light theme but my website is dark, I get a "flash bang" of white every time I refresh. I don't think it's FOUC because I can see that separately with fonts. How do I get rid of the flash bang on refresh?

[@flygonfiasco9751]

Is there a best practice for breaking up the themes into different style sheets. I’m worried that having both themes in one will mean users are usually loading in unnecessary styles.

[@Linuxdirk]

Hey, I do it exactly like you :) I tried this light/dark emulation mode a few days ago in Vivaldi and it didn't work, though :( Would have come in handy since Vivaldi on Linux has issues with properly detecting mode and announcing it to websites. I cheated it during testing with different color CSS files.

[@mahadevovnl]

CSS should have a function called `theme(lightColor, darkColor)` and allow us to set `color-scheme` on the `:root` selector via JavaScript if they want to override things. It would make writing it so much easier for light/dark-modes. e.g. `:root { --base: theme(white, black); }`

[@KevinPowell]

I'm basically setting the `color-scheme` on the root here, just by toggling a class, rather than doing it with an inline style. As for theme(), they have `light-dark()`, but it's not well supported yet. I think it works just like what you're after though.

[@mahadevovnl]

@@KevinPowell Oooh I didn't know that! That's amazing. Chrome supports it... this is going to be a killer feature for the upcoming few years I'm sure :)

[@kinetic_pixels]

ayyyye 'Flashbang' your users... im running with this instead of FOUC from now on 🤣

[@johnconnor9787]

Please, create a video on how to create a custime theme. Where it will be possible just to change global variables colors. Is it possible to create just with CSS?

[@HumanoAI]

Sorry this cause you a headache as per your thumbnail. This is pretty good, saves a whole JavaScript to change specific styles.

[@user-sw1kv5fo7h]

hello Kevin. good job. but , what is the use of [data-theme ="..."] repeated twice??

[@yourDecisi0n]

This is because when the data-theme is set, you want to force the dark or light theme. When the data-theme is something else or unset, it will automatically opt to use the system’s default theme

[@theodorealenas3171]

They differ in the emoji after the equals sign. Glancing over emoji is a sign of good health, so, nice!

[@indignantoccupant]

❤ FROM INDIA

[@PascalHorn]

Fun thing is: With CSS :has() and the :checked pseudo class, there's no need for Javascript at all. 😊 And as a fallback, simply display: none; the mode selector by default. Users who won't update their browser properly can live without that. 🤷‍♂

[@KevinPowell]

Yeah, Amit Sheen mentioned this to me in another video I did, and I think I actually used it myself about a year ago in a different video... I just keep forgetting about it 😅

[@dealloc]

But you cannot persist the state, so better to just use JS.

[@MattDunlapCO]

@@dealloc the browser is persisting state for you (i.e. input.checked) and you can only persist something redundant... People keep forgetting that things like managed controls in React are often solving self-imposed problems.

[@dealloc]

​@@MattDunlapCO The state is not persisted outside the current context of the page- the :checked state is ephemeral. That is, if the page is refreshed, redirected or the closed the state is lost. There are other ways to manage state and store state than React. You can store it in a cookie, localStorage, heck even server-side. Whatever floats your boat. If you are so afraid of JavaScript and want to bike-shed a solution, you could also put it in a form with a submit button that submits the state to a server, then have the server render the page with the current user selected state. But why jump through hoops for something that doesn't need to be persisted on the server and doesn't take up more than three lines for a better user experience?

[@D7460N]

Not fear, but the basic principal of Least Power ​@dealloc

[@usernameL1]

Pro tip: watch out with this setting in combination with Apple Mail client 😅

[@spicybaguette7706]

using emojis as attribute values is so cursed💀

[@SXsoft99]

meanwhile me using tailwind :))

[@mobilehacker1]

That's a misleading title, I thought it was something to do with Windows settings. Please, avoid clickbait titles. In the other hand, great content!

[@NickCombs]

Should've dimmed the white first if you knew you were gonna flash bang us. Also, saying you're gonna "come on" different parts of the code is a verbal tick I'd invite you to address.

[@KevinPowell]

Fair enough on the bright screen :D - as for the verbal tick, I'll try to be aware, but I never hear myself say it, hear it as something strange when I edit, or notice it when I'm re-watching before publishing... might just be a common speach pattern where I live? 🤷

[@NickCombs]

@@KevinPowell Thanks. I do enjoy your content and find it useful.

[@marvinmokua]

Please don't make clickbaity titles, every creator is doing it, and some people don't have time, and need to know what a video is actually about before committing time.

[@xyssxy]

how is the title clickbaity? the title describes exactly what happens in the video