다크 모드
이 페이지는 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에서 다크 모드 값을 받습니다. - 다크 모드 사용자 전용으로 별도의
application_dark.css스타일시트를 생성하기 위해_dark.scss가application.scss보다 먼저 로드됩니다.
SCSS 변수 대 CSS 사용자 지정 속성
디자인 토큰은 다크 모드 스타일시트로 가져오는 SCSS 변수와 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의 텍스트 색상을 지정합니다. 이는 색상을 추가할 때마다 여러 클래스를 추가할 필요가 없다는 것을 의미합니다.
현재, 우리는 다크 모드에서만 유틸리티 클래스를 설정할 수 없습니다. 이 문제를 곧 해결하길 희망합니다. issue
라이트 모드와 다크 모드 간의 다른 값 사용
대부분의 경우, 라이트 모드와 다크 모드에 같은 값을 사용할 수 있습니다. 그렇지 않은 경우, 다크 모드가 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 폴백에 대해 다른 값을 사용하는 것이 더 이상 작동하지 않을 것입니다.
도움말