Composant de changement de thème

[B-iggy]

[déprécié]

Bonjour à la communauté Discourse,

suite à de nombreuses demandes, je partage un composant de changement de thème, encapsulé à partir de mon thème Alien Night.
Pour l’instant, une fois le bouton appuyé, il bascule votre thème vers un mode sombre.

Plus tard, je pourrai peut-être implémenter une page de paramètres où vous pourrez définir votre propre classe CSS globale dans laquelle votre thème devrait basculer.
Ou simplement basculer entre les deux premiers thèmes que vous avez autorisés pour les utilisateurs…

Installation et téléchargement

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

GitHub - B-iggy/discourse-theme-switcher: A free Theme Switcher Theme Component for...

Aperçu

'Discourse Theme Switcher' by @B-iggy

Si vous avez des retours ou des questions, faites-le-moi savoir

[Anatolia]

@B-iggy

Later on I can maybe implement a setting page, where you can define your own global CSS class your theme should switch into.
Or just toggle between the first two themes you allowed for users to choose from…

You can let admins select which themes they want to use. We have two different themes and each theme has it own dark mode.

@B-iggy

If you have feedback or questions, just let me know

When we click the switch to change light to dark, this component below should have change the logo’s color to light as the opposite. Now it doesn’t work with this switch.

https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502

[B-iggy]

@Anatolia

You can let admins select which themes they want to use. We have two different themes and each theme has it own dark mode.

B-iggy:

Ok, I’m not advanced in Discourse modding but I try to implement it.
Help from professional guys are appreciated @Johani

@Anatolia

When we click the switch to change light to dark, this component below should have change the logo’s color to light as the opposite. Now it doesn’t work with this switch.

Hmm, good point. Not sure how I can make a cross-component-compatibility-mode.
I’ll think about it.
Thanks for the first feedback so far!

[awesomerobot (Kris)]

Defining the themes in the settings is possible, but will complicate things. The hamburger menu theme selector is a good working example of how you’d change the theme based on ID.

https://github.com/discourse/discourse-hamburger-theme-selector/blob/master/common/header.html

[awesomerobot (Kris)]

I had some time tonight, so I worked on modifying the hamburger theme selector to toggle between two themes: Header Theme Toggle. Thanks so much for inspiring this with your theme @B-iggy!

[B-iggy]

Good Morning @awesomerobot ,
oh wow, that was quick
Much better than I could have done anyways.

I think this topic here is obsolete/redundant then

[awesomerobot (Kris)]

@B-iggy

I think this topic here is obsolete/redundant then

Not necessarily, there are some benefits of switching the CSS rather than switching the entire theme. Everything’s self contained and you don’t need to fully refresh for all the changes to take effect.

[Anatolia]

Your component might be better with some improvements. I hope you continue to develop

[szergely (Szergely Gergely)]

Awesome plugin! How can i force it to be in the first place (next to the search bar)?

[B-iggy]

Good Morning @szergely
glad to hear you like it

Instead of changing the code on your end I think it makes sense to have it next to the search icon per default.
So I pushed this change now. Let me know if it’s fine

Add the theme switch always next to the search icon

[szergely (Szergely Gergely)]

Yes now its there! Thank you for the fast support, i really like this light/dark button!

[B-iggy]

Unfortunately I can’t edit my own post at the top

Hence the important notice that the preview link got updated:

'Discourse Theme Switcher' by @B-iggy

I pushed a new version and the regular “Update to Latest” was broken, so I reinstalled it

[sam (Sam Saffron)]

C’est maintenant un wiki, vous devriez pouvoir le mettre à jour à présent

[jrgong]

Lorsque vous utilisez le mode sombre avec le thème minimaliste de Sam, cela donne ceci :

[jrgong]

Y a-t-il également une solution de contournement pour ajouter un logo alternatif ? Mon logo actuel n’est pas lisible sur un fond sombre, c’est pourquoi je souhaite en ajouter un inversé pour le mode sombre.

[sam (Sam Saffron)]

Mon thème contient de nombreuses couleurs en dur et ne fonctionne correctement qu’avec un schéma de couleurs clair. Je suis ouvert à la correction de ce problème, mais pour l’instant, il ne fonctionne pas correctement en mode sombre.

[jrgong]

Qu’en pensez-vous de réduire la taille du bas ? Lors de l’utilisation d’un composant supplémentaire, cela prend beaucoup de place dans l’en-tête. Par exemple, j’aime le bouton du mode sombre dans ce thème Ghost en haut à droite : https://liebling.eduardogomez.io/

[PatrickH (Patrick)]

Puis-je également l’utiliser pour le thème Material Design ?

[jrgong]

Y a-t-il un moyen de déplacer le plugin de l’en-tête vers le menu déroulant de l’utilisateur ?

[sam (Sam Saffron)]

Pas de façon simple, vous auriez besoin d’un nouveau composant.