다크 모드

이 페이지는 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_dark.css 스타일시트를 생성하기 위해 application.scss 이전에 로드됩니다.

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

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

  • SCSS 변수: 프레임워크, 구성 요소 및 유틸리티 클래스에서 사용되며 다크 모드의 기존 색상 사용을 오버라이드합니다.

  • CSS 사용자 정의 속성: app/assets/stylesheets/page_bundles 디렉토리 내의 모든 색상에 사용됩니다.

모든 page_bundle 파일에 대해 별도의 *_dark.css 변형을 생성하고 싶지 않기 때문에, SCSS 변수를 대체로 CSS 사용자 정의 속성을 사용합니다. 이는 우리가 page_bundles CSS를 생성할 때 _variables.scss에서 변수 값을 가져오기 때문에, 모든 SCSS 변수는 라이트 모드 값을 가집니다.

_dark.scss에 정의된 CSS 사용자 정의 속성은 브라우저에서 사용할 수 있으므로 다크 모드에 맞는 올바른 색상을 가집니다.

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

유틸리티 클래스

우리는 inverted values를 포함하는 유틸리티 클래스에 대해 별도의 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 폴백을 위한 다른 값은 더 이상 작동하지 않을 것입니다.