# 다크 모드 자동 지원하도록 테마 및 플러그인 업데이트 **URL:** \ **Category:** Developer Guides\ **Tags:** how-to, auto-dark, theme-guides\ **Created:** [8월 20, 2020, 10:29오후 UTC](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595 "2020-08-20T22:29:35Z")\ **Posts on this page:** 1\ **Showing post:** 1
**Author:** ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)\ **Post date:** [8월 20, 2020, 10:29오후 UTC](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595/1 "2020-08-20T22:29:35Z")
이전에는 Discourse의 모든 색상이 SCSS 변수로 저장되었습니다. [자동 다크 모드 색상 스킴 전환](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593)을 지원하기 위해 코어에서 이러한 색상을 커스텀 CSS 프로퍼티로 변환했습니다. 이제 인스펙터에서 전체 목록을 쉽게 확인할 수 있습니다: ![image](https://global.discourse-cdn.com/meta/original/4X/e/0/b/e0b7d84289dbbfe9dd3c53b934a51c60f05d8232.jpeg) 테마와 플러그인은 스타일시트에서 사용된 모든 `$color` SCSS 변수를 `--color` CSS 프로퍼티 대응 항목으로 전환해야 합니다. 대부분의 경우 이는 단순한 찾기 및 치환 작업입니다: ```diff - background-color: $primary-very-low; + background-color: var(--primary-very-low); ``` 그러나 테마나 플러그인이 SCSS 색상 함수를 사용하여 색상을 어둡게 하거나 밝게 하는 등 더 복잡한 색상 변형을 사용하는 경우가 있습니다. 이러한 경우 더 복잡한 리팩터링이 필요하며, 이를 위해 테마와 플러그인에서 색상 정의를 확장할 수 있는 기능을 추가했습니다. #### 플러그인에서 discourse-encrypt 플러그인의 [이 커밋](https://github.com/discourse/discourse-encrypt/commit/d8758ec7657ce073e6d42b30c4a7c5a2cd0ffeae)은 이러한 리팩터링의 우수하고 간단한 예시입니다. 이 커밋은 `mix($color1, $color2)` SCSS 선언을 별도의 파일로 이동시키고 이를 CSS 커스텀 프로퍼티로 저장합니다. 그런 다음 새 파일이 `:color_definitions` 자산으로 등록되어 새로 선언된 색상 프로퍼티가 색상 정의 스타일시트에 포함되도록 보장합니다. #### 테마에서 테마에서는 `common/color_definitions.scss` 스타일시트에 CSS 커스텀 프로퍼티를 선언하여 동일한 작업을 수행할 수 있습니다. 예시로 [graceful 테마의 이 커밋](https://github.com/discourse/graceful/commit/b44f048cd97bf33b8d3316974844476a25466ee0)을 참고할 수 있습니다. ### 추가 참고 사항 - `rgba($color, 0.5)` 함수를 통해 투명 색상을 사용할 때, SCSS는 첫 번째 매개변수로 HEX 및 RGB 색상을 허용하지만 CSS 커스텀 프로퍼티는 RGB 색상만 허용합니다. 이러한 이유로 색상 정의에 `hexToRGB()` 헬퍼와 `--rgb` 접미사가 붙은 일부 프로퍼티를 도입했습니다. 예시: ```scss // color_definitions.scss :root { --primary: #{$primary}; --primary-rgb: #{hexToRGB($primary)}; } // other stylesheet .element { background-color: rgba(var(--primary-rgb), 0.05); } ``` - 위 스니펫에서 SCSS 변수가 커스텀 프로퍼티로 전달될 때 보간(interpolation)된다는 점에 유의하세요. 이는 SCSS의 요구 사항이며, 자세한 내용은 [Sass: Property Declarations](https://sass-lang.com/documentation/style-rules/declarations) 를 참조하세요. - CSS의 `var()` 선언은 첫 번째 값이 사용 불가능한 경우 두 번째 값으로 폴백할 수 있습니다. 예를 들어 `var(--color1, red)`를 작성하면 `--color1` 프로퍼티가 발견되지 않으면 CSS가 빨간색으로 폴백합니다. 플러그인에서는 이전 버전의 Discourse와의 호환성을 보장하기 위해 SCSS 색상 변수를 폴백으로 사용합니다. 따라서 이전 예시는 폴백이 포함된 경우 다음과 같이 보입니다: ```diff - background-color: $primary-very-low; + background-color: var(--primary-very-low, $primary-very-low); ``` * * * 이 문서는 버전 관리됩니다 - [github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/20-dark-mode.md)에서 변경 사항을 제안하세요. --- _[View the full topic](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595)._