Can't wait to watch this. I need to clear the clutter off my desk, but this is one of the lessons I have been waiting for. I am sure it will be worth it.
Thank you for this Episode explaining the Backbone of ACSS. As a Beginner this is pure Gold. A question where you might be able to help me - I'd like to set 2 Color Schemes, 1 is by default and the second one is when being logged in - i can use the alt. color scheme to differentiate those two, is there a way to tell the website when being logged in as a user then use the "alt" color scheme? Kind regards, A.
When it specifically comes to implementing a dark mode, instead of locking selectors for individual sections (like "content-section-quebec") to main scheme under Scheme Protection, it might be a better idea to lock the selector for dark background i.e. "bg--dark" to the main scheme, so that all sections with the dark background become protected. Needless to say, it would work only if using the utility class method to set dark sections.
Thank you for the clear explanation. In case Im using a background image for the light mode, can I set a background image to be set instead of that one for the dark mode?
I understand that. Maybe as an option, as in a frame, there are settings for buttons, something similar to do for icons (perm blots and colors, including alternative color). Icons are on every website. It's just like an idea, it's not always convenient to use local variables.
Another feature that just slaps! When will this team stop? (Never. Never is the answer every sane person is hoping for) 😉 All jokes aside thanks for the great work on this
This was a very, very long-awaited introduction for Dark/Light Mode with ACSS. Thank you 🙏👍 Does dark/light schemes also work (kind of) with 2.x Version already?
Each section behaves differently. The first section's background color didn't change with the text. The content section's background changed, but the text didn't. And the third section, everything worked correctly. Solved: I noticed on the Section Footer, which worked correctly, it had a .bg--ultra-light tag. Where the First section did not have a class. I added a .bg-white, and it fixed the problem. Good to know. * Component Missing from Frames I have the Frames library installed - but there is no Frames Color component in my builder?
@@krissborowy3627 Sometimes, you may want to have more than just light mode and dark mode. You may want to have "reading mode" in which the blog pages for example would be yellow-ish and easy on the eyes. Not light. Not dark. You may also want a user to customize their color scheme the way they like their colors. Of course it won't be granular control over each color (so they don't mess it up) but actual color schemes to choose from. I see this used in front-end app dashboards.
Great thank you Kevin! How would I approach it, if I want the normal e.g. black shadow on the main scheme, but the glow in another color e.g. red as you showed in the alt scheme (so not just the same color inverted and switched from shadow to glow)? thx
@@AutomaticCSS Did I miss it? Have you done a video that truly explains the "Recipe" concept or where can I locate the doc that explains how this all works?
Out of curiosity... how did you bill for the after launch dark mode feature? For the time it took? Or the time the client might expect the fix to take?
The power and control you get with ACSS is really mind blowing 🤯 Bravo guys! Keep on rocking!
Was hoping for this video it was one of things I was getting confused on but Kevin cleared it right up, thanks! ACSS is the gift that keeps on giving.
An easy and elegant application of a fairly complex feature, as always! 😊
Sick 😮
I havent regret to go with ACSS and Frames one single bit!
Great episode. I'm looking forward to implementing color scheme on my sites when ACSS 3 rolls out officially.
Such a powerful feature, thank you Kevin 😃
Wow the selector locking is a very powerful feature I didn't know about it !
💪🏻
Excellent tutorial, Kevin.
Kevin, you're the man. 🥴
Can't wait to watch this. I need to clear the clutter off my desk, but this is one of the lessons I have been waiting for. I am sure it will be worth it.
Love it! Thanks for this one once again
This deserves a ultra like!
Awesome, as always.
Wow, that got dark pretty quickly !!!
Thank you for this Episode explaining the Backbone of ACSS. As a Beginner this is pure Gold.
A question where you might be able to help me - I'd like to set 2 Color Schemes, 1 is by default and the second one is when being logged in - i can use the alt. color scheme to differentiate those two, is there a way to tell the website when being logged in as a user then use the "alt" color scheme?
Kind regards, A.
It's possible, but not out of the box. Most people don't use color scheme that way.
When it specifically comes to implementing a dark mode, instead of locking selectors for individual sections (like "content-section-quebec") to main scheme under Scheme Protection, it might be a better idea to lock the selector for dark background i.e. "bg--dark" to the main scheme, so that all sections with the dark background become protected. Needless to say, it would work only if using the utility class method to set dark sections.
Do both. Its flexible. Not all dark sections use the utility class. The method provided has no limitations :)
Thank you for the clear explanation. In case Im using a background image for the light mode, can I set a background image to be set instead of that one for the dark mode?
It’s not super straightforward. That’s more something the builder would need to provide for.
Fantastic, thanks
Thanks, great functionality. What about automating color changes for svg icons and changing the logo when switching the color scheme?
You can set it up, but there’s no way to automate it through the framework that I know of. Just something you have to do on your end.
I understand that. Maybe as an option, as in a frame, there are settings for buttons, something similar to do for icons (perm blots and colors, including alternative color). Icons are on every website. It's just like an idea, it's not always convenient to use local variables.
Another feature that just slaps! When will this team stop? (Never. Never is the answer every sane person is hoping for) 😉
All jokes aside thanks for the great work on this
Very cool thnks accs!
This was a very, very long-awaited introduction for Dark/Light Mode with ACSS.
Thank you 🙏👍
Does dark/light schemes also work (kind of) with 2.x Version already?
Yes, but it’s time to update to 3.0 ;)
Thank you sir
Each section behaves differently. The first section's background color didn't change with the text. The content section's background changed, but the text didn't. And the third section, everything worked correctly.
Solved: I noticed on the Section Footer, which worked correctly, it had a .bg--ultra-light tag. Where the First section did not have a class. I added a .bg-white, and it fixed the problem. Good to know.
* Component Missing from Frames
I have the Frames library installed - but there is no Frames Color component in my builder?
Please start a thread in the support community so we can guide you.
Thank you so much!
But Kevin, is there a way to add an extra color scheme besides the main and alternate? Can you have Alternate2?
Not yet
@tobisalami And what function would it serve? do you have any idea for this?
@@krissborowy3627 Sometimes, you may want to have more than just light mode and dark mode. You may want to have "reading mode" in which the blog pages for example would be yellow-ish and easy on the eyes. Not light. Not dark.
You may also want a user to customize their color scheme the way they like their colors. Of course it won't be granular control over each color (so they don't mess it up) but actual color schemes to choose from. I see this used in front-end app dashboards.
Thanks
Great thank you Kevin! How would I approach it, if I want the normal e.g. black shadow on the main scheme, but the glow in another color e.g. red as you showed in the alt scheme (so not just the same color inverted and switched from shadow to glow)? thx
Would require a manual declaration. We could probably make a recipe for that.
@@AutomaticCSSa recipe or instruction how to achieve this, maybe in the docs, would be great 👍 thx!
@@AutomaticCSS Did I miss it? Have you done a video that truly explains the "Recipe" concept or where can I locate the doc that explains how this all works?
@@johnboyd8053 We'll do a video on recipes, but there should be a doc for it as well. Look up recipes in the docs.
I don't know if I understood correctly. Is the switch component available to Automatic.css or Framer License holders?
Frames. There’s switch code in the docs though.
@@AutomaticCSS Can you advise/show me where I can find it in the documentation?
@@krissborowy3627 automaticcss.com/docs/color-scheme-dark-mode/
Out of curiosity... how did you bill for the after launch dark mode feature? For the time it took? Or the time the client might expect the fix to take?
We do it as a per page upcharge.
Hi Kevin, where do you suggest placing the switch on a website.
usually in the header.
Super cool ❤