ACSS 101.08: Color Scheme & "Dark Mode"

This lesson covers:
- How to choose alternate versions of each color in the ACSS color system.
- How to automatically swap color scheme based on OS preference.
- How to manually swap a group of elements to the alternate scheme.
- How to manually lock a group of elements to the main scheme.
- How to programmatically lock elements to the main scheme.
- How to deploy a color scheme toggle switch.
- How to test color scheme settings.
- How to clear toggle switch local storage preferences during testing.
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco

[@isaurasotoca]

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

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

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

[@captainfire74]

Wow, that got dark pretty quickly !!!

[@rebelinc]

Awesome, as always.

[@kristapsvilcans]

Fantastic, thanks

[@workvisual]

Thank you sir

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

[@OneKingArthur]

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

[@AutomaticCSS]

usually in the header.

[@ManosGerakakis]

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

[@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 ;)

[@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 :)

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

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

[@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/

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

[@davidwalls2304]

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

[@goannacs6861]

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

[@ryrimsky]

Kevin, you're the man. 🥴

Love it! Thanks for this one once again

[@LupusDesign]

Excellent tutorial, Kevin.

[@bikimel-directes]

Very cool thnks accs!

[@DraganMiletic]

This deserves a ultra like!

[@dovber]

Thanks

[@malikqatagan8977]

Super cool ❤

[@Louis-C-online]

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

[@AutomaticCSS]

💪🏻

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