다크 모드

GitLab의 다크 모드 개발 방법과 CSS 커스텀 속성, SCSS 변수, 디자인 토큰을 활용한 구현 방식을 설명합니다.

이 페이지는 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 변형은 생성하지 않기 때문입니다.