다크 모드
이 페이지는 GitLab의 다크 모드 개발에 관한 것입니다. 다크 모드를 활성화하는 방법에 대한 자세한 정보는 프로필 환경설정을 참조하세요.
다크 모드 작동 방식
- 색상 팔레트 값은 다크 모드 디자인 토큰을 사용하여 작은 스케일에 더 어두운 색상을 제공하기 위해 뒤집혀집니다.
-
app/assets/stylesheets/themes/_dark.scss는 색상을 위한 다크 모드 디자인 토큰 SCSS 변수를 가져옵니다. -
app/assets/stylesheets/themes/dark_mode_overrides.scss는 색상을 위한 다크 모드 디자인 토큰 CSS 사용자 지정 속성을 가져옵니다. -
app/assets/stylesheets/framework/variables_overrides.scss에서 재정의된 부트스트랩 변수는_dark.scss에서 다크 모드 값으로 제공됩니다. -
_dark.scss는 다크 모드 사용자를 위한 별도의application_dark.css스타일시트를 생성하기 위해application.scss보다 _먼저_로드됩니다.
SCSS 변수 대 CSS 사용자 지정 속성
디자인 토큰은 SCSS 변수 및 Dark 모드 스타일시트로 가져오는 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);
}
// 가능한 경우 피하세요
// 다크 모드에서 --gray-500 (#999)
// 라이트 모드에서 $gray-700 (#525252)
color: var(--gray-500, $gray-700);
우리는 라이트 모드에 CSS 변수를 추가할 계획입니다. 그렇게 되면 SCSS 폴백에 대한 다른 값은 더 이상 작동하지 않을 것입니다.
도움말