ACSS 101.08: Color Scheme & "Dark Mode"

[@ManosGerakakis]

The power and control you get with ACSS is really mind blowing 🤯 Bravo guys! Keep on rocking!

[@antonichristian5845]

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.

[@isaurasotoca]

An easy and elegant application of a fairly complex feature, as always! 😊

[@LupusDesign]

Excellent tutorial, Kevin.

[@goannacs6861]

Sick 😮 I havent regret to go with ACSS and Frames one single bit!

[@davidwalls2304]

Great episode. I'm looking forward to implementing color scheme on my sites when ACSS 3 rolls out officially.

[@ryrimsky]

Kevin, you're the man. 🥴

[@eucalyptech]

Such a powerful feature, thank you Kevin 😃

[@dahunsi]

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.

[@ikacode]

Wow the selector locking is a very powerful feature I didn't know about it !

[@AutomaticCSS]

💪🏻

Love it! Thanks for this one once again

[@fedestock77]

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?

[@AutomaticCSS]

It’s not super straightforward. That’s more something the builder would need to provide for.

[@DraganMiletic]

This deserves a ultra like!

[@rebelinc]

Awesome, as always.

[@AnonymAnonymAn]

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.

[@AutomaticCSS]

It's possible, but not out of the box. Most people don't use color scheme that way.

[@turvodnik]

Thanks, great functionality. What about automating color changes for svg icons and changing the logo when switching the color scheme?

[@AutomaticCSS]

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.

[@turvodnik]

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.

[@tobisalami]

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?

[@AutomaticCSS]

Not yet

[@krissborowy3627]

@tobisalami And what function would it serve? do you have any idea for this?

[@tobisalami]

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

[@captainfire74]

Wow, that got dark pretty quickly !!!

[@kristapsvilcans]

Fantastic, thanks

[@RobCooper]

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?

[@AutomaticCSS]

We do it as a per page upcharge.

[@joachimauster]

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?

[@AutomaticCSS]

Yes, but it’s time to update to 3.0 ;)

[@krissborowy3627]

I don't know if I understood correctly. Is the switch component available to Automatic.css or Framer License holders?

[@AutomaticCSS]

Frames. There’s switch code in the docs though.

[@krissborowy3627]

@@AutomaticCSS Can you advise/show me where I can find it in the documentation?

[@AutomaticCSS]

@@krissborowy3627 automaticcss.com/docs/color-scheme-dark-mode/

[@stefankontrus]

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]

Would require a manual declaration. We could probably make a recipe for that.

[@stefankontrus]

​​@@AutomaticCSSa recipe or instruction how to achieve this, maybe in the docs, would be great 👍 thx!

[@johnboyd8053]

@@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?

[@Gearyco]

@@johnboyd8053 We'll do a video on recipes, but there should be a doc for it as well. Look up recipes in the docs.

[@bikimel-directes]

Very cool thnks accs!

[@OneKingArthur]

Hi Kevin, where do you suggest placing the switch on a website.

[@AutomaticCSS]

usually in the header.

[@bluetheredpanda]

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

[@malikqatagan8977]

Super cool ❤

[@workvisual]

Thank you sir

[@haroonqraja]

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.

[@AutomaticCSS]

Do both. Its flexible. Not all dark sections use the utility class. The method provided has no limitations :)

[@dovber]

Thanks

[@jeremiahhundley6629]

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?

[@AutomaticCSS]

Please start a thread in the support community so we can guide you.