Theme Switcher Component

[deprecated]

Hey Discourse Community,

after a lot of requests I share a Theme Switcher component, encapsulated from my Alien Night Theme.
For now, once pressed the button it will switch your theme into a dark mode theme.

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…

Installation & Download

Preview

If you have feedback or questions, just let me know :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: https://meta.discourse.org/t/header-theme-toggle/113496. 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:

https://github.com/B-iggy/discourse-theme-switcher/commit/b223cea92fee96ecd0760e0180e03841c79f010c

3개의 좋아요

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

3개의 좋아요

불행히도 맨 위에 있는 내 글을 수정할 수 없네요 :roll_eyes:

그래서 미리보기 링크가 업데이트되었음을 알리는 중요한 공지를 올립니다:

새 버전을 배포했는데, 일반적인 “최신 버전으로 업데이트” 기능이 깨져서 다시 설치했습니다 :roll_eyes:

2개의 좋아요

위키로 만들어 두었으니, 이제 업데이트할 수 있을 거예요 :hugs:

5개의 좋아요

샘의 미니멀 테마와 다크 모드를 함께 사용할 경우, 다음과 같이 보입니다:

그럼 대체 로고를 추가할 수 있는 우회 방법이 있을까요? 현재 로고가 어두운 배경에서 잘 보이지 않아서, 다크 모드용 반전 로고를 추가하고 싶습니다.

제 테마에는 하드코딩된 색상이 많아서 밝은 색 테마에서만 제대로 작동합니다. 이 문제를 수정할 의향이 있지만, 현재로서는 다크 모드에서 올바르게 작동하지 않습니다.

2개의 좋아요

하단 영역을 더 작게 만드는 것에 대한 의견이 있으신가요? 추가 구성 요소를 사용할 때 헤더에서 상당한 공간을 차지합니다. 예를 들어, 이 고스트 테마의 오른쪽 상단에 있는 다크 모드 버튼을 좋아합니다:

이것을 Material Design 테마에도 사용할 수 있나요?

플러그인을 헤더에서 드롭다운 사용자 패널로 이동할 수 있는 방법이 있나요?

단순한 방법은 없으며, 새로운 컴포넌트가 필요합니다.

1개의 좋아요