이 페이지는 GitLab의 다크 모드 개발을 다룹니다. 다크 모드를 활성화하는 방법은 UI 외관 변경 방법을 참고합니다.

다크 모드 작동 방식#

현재 방식#

1. GitLab UI에는 색상과 컴포넌트를 위한 라이트 모드 및 다크 모드 디자인 토큰 CSS 커스텀 속성이 포함되어 있습니다. 디자인 토큰 기술 구현을 참고합니다.
2. 시맨틱 디자인 토큰은 배경, 텍스트, 테두리 색상과 같은 일반적인 용도에서 라이트 모드와 다크 모드의 값을 제공합니다.

더 이상 사용되지 않는 방식#

1. 색상 팔레트의 SCSS 변수는 더 작은 스케일에서 더 어두운 색상을 제공하도록 디자인 토큰을 사용해 반전됩니다.
2. app/assets/stylesheets/color_modes/_dark.scss는 색상을 위한 다크 모드 디자인 토큰 SCSS 변수를 임포트합니다.
3. app/assets/stylesheets/framework/variables_overrides.scss에서 재정의된 Bootstrap 변수에는 _dark.scss에서 다크 모드 값이 지정됩니다.
4. _dark.scss는 다크 모드 사용자 전용의 별도 application_dark.css 스타일시트를 생성하기 위해 application.scss보다 먼저 로드됩니다.

유틸리티 클래스#

다크 모드용 디자인 토큰은 Tailwind 클래스(gl-text-subtle)나 @apply 규칙(@apply gl-text-subtle)으로 적용할 수 있습니다.

CSS 커스텀 속성과 SCSS 변수 비교#

디자인 토큰은 CSS 커스텀 속성과 SCSS 변수를 모두 생성하며, 이들은 다크 모드 스타일시트로 임포트됩니다.

• CSS 커스텀 속성: 색상 모드 전용 스타일시트를 로드하지 않고 색상 모드를 갱신할 때 권장하며, app/assets/stylesheets/page_bundles 디렉터리 안의 모든 색상에는 필수입니다.
• SCSS 변수: 다크 모드에서 기존 색상 사용을 재정의하며, 색상 모드 전용 스타일시트로 컴파일됩니다.

CSS 커스텀 속성 추가#

Tailwind 유틸리티나 기존 CSS 커스텀 속성으로 디자인 토큰을 사용할 수 없을 때 별도의 CSS 커스텀 속성을 생성합니다. 프로젝트에서 CSS 커스텀 속성을 수동으로 추가하는 방법을 참고합니다.

페이지 번들#

다크 모드를 지원하려면 page_bundle 스타일에서 CSS 커스텀 속성을 사용해야 합니다. 각 page_bundle 파일의 별도 *_dark.css 변형은 생성하지 않기 때문입니다.