다크/라이트 모드 전환

[Discourse]

이 테마 컴포넌트는 더 이상 사용되지 않습니다(deprecated). 자세한 내용은 Dark/light mode toggle now available in core 를 참조하세요.

	요약	Dark/Light Mode Toggle은 햄버거 메뉴에 클릭 가능한 색상 스킴 토글 버튼을 추가합니다. 이 토글은 한 테마에서 라이트 또는 다크 색상 스킴으로 전환합니다.
	리포지토리 링크	https://github.com/discourse/discourse-color-scheme-toggle
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 초보자 가이드

이 테마 컴포넌트 설치

이는 Discourse 팀이 유지 관리하는 official 테마 컴포넌트이므로, Support, Contribute > Bug, Contribute > UX, Contribute > Feature 요청은 Meta의 해당 카테고리에서 할 수 있으며, 적절한 테마 컴포넌트 태그가 지정됩니다. 아래 링크를 클릭하여 시작하세요.

 지원(Support)  버그(Bug)  UX  기능(Feature)

기능

이 컴포넌트는 Discourse 포럼에 다크/라이트 모드 토글 아이콘을 허용합니다. 또한 시스템 OS를 현재 색상 스킴과 다른 모드로 변경하면 자동으로 전환됩니다.

새로운 Discourse 사이드바에 토글을 표시하거나 다른 아이콘과 함께 헤더에 표시하도록 선택할 수 있습니다.

사이드바

헤더

중요한 단계

이것이 올바르게 작동하려면 /admin/customize/colors 영역에서 최소 2개의 색상 스킴 옵션이 활성화되어 있어야 합니다. 최소 두 가지 색상에 color scheme can be selected by users(사용자가 색상 스킴을 선택할 수 있음)가 활성화되어 있어야 합니다.

다크 모드를 위한 기본 색상 스킴이 설정되어야 합니다: /admin/site_settings/category/basic?filter=dark

이 작업이 완료되면 사용자는 사용자 설정 인터페이스 메뉴에서 light(라이트) 및 dark(다크) 설정으로 두 가지 색상 스킴 중 하나를 선택할 수 있어야 합니다.

설정

이름	설명
svg icons
add color scheme toggle to header	사이트 헤더에 색상 스킴 토글 버튼 추가

번역	기본값
toggle_button_title	색상 스킴 전환

우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

[chrisbagsrocks]

Does this only work with the user input via going to their preferences and enabling it? Would be a lot better if It could be a site wide implementation rather than on a user to user base.

[jordan.vidrine]

An admin would enable this component for the entire site.

From there, depending on what the admin who set up the component has set, the toggle will either be in the user hamburger menu, or on the header of the forum. All users can use this once it has been enabled by an admin.

[chrisbagsrocks]

Sorry, I don’t think I was clear with my question. By looking at your installation tutorial, After it is enabled on the admin side either in hamburger menu or on the header, it looks like each individual user has to go to their preferences and enable/add the light/dark color schemes. Otherwise it does not work for a new user / someone not logged in. So my question is:
Is it possible to implement the color scheme site wide rather than on a user-to-user basis.
Your photo is below for reference

[jordan.vidrine]

I believe a light scheme and dark scheme will be auto assigned once an admin enables it. From there, a user can edit which dark and light color schemes are used as their personal preference.

You may have to also add a selection here /admin/site_settings/category/basic?filter=dark

I have updated the instructions to reflect this addition. Sorry for the confusion!

[bekircem]

It seems doesn’t work correctly when the default color scheme is dark. How can we adapt this?

When the default color scheme is dark, toggle does not work unless a user has select light color scheme from the interface preferences.

[jordan.vidrine]

Hmmm, I believe this is happening because I am checking for prefers-dark user scheme settings based on the browser and system settings.

Can you look at your inspector console and see if anything is coming up when trying to use the toggle?

I may have to look into this.

[poyrazdursuncan (Dursun Can)]

Warnings at domain.com/logs ;

Dark-Light Toggle theme/component is throwing errors

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

Same here. Dark light component throwing errors.

[jordan.vidrine]

@poyrazdursuncan

Dark-Light Toggle theme/component is throwing errors

@Mr.X_Mr.X

Same here. Dark light component throwing errors.

