# 라이트 모드와 다크 모드용 CSS를 올바르게 수정하는 방법
**URL:** https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647
**Category:** Development
**Created:** [7월 27, 2026, 8:36오후 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647 "2026-07-27T20:36:46Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [7월 27, 2026, 8:36오후 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647/1 "2026-07-27T20:36:46Z")
라이트 모드와 다크 모드를 위해 CSS를 많이 수정해야 합니다. 포럼에서 몇 가지 글을 읽어 봤는데, 이를 신뢰할 수 있는 방법이 없다고 하더군요. 예를 들면
> [@How to change css item based on dark or light mode?](https://meta.discourse.org/t/how-to-change-css-item-based-on-dark-or-light-mode/268631):
>
> I didn’t seem to find a definitive answer when searching, but I want to change a CSS item one way for dark, and another for light. What is the best way to accomplish this in Discourse?
하지만 이 글들은 대부분 오래되었습니다. 2026년에 쉬운 방법이 있을까요? 아래 코드를 테스트해 보았습니다.
```plaintext
@container style(--scheme-type: light) {
body {
background: #ffffff !important;
}
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
background: #000000 !important;
}
}
```
이것이 정확한지 확신은 없지만, 동작은 합니다.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 27, 2026, 9:30오후 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647/2 "2026-07-27T21:30:32Z")
컨테이너 쿼리는 동작하지만, 이를 단순화하기 위해 CSS의 네이티브 `light-dark()` 함수를 사용해도 됩니다:
```css
.my-thing {
background: light-dark(#fff, #000);
color: light-dark(#222, #eee);
}
```
일반적으로 Discourse에서는 이러한 방식으로 특정 색상을 설정하는 대신 자동으로 변경되는 색상 변수(`--primary`, `--secondary` 등)에 의존합니다. 이를 통해 어떤 색상 스킴에서도 색상이 올바르게 작동할 수 있습니다.
여기에서 몇 가지 예시를 볼 수 있으며, 다크/라이트 모드로 전환할 때 어떻게 변경되는지 확인할 수 있습니다: [Discourse Meta](https://meta.discourse.org/styleguide/atoms/colors) 이 변수들은 `/admin/config/colors`의 색상 팔레트로 설정됩니다.
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [7월 27, 2026, 9:33오후 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647/3 "2026-07-27T21:33:03Z")
멋지네요, 크리스. 정말 감사합니다. 참고로 그 링크가 작동하지 않아요.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [8월 26, 2026, 9:33오후 UTC](https://meta.discourse.org/t/correct-way-to-edit-css-for-light-and-dark-modes/408647/4 "2026-08-26T21:33:34Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.