Thinking on ways to solve COLOR SCHEMES

In today’s GUI challenge, we’re building dark, light and dim color schemes with HSL. The CSS works across modern browsers, establishes foundational architecture for more themes, and is accessible.
Chapters:
0:00 - Introduction
0:21 - Scheme overview
1:15 - Debugging corner
1:55 - Custom property architecture
4:17 - The Cascade
5:51 - DevTools
7:40 - Bump bump til ya pass
9:54 - Relative vs Absolute color adjusting
11:54 - Outro
Resources:
Read along → goo.gle/350bmMi
Try a demo → goo.gle/3ps7Rry
Get the source → goo.gle/3n4Sfcg
Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gl/LLLNvf
#GUIchallenges #CSS #ChromeDeveloper

[@BakedxMasa]

I do not know what I did on KZbin that I got these Chrome Dev videos to my feed, but I'm absolutely loving them. Best videos by far are these GUI Chanllenges and CSS vids by Una

[@DevAmateur]

Absolutely! these vids are so well made and incredibly useful.

[@patroclus8796]

This guy is soo cool I always look forward to his videos on chrome. Keep it up. More of this pleeez

[@AdamArgyleInk]

thanks!!

[@apidas]

yess. I love adam's videos

[@nicolasparada]

This is awesome. Using custom properties with HSL color format makes all the sense. You just rotate the hue variable and you get all color palettes.

[@RomboutVersluijs]

Yeah never thought of using in that manner, makes so much sense and is wat easier to flip thru light and dark

[@RomboutVersluijs]

Dude that dim color palette is SWEET 😎!!! Thanks for showing that. We made a app for organising your visual image library and we use dark and light. I think I'm going to add a dim scheme now to it. It so nice!

[@rivadav]

I’ve only recently discovered this channel and I love the series on the UI from Una and Adam! Keep up the good work guys 👏

[@RomboutVersluijs]

Super clean presentation and code, thanks a lot!

[@Parkynson]

I learn so much from your videos. Thank you for putting together so much useful information.

[@ozanmuyes]

You rock and the content is priceless. Thanks Adam 💯

[@yuriyvasilyev7785]

Very helpful, thank you!

[@nro337]

Great video!!

[@heddshot87]

thank you so much! This is exactly what I wanted, EXACTLY.

[@RomboutVersluijs]

Man so glad you showed that dim approach, lots of times I dislike the dark because contrast is to high. When I read to long using those very contrasting dark themes my eyes get strained

[@AdamArgyleInk]

🤘💀 love to hear it!

[@MehmetKoseDev]

whoa thats brilliant!

[@shaggyfeng9110]

Thank you!

[@TheNewton]

The attribute on the root is so straightforward and normal now its difficult to to even think of another approach the only thing I can think of besides stylesheet swapping is using the radio button trick, or checkbox hack immediately after body opening tag and sibling, or adjacency , selectors targeting the next #main container div.

[@kuntaldas2843]

to me it is revolutionary, awesome stuff. Now I know( I think so ) how "Material U" works out colors under the hood.

[@bun_bun17]

you are a rock star

[@safriudinpanggabean864]

Nice

[@jouni-]

Very cool! Do you happen to know how much this type of approach (using a ton of custom properties that are computed based on other properties) might affect performance? I’m hoping they are only computed once, and then the same values cascade down the hierarchy just like normal props would. But still, it’s gotta have some effect, at least some increse in memory allocation, right? My fear is that it also increases the time to calculate styles for all elements on the page.

[@musicmantra4952]

Hi, the code is not visible clearly in the text editor, especially the semicolon and colons. Thanks

[@logicunleashed]

nice!

[@TheNewton]

Are there aria attributes specifically for themes?

[@SalomDunyoIT]

CSS is becoming a prog lang :)

[@BakedxMasa]

This might go out of scope, but: It's good to give the user to toggle themes, but when creating an PWA - the manifest allows to select only one `background_color`. The `background_color` should be the same color as the load page, to provide a smooth transition. However, now as the user has the ability to change the theme - it might cause sudden color changes when loading an PWA.

[@jakubwegrzyn3798]

In my opinion it's better to assume users have dark them since showing dark color for a second doesn't cause any problems. On the other hand shining very bright color when every user's app is dark is very annoying and hurts eyes.

[@joefads5040]

I'm using multple dark themes across my blog with css custom properties. It would have been cool to see the JS behind the input changes to update

[@BakedxMasa]

Check the description - it has links for the live version + github repo. The .js part is ~5 lines of code.

[@carloscaceres2608]

what is the debugging layout he's using?

[@krtirtho]

The video is great... But the boxes kinda feels like monochrome version of Microsoft logo, am I right?

[@AdamArgyleInk]

i see that! or a simon says hehe

[@requenz_]

Does anyone know which VS Code theme I could use to match his? I tried "Kung Fury", but the shades are very different.

[@longingbydesign]

Isn't color-scheme an invalid attribute in HTML 5? Or is it being specified?

[@RomboutVersluijs]

Specificity?!? Never heard of that's ord 😭

[@RomboutVersluijs]

Ps you called this CSS, but can CSS do functions like this, I thought only scss could do that?

[@AdamArgyleInk]

sure can! here's a little sandbox with plain ol vanilla and HSL + calc() codepen.io/argyleink/pen/OJNyzbp

[@RomboutVersluijs]

@@AdamArgyleInk i just checked and forked it, i see its basically calc, i didnt noticed that at first. PS i made an issue, your using at css but do use scss methods :) & > * {} will not work

[@AdamArgyleInk]

@@RomboutVersluijs yes, the colors are all vanilla CSS calc(), but the rest of the stylesheet uses nesting and probably another future feature or 2 that PostCSS preprocesses out during a build. Try using Vite from the repo! it'll build a vanilla stylesheet for you 👍🏻

[@RomboutVersluijs]

@@AdamArgyleInk im not dev so im not all to familiar with all of this. I only noticed the css uses nested classes like sccs does. testing it locally would not work for me and it misses some classes which the demo page does have

[@justinoneill2837]

@@RomboutVersluijs you should look into Vite, it's super easy to use over all the other build tools and very future proof

[@soonshin-sam-kwon]

Really appreciate it! Very helpful for beginners (like me) :)

[@justinoneill2837]

Hey Adam! Would love to see this implemented with #TailwindCSS or at least start a conversation around it!

[@sjorsborsoborsobors]

I love this guy but that cursive font in some parts of the code gives me a tummy ache