Hmmm… not sure where that is coming from as I have no code that should send that out. The only communication I have for an error is here:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

Can you link to your site here if possible? Is your instance up to date?

[Arta_S (Arta)]

Hello,

I have an issue. After adding the theme, the toggle icons are not added in the hamburger menu. They dont even exist in bare code. Also you demo here the buttons dont work. meaning they dont switch between light and dark themes.

Anyone else having the same issue?

[jordan.vidrine]

Can you check the dev tools console and see if anything shows up related to this? I am seeing the icons work fine on the demo site.

[Arta_S (Arta)]

Here is the video:

My main issue is that on my forum, I don’t even see these options in hamburger menu:

[jordan.vidrine]

You do not have the console tab open in your screen cast, so it is hard to see if any errors are taking place.

Have you made sure to follow each step in the original post on this topic?

at least 2 color scheme choices need to be enabled in your /admin/customize/colors area
A dark theme needs to be enabled at: /admin/site_settings/category/basic?filter=dark

And do you, as a user, have two color schemes selected, one for light, and one for dark, in your user preferences?

[Arta_S (Arta)]

@jordan.vidrine

Have you made sure to follow each step in the original post on this topic?

Hello,

Yes this was correctly executed. Today everything is showing correctly. This was due to cookies. It was odd that on other browsers (where I never visited the forum) it was showing missing as well. Now everything is correct. Thank you and sorry for the confusion I’ve caused.

Only thing is, all users including guests can see the toggle on header. But as an admin when I am logged-in, I cannot see the toggles. Is this intentional? Could this be server cache or something?

[jordan.vidrine]

Hmm that’s interesting. Do you have a dark and light color scheme selected in your user preferences?

And are you using the theme that has the component installed?

[Arta_S (Arta)]

I had to go to my profile and enable this option (Enable automatic dark mode color scheme) so it can appear on header. probably I was fidgeting around and missed that checkbox.

[agungor]

I love this component! But, I am having a little issue.

It looks like the component only works when the “Enable automatic dark mode color scheme” option is enabled. My issue occurs when the option is enabled, and when the system preference is set to dark mode (i.e., preferred color scheme: dark).

In the scenario above, when I try to switch to a light theme vie Preferences > Interface > Theme, nothing happens, which is fine with me. Presumably, since my system preference is already set to dark mode, switching to light mode in Discourse does not override it.

When I do the same with the Dark / Light Mode Toggle component, and if my theme preference in Discourse is set to Light, the toggle actually lets me switch to light mode (which is even better in my view) but the site logo on the header remains in dark mode and hard to see in light mode. When I look in the inspector, I see the element looks like this:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

I noticed the media=“(prefers-color-scheme: dark)” part although we are now in light mode set by the toggle.

I should add that the site logo ordinarily switches fine between light and dark mode when the “Enable automatic dark mode color scheme” option in Discourse is unchecked. But, this prevents the Dark / Light Mode Toggle from being displayed

Also, if my theme preference in Discourse is set to Dark from Preferences > Interface > Theme, and my system preference is also dark, the toggle does not switch between light and dark—it always remains on the dark theme.

Ideally, I would prefer the Dark / Light Mode Toggle component to work the way it does now, but to make the site logo in the header follow the currently-active light/dark setting, not the user’s system preferred color scheme.

[MattiaB (Mattia)]

@agungor

When I do the same with the Dark / Light Mode Toggle component, and if my theme preference in Discourse is set to Light, the toggle actually lets me switch to light mode (which is even better in my view) but the site logo on the header remains in dark mode and hard to see in light mode.

Same here! Did you find a solution?

I’m no frontend developer but I did some debugging:
When in dark mode, like my computer is set to, the HTML for the logo looks like this:

And the logo looks fine, with dark mode fully working. When toggling to light mode, the theme goes light but the logo disappears (dark logo remains).

This is what the HTML looks like:

There is an additional line, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)"> which “blocks” the correct logo from loading. If I remove that line with Inspect Element, and only leave <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, the correct logo shows up.

I hope this info was useful.

[agungor]

@MattiaB

Same here! Did you find a solution?

I’m afraid not. I ended up changing the header background color in a way that switching the logo between light and dark mode no longer mattered