ACSS 101.08: Color Scheme & "Dark Mode"
Вставка
- Опубліковано 17 лис 2024
- 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
The power and control you get with ACSS is really mind blowing 🤯 Bravo guys! Keep on rocking!
Sick 😮
I havent regret to go with ACSS and Frames one single bit!
An easy and elegant application of a fairly complex feature, as always! 😊
Such a powerful feature, thank you Kevin 😃
Great episode. I'm looking forward to implementing color scheme on my sites when ACSS 3 rolls out officially.
Wow the selector locking is a very powerful feature I didn't know about it !
💪🏻
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.
Excellent tutorial, Kevin.
Wow, that got dark pretty quickly !!!
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.
Kevin, you're the man. 🥴
Love it! Thanks for this one once again
This deserves a ultra like!
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
Awesome, as always.
Fantastic, thanks
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 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.
Thank you sir
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.
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 ;)
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 :)
Very cool thnks accs!
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.
Thanks
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/
Hi Kevin, where do you suggest placing the switch on a website.
usually in the header.
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.
Super cool ❤
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.