Different logos for light/black theme?

[djcyry (Cosmin)]

Hello ,
How can i add different logos for booth theme ?
I mean , for black theme a white logo (i have it already)
But for the light theme , a black logo ?

Black theme :

Light theme:

Also , is there any option to add a button for night/day mode in index , to change the theme ?

Thanks.

[riking (Kane York)]

Try changing the theme here - note that there’s a partial white background included in the logo. You could do the same with an off-black background.

edit: Screenshot

[djcyry (Cosmin)]

@djcyry

Also , is there any option to add a button for night/day mode in index , to change the theme ?

Ok , i will try with the photoshop (poor skills )
What about this :

Also , is there any option to add a button for night/day mode in index , to change the theme ?

[cpradio]

@djcyry

Also , is there any option to add a button for night/day mode in index , to change the theme ?

If you check the “Theme can be selected by users” checkbox in Admin > Customize, it will show up as a link in the Hamburger menu.

[djcyry (Cosmin)]

Yes i know .
But i want to add a float button on index to do that .
Its a bad idea ? Just ask . Thanks

[cpradio]

That could likely be done via a customization, but it would involve JavaScript and some CSS to style the button. Not sure how hard it would be to do, but I imagine it shouldn’t be terribly difficult as the themes should be exposed via the API.

[sam (Sam Saffron)]

I covered the technique here btw:

Allow users to select dark or light theme

This is actually pretty simple:

old method

.logo-big { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(awesome-dark-logo.png) no-repeat; width: 150px; height: 40px; padding-left: 150px; background-size: 150px 40px; } You basically evict the existing image out of the IMG tag

[n-b-sonar (Nicolas)]

Am getting reports on our instance that @sam techniques (css trick) no longer works, and instead leads to double logo:

Is this a regression ? Any recommendation to mitigate this ?

Thanks!

[david (David Taylor)]

The best method now is to use this theme component:

https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502?u=david

I will update the post you linked so it doesn’t confuse people in future.

[Johnny_McIvor]

مرحباً، هل هذا المكون الإضافي لا يزال متاحًا؟

[tim_sevDesk]

هل يوجد حاليًا حل لهذه المشكلة؟ الرابط لم يعد متاحًا يا @david.

[david (David Taylor)]

يمكنك الآن تحميل إصدارات “الوضع المظلم” لشعارك في إعدادات الموقع. ما عليك سوى التوجه إلى علامة التبويب “العلامة التجارية”، ثم التمرير لأسفل إلى “الشعار المظلم” و “الشعار الصغير المظلم”:

مزيد من المعلومات هنا:

Automatic Dark Mode color scheme switching

You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the try.discourse.org instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not enabled on meta.) Enabling automatic dark mode To enable this feature on your instance, you can pick the dark mode color scheme in your site settings: [image] Once that setting is set, you can reload your site with …