다크 모드

이 페이지는 GitLab의 다크 모드를 개발하는 내용입니다. 다크 모드를 활성화하는 방법에 대한 자세한 정보는 프로필 환경설정을 참조하세요.

다크 모드 작동 방식

  1. 색상 팔레트 값은 디자인 토큰을 사용하여 더 작은 규모에 더 어두운 색상을 제공하기 위해 뒤바뀝니다.
  2. app/assets/stylesheets/themes/_dark.scss는 다크 모드에 대한 디자인 토큰 SCSS 변수를 가져옵니다.
  3. app/assets/stylesheets/themes/dark_mode_overrides.scss는 다크 모드에 대한 디자인 토큰 CSS 사용자 정의 속성을 가져옵니다.
  4. app/assets/stylesheets/framework/variables_overrides.scss에서 재정의된 Bootstrap 변수는 _dark.scss에서 다크 모드 값을 받습니다.
  5. _dark.scss가 application.scss보다 먼저 로드되어 다크 모드 사용자 전용의 application_dark.css 스타일시트를 생성합니다.

SCSS 변수 vs CSS 사용자 정의 속성

디자인 토큰은 다크 모드 스타일시트에 가져온 SCSS 변수와 CSS 사용자 정의 속성 둘 다 생성합니다.

  • SCSS 변수: 프레임워크, 컴포넌트 및 유틸리티 클래스에서 사용되며 다크 모드를 위해 기존 색상 사용을 재정의합니다.
  • CSS 사용자 정의 속성: app/assets/stylesheets/page_bundles 디렉토리 내의 모든 색상에 사용됩니다.

page_bundle 파일의 각각에 대해 별도의 *_dark.css 변형을 생성하고 싶지 않기 때문에, 우리는 CSS 사용자 정의 속성에 SCSS 변수를 폴백으로 사용합니다. 이는 page_bundles CSS를 생성할 때 우리가 변수값을 _variables.scss에서 얻기 때문에, 어떤 SCSS 변수든지 밝은 모드 값이기 때문입니다.

_dark.scss_에 정의된 CSS 사용자 정의 속성은 브라우저에서 사용 가능하기 때문에, 다크 모드에 대한 올바른 색상이 있습니다. 

color: var(--gray-500, $gray-500);

유틸리티 클래스

반전된 값이 포함된 유틸리티 클래스용 별도의 utilities_dark.css 파일을 생성합니다. 따라서 gl-text-white와 같은 클래스는 다크 모드에서 #333의 텍스트 색상을 지정합니다. 이는 모든 색상을 추가할 때마다 여러 클래스를 추가할 필요가 없다는 의미입니다.

현재, 우리는 다크 모드에서만 유틸리티 클래스를 설정할 수 없습니다. 곧 그 문제에 대응할 계획입니다. 이슈입니다.

밝은 모드와 다크 모드 간에 다른 값 사용하기

대부분의 경우, 밝은 모드와 다크 모드에 동일한 값을 사용할 수 있습니다. 그게 불가능한 경우, 다크 모드가 body에 추가하는 .gl-dark 클래스를 사용하여 오버라이드를 추가할 수 있습니다: 

color: $gray-700;
.gl-dark & {
  color: var(--gray-500);
}

참고: SCSS 폴백값을 다르게 사용하는 것은 피하세요 

// 가능하다면 피하세요
// 다크 모드에서 --gray-500 (#999)
// 밝은 모드에서 $gray-700 (#525252)
color: var(--gray-500, $gray-700);

우리는 이슈에 CSS 변수를 밝은 모드에 추가할 계획입니다. 그렇게 되면, SCSS 폴백값을 다르게 사용하는 것은 더 이상 작동하지 않을 것입니다.