テーマスイッチャーコンポーネント

[deprecated]

Discourse コミュニティの皆様、こんにちは。

多くのリクエストにお応えし、私の Alien Night Theme からカプセル化されたテーマスイッチャーコンポーネントを共有します。
現時点では、ボタンを押すだけで、テーマがダークモード用のテーマに切り替わります。

将来的には、設定ページを実装して、テーマを切り替える際に使用する独自のグローバル CSS クラスを定義できるようにするかもしれません。
あるいは、ユーザーに選択を許可している最初の 2 つのテーマ間を切り替えるだけにするかもしれません。

インストールとダウンロード

プレビュー

フィードバックやご質問がございましたら、お気軽にお知らせください :slight_smile:

「いいね!」 23

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

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

「いいね!」 1

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

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!

「いいね!」 3

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

「いいね!」 5

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!

「いいね!」 11

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

I think this topic here is obsolete/redundant then :thinking:

「いいね!」 5

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.

「いいね!」 7

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

「いいね!」 2

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

「いいね!」 1

Good Morning @szergely
glad to hear you like it :slight_smile:

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 :slight_smile:

「いいね!」 3

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

「いいね!」 3

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

Hence the important notice that the preview link got updated:

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

「いいね!」 2

ウィキ化しましたので、もう更新できるはずです :hugs:

「いいね!」 5

サムのミニマルテーマでダークモードを使用すると、次のようになります:

また、代替ロゴを追加するための回避策はありますか?現在のロゴは暗い背景では読みづらいため、ダークモード用に反転したロゴを追加したいと考えています。

私のテーマにはハードコードされた色が多数含まれており、ライトカラーモードでのみ正しく機能します。この問題を修正する用意はありますが、現時点ではダークモードでは正しく動作しません。

「いいね!」 2

下部を小さくすることについてご意見はありますか?追加コンポーネントを使用すると、ヘッダーのスペースを多く取ってしまいます。例えば、このGhostテーマの右上にあるダークモードボタンが好きです:

これでもマテリアルデザインのテーマも使えますか?

プラグインをヘッダーからユーザーのドロップダウンパネルに移動させる方法はありますか?

簡単な方法はありません。新しいコンポーネントが必要です。

「いいね!」 1