I do not know what I did on RUclips 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
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!
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.
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
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.
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.
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.
@@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
@@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 👍🏻
@@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
Super clean presentation and code, thanks a lot!
This guy is soo cool I always look forward to his videos on chrome. Keep it up. More of this pleeez
thanks!!
yess. I love adam's videos
Great video!!
I do not know what I did on RUclips 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
Absolutely! these vids are so well made and incredibly useful.
Hi, the code is not visible clearly in the text editor, especially the semicolon and colons.
Thanks
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.
Yeah never thought of using in that manner, makes so much sense and is wat easier to flip thru light and dark
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!
thank you so much! This is exactly what I wanted, EXACTLY.
Does anyone know which VS Code theme I could use to match his? I tried "Kung Fury", but the shades are very different.
CSS is becoming a prog lang :)
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.
You rock and the content is priceless. Thanks Adam 💯
Are there aria attributes specifically for themes?
I learn so much from your videos. Thank you for putting together so much useful information.
Nice
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
🤘💀 love to hear it!
whoa thats brilliant!
The video is great...
But the boxes kinda feels like monochrome version of Microsoft logo, am I right?
i see that! or a simon says hehe
you are a rock star
Thank you!
Isn't color-scheme an invalid attribute in HTML 5? Or is it being specified?
to me it is revolutionary, awesome stuff. Now I know( I think so ) how "Material U" works out colors under the hood.
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.
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 👏
Really appreciate it! Very helpful for beginners (like me) :)
what is the debugging layout he's using?
Very helpful, thank you!
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.
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.
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
Check the description - it has links for the live version + github repo.
The .js part is ~5 lines of code.
nice!
Specificity?!? Never heard of that's ord 😭
Ps you called this CSS, but can CSS do functions like this, I thought only scss could do that?
sure can! here's a little sandbox with plain ol vanilla and HSL + calc() codepen.io/argyleink/pen/OJNyzbp
@@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
@@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 👍🏻
@@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
@@RomboutVersluijs you should look into Vite, it's super easy to use over all the other build tools and very future proof
Hey Adam! Would love to see this implemented with #TailwindCSS or at least start a conversation around it!
I love this guy but that cursive font in some parts of the code gives me a tummy ache