8 replies · opened May 30, 2022
I have a light and dark logo and use adaptive-color-scheme to select between the two.
I am interested in utilizing the alternate logo code (logo-changer.html), but am unsure how to use with adaptive-color-scheme. Is there a way to use these two together?
[
](index.html)
[
](index.html)
Hello,
Currently, the Adaptive Color Scheme works only with Light/Dark Logos: data-dark-logo Attribute. The Sticky/Mobile Logos are currently not supported. We will sure work on including this feature in the next update. Meanwhile, you can consider using CSS to manipulate the Logo Visibility by using the .dark class. Example:
[ch_pre type="css"]body:not(.dark) .sticky-header #logo img.logo-sticky-dark {
display: none;
}
.dark .sticky-header #logo img.logo-sticky-dark {
display: block;
}[/ch_pre]
This is not tested completely but should work fine. You can further extend this using your codes.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I think I am missing something you may have intended for me to do. I now have the following code, but it is not working still.
body:not(.dark) .sticky-header #logo img.logo-sticky-dark {
display: none;
}
.dark .sticky-header #logo img.logo-sticky-dark {
display: block;
}
[
](index.html)
[
](index.html)
The following is a test link with same code.
https://www.aaronbonine.com/portfolio-birds2.html
Hello,
Thanks for your Patience!
We have tried testing the codes we had provided you with but unfortunately this is definitely not working as we had expected it to. We Really Apologize for the Inconveniences caused. Currently, making the Sticky/Mobile Logo work with Adaptive Color Scheme will require more Customization than we had thought earlier. Currently, only the Light/Dark Logos are compatible with the Adaptive Color Schemes. We will make this more seamless in the Future Updates and will send you a notification once this feature is available. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
For v7, it appears the logo-changer.html has 4 instances now and maybe could now support adaptive-color-scheme?
[
](index.html)
Any update to this?
Hello,
Yes!! Absolutely Possible!
/* For Adaptive Mobile Logo */
body.adaptive-color-scheme.dark:not(.is-expanded-menu) #logo [class^="logo-"] { display: none !important; }
body.adaptive-color-scheme.dark:not(.is-expanded-menu) #logo .logo-mobile-dark { display: flex !important; }[/ch_pre]
](index.html)
[/ch_pre]
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
The CSS worked, but I had to use the following to achieve still having not-dark functionality. Is this correct or is there more optimal method?:
[
](index.html)
Hello,
If you plan to use a different Sticky/Mobile Logo for Light Scheme too, you will then need to include the Light Versions as well. The above used code is correct and you can add any variations of this code according to your needs. The current Logo system was created with this flexibility in mind and the ability to handle different logos using CSS only.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you, this is what I have been looking for! Consider solved.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard