다크 모드
이 페이지는 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 변형을 생성하고 싶지 않기 때문에,
우리는 SCSS 변수를 대체로 사용하고 여분으로 CSS 사용자 지정 속성을 사용합니다. 이는 우리가 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) in dark mode
// $gray-700 (#525252) in light mode
color: var(--gray-500, $gray-700);
우리는 계획으로 CSS 변수를 라이트 모드에 추가할 예정입니다. 그 때, SCSS 대체값을 위한 다른 값은 더 이상 동작하지 않을 것입니다.
도움말