How to Easily Swap Logos Between Dark & Light Mode (Bricks Builder)
HTML-код
- Опубликовано: 10 сен 2024
- This tutorial will teach you how to handle logo swapping between color schemes. It covers three scenarios:
1. Color scheme based on OS preference.
2. Color scheme based on toggle preference.
3. Color scheme based on a combo system (toggle + OS).
Please note that the exact methodology may differ depending on how color scheme has been implemented on your site. The demo in this video uses Automatic.css, which makes it very easy, but most approaches should be somewhat similar.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
Great short discussion showing how to make the logo change based on color scheme. I'm looking forward to the longer color scheme video(s). Love the comment, "Best of luck to you" -- priceless. I'm using ACSS so life is much easier for me, but still, best of luck to others not using ACSS.
It's amazing to start seeing 3.0 tutorials!!! 🥰 OMG, that SCSS panel will be really handy!!
Viewers take notice.. it was explained how to accomplish this even IF you DON'T have ACSS. When it could have been explained ONLY using ACSS. This speaks volumes about the presenter.
Hey @Gearyco Container Queries (Size) is at 91.11%.. you already know it's game changer time for Frames and ACSS!
I like 93ish to really feel good. But yes, they’re coming to frames soon!
12:56 Haha love it
Well, that was easy! And thanks to ACSS and Bricks together with the Geary magic, it was! Thanks, Kevin!
Thanks for posting, step by step love it! I looking forward the acss course coming up...also look forward more videos on how do all the step by step how get the colours over on site, make a website very professional done. Great for people who are dyslexic
Another great tutorial Kevin and can't wait to try ACSS 3 😃. I found the video and sound in perfect sync if that helps at all
Great video, thank you Kevin !
Super practical. ❤ are you able to show a tutorial for a switching the logo on a sticky header? Either way drop 3.0 😂
I would love to see that too.
That's an easy one, if you mean swapping it based on % of scroll, can even animate it like fade in/out. Easy with CSS.. easier with a bit of JS.
Incredible tutorial! Another thing I was wondering is:
Let’s say you have a transparent sticky header with a black logo. Your sections below it alternate between light and dark. How would you make the logo change color based on the section it is over?
Hmm. Depends. Mix blend mode could be an option if it’s a simple SVG. JS would be required otherwise. Most clients aren’t paying enough to get that level of thought. These aren’t things that make businesses more money.
Great video Kevin 👌
Is there a way to sync two toggles? I want it in the header for desktop, but inside an offcanvas for mobile. Trying to add two toggles doesn't work (display:none on mobile breakpoint, a second toggle in off canvas menu on mobile). The function works, but the toggle state is not in sync...the one in off canvas toggle dark mode, but the toggle doesn't itself flip in appearance). When only one is used it works fine.
Sure just requires js
When the user device is set to dark mode the frames toggle switch doesn't automatically change to "light mode" it still says "dark mode" in dark mode. You have to click it for it twice for it to switch to light mode. Thoughts?
When I use it, it switches itself
Have you cleared local storage?
@@Gearyco I think that was the issue. Cheers
Kevin - what do you think of just targeting path classes in your SVG the swap? I tried this, but it gets janky with the toggle not respecting system settings. When that's the case, the logo using svg CSS to target the path fill on color scheme preference, is not in sync with the "do not respect" system setting of the toggle.
Manual toggle should override operating system preferences. This is correct behavior.
@@Gearyco the issue is that other elements using var(--white) respond to the toggle, and based on acss setting, do not respect os pref. Except when I use this CSS on the logo svg. The logo paths I want to toggle are classed in the SVG using the below...but this logo swap by os pref, while other elements using var(--white) do not. That's the inconsistency here. Using one svg and toggling the fill is efficient, one image, and DRY right up your alley, so I thought you'd be interested in looking at this method. But until then, the CSS targeting the SVG and acss variables doesn't behave the same as other elements using those acss vars that are dark mode responsive.
@media (prefers-color-scheme: light) {
%root%-words {
fill: var(--white) !important;
}
}
@media (prefers-color-scheme: dark) {
%root%-words {
fill: var(--black) !important;
}
}
in case anyone is wondering, with reference to this great video (and hopefully helps with acss dev or tutorials)... you can add a class into the SVG itself (I called it .cls-1 below). Then you can target the fill on paths of that class with CSS like this, and it works to toggle the logo in dark mode toggle:
html.color-scheme--alt %root% .cls-1 {
fill: var(--white) !important;
}
Or, event better, you can just reference the toggle directly by not including any media query, and just targeting the already dark mode function acss color tokens (neutral, white, and black)...
.your-logo-class .your-svg-color-class-you-want-to-swap {
fill: var(--white) !important;
}
I think the audio is not in sync with the video
hi Kevin, so Ive been trying to change my image between the 2 modes in html, i havent found any video help may you help me?
Ask in the inner circle and we can help you there. Too hard in RUclips comments
@@Gearyco so can I send you an Instagram text
Nice and short Kevin thankyou, is there a way I can use the acss alternate colours in response to another variable being set, say a country cookie.
JS to check the cookie value and add .color-scheme-alt to body class.
@@Gearyco This has been amazing and easy to implement thank you so much. Always appreciated Kevin
My version of ACSS doesnt have the option to add global css/ scss. Am I missing something?
3.0 this is all for i think
3.0 - watch the livestream from yesterday.
ruclips.net/video/NmuVHq-qYbc/видео.html
Nice and short. I was wondering what the other lines of CSS was for. Frames?
Controlling the icons in the toggle switch because they are custom icons and bricks really struggles to style certain kinds of SVGs
@Kevin Geary will this be a recipe in 3.0 ?? it whoul be really nice.
There will probably be a different or better way to manage it via the dashboard.
Call me crazy, but I actually insert the ACSS color variables inside the SVG code. That way, I just upload it, and it changes automatically. If some color needs to be changed inside the logo, I do ".color-scheme--alt %root% { --base: #fff; }" 😄
That will work for a single color logo or a very simple logo. But for a tutorial, I needed to show a method that would work for complex logos, and people who need to use a JPEG or PNG file for whatever reason.
@@Gearyco Yes, I agree. This was just the method I found and went with; definitely not the best.
4k is nice but the voice is not in sync with video. 😮
Yeah it’s slightly off