How to Easily Swap Logos Between Dark & Light Mode (Bricks Builder)

Рет қаралды 3,720

2 ай бұрын

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-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

Пікірлер: 41

@davidwalls2304 2 ай бұрын

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.

@isaurasotoca 2 ай бұрын

It's amazing to start seeing 3.0 tutorials!!! 🥰 OMG, that SCSS panel will be really handy!!

@Jim.Hummel 2 ай бұрын

Well, that was easy! And thanks to ACSS and Bricks together with the Geary magic, it was! Thanks, Kevin!

@BGdev305 2 ай бұрын

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!

@Gearyco 2 ай бұрын

I like 93ish to really feel good. But yes, they’re coming to frames soon!

@AmandaLucaseu 2 ай бұрын

Great video Kevin 👌

@eucalyptech 2 ай бұрын

Great video, thank you Kevin !

@groundpets5101 2 ай бұрын

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

@chrisgreen5711 2 ай бұрын

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

@davidnickson5043 2 ай бұрын

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?

@Gearyco 2 ай бұрын

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.

@dahunsi 2 ай бұрын

Nice and short. I was wondering what the other lines of CSS was for. Frames?

@Gearyco 2 ай бұрын

Controlling the icons in the toggle switch because they are custom icons and bricks really struggles to style certain kinds of SVGs

@MrMrTyree 2 ай бұрын

Super practical. ❤ are you able to show a tutorial for a switching the logo on a sticky header? Either way drop 3.0 😂

@dahunsi 2 ай бұрын

I would love to see that too.

@BGdev305 2 ай бұрын

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.

@alfian_ridwan 2 ай бұрын

I think the audio is not in sync with the video

@jasongreenlees4478 2 ай бұрын

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.

@Gearyco 2 ай бұрын

JS to check the cookie value and add .color-scheme-alt to body class.

@jasongreenlees4478 2 ай бұрын

@@Gearyco This has been amazing and easy to implement thank you so much. Always appreciated Kevin

@JordanStambaugh1 2 ай бұрын

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?

@Gearyco 2 ай бұрын

When I use it, it switches itself

@Gearyco 2 ай бұрын

Have you cleared local storage?

@JordanStambaugh1 2 ай бұрын

@@Gearyco I think that was the issue. Cheers

@wingtracer 11 күн бұрын

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.

@Gearyco 11 күн бұрын

Sure just requires js

@wingtracer 11 күн бұрын

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.

@Gearyco 11 күн бұрын

Manual toggle should override operating system preferences. This is correct behavior.

@wingtracer 11 күн бұрын

@@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; } }

@wingtracer 11 күн бұрын

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; }

@StuartLowPhotography 2 ай бұрын

My version of ACSS doesnt have the option to add global css/ scss. Am I missing something?

@groundpets5101 2 ай бұрын

3.0 this is all for i think

@Gearyco 2 ай бұрын

3.0 - watch the livestream from yesterday.

@groundpets5101 2 ай бұрын

kzfaq.info/get/bejne/hNOliauikte9kpc.html

@johnysvitana5297 2 ай бұрын

@Kevin Geary will this be a recipe in 3.0 ?? it whoul be really nice.

@Gearyco 2 ай бұрын

There will probably be a different or better way to manage it via the dashboard.

@andredkvideo 2 ай бұрын

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; }" 😄

@Gearyco 2 ай бұрын

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.

@andredkvideo 2 ай бұрын

@@Gearyco Yes, I agree. This was just the method I found and went with; definitely not the best.