다크 모드를 확인하는 데 여전히 이 방법이 맞나요?

david · 2월 20, 2025, 5:31오후

Coincidently, this is something we’ve been discussing internally this week! Couple of proof-of-concept PRs are here:

DEV: Introduce `html.dark-mode` and `html.light-mode` classes by davidtaylorhq · Pull Request #31397 · discourse/discourse · GitHub
DEV: Add reactive helpers to `interfaceColor` service by davidtaylorhq · Pull Request #31415 · discourse/discourse · GitHub

Note these are just experiments to help with our thinking - there’s no guarantee either will be merged.

As for ‘right now’, the best bet is probably to use the <LightDarkImg component like this:

app/assets/javascripts/discourse/app/components/category-logo.gjs

a26138b50


      
          const CategoryLogo = <template>
            <div class="category-logo aspect-image">
              <LightDarkImg
                @lightImg={{@category.uploaded_logo}}
                @darkImg={{@category.uploaded_logo_dark}}
              />
            </div>
          </template>;

글		댓글	조회수
How to add a specific body class for the dark (or light) mode? Support	12	3942	3월 7, 2022
Is there a way to detect dark mode usage? Development	3	1789	4월 16, 2023
No specific class for dark mode Development css	4	826	2월 13, 2023
How to change css item based on dark or light mode? Development	11	2497	6월 18, 2023
How to control if a color scheme gets the dark or the light logo? Support	16	1705	8월 26, 2023

다크 모드를 확인하는 데 여전히 이 방법이 맞나요?

Related topics