이 페이지는 GitLab의 다크 모드 개발에 대한 내용입니다. 다크 모드를 활성화하는 방법에 대한 자세한 내용은 UI 외관 변경 방법을 참조하세요.

다크 모드 작동 방식#

현재 방식#

• GitLab UI에는 색상과 컴포넌트에 대한 라이트 및 다크 모드 디자인 토큰 CSS 커스텀 속성이 포함되어 있습니다. 디자인 토큰 기술 구현을 참조하세요.

• 시맨틱 디자인 토큰은 배경, 텍스트, 테두리 색상과 같은 일반적인 사용 사례에서 라이트 및 다크 모드 값을 제공합니다.

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

• 색상 팔레트용 SCSS 변수는 더 작은 크기에서 더 어두운 색상을 제공하기 위해 디자인 토큰을 사용하여 반전됩니다.

• app/assets/stylesheets/color_modes/_dark.scss는 색상에 대한 다크 모드 디자인 토큰 SCSS 변수를 임포트합니다.

• app/assets/stylesheets/framework/variables_overrides.scss에서 재정의된 Bootstrap 변수에는 _dark.scss에서 다크 모드 값이 지정됩니다.

• _dark.scss는 다크 모드 사용자 전용의 별도 application_dark.css 스타일시트를 생성하기 위해 application.scss 이전에 로드됩니다.

유틸리티 클래스#

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

CSS 커스텀 속성 vs SCSS 변수#

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

• CSS 커스텀 속성: 색상 모드별 스타일시트를 로드하지 않고 색상 모드를 업데이트하는 데 선호되며, app/assets/stylesheets/page_bundles 디렉터리 내의 모든 색상에 필수적입니다.

• SCSS 변수: 다크 모드에 대한 기존 색상 사용을 재정의하며 색상 모드별 스타일시트로 컴파일됩니다.

CSS 커스텀 속성 추가#

Tailwind 유틸리티나 기존 CSS 커스텀 속성으로 디자인 토큰을 사용할 수 없는 경우 맞춤형 CSS 커스텀 속성을 생성하세요. 프로젝트에서 CSS 커스텀 속성을 수동으로 추가하는 방법을 참조하세요.

페이지 번들#

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