안녕하세요 일루넥스 개발팀 이수현입니다.
저번 Sass 소개에 이어 테마에 따라 스타일을 변경하는 법을 기술해보겠습니다.
저번 Sass 글에서도 언급했듯이, 일루넥스의 깃발 투자자 서비스는 기본적으로 다크모드입니다.
그러나 다크모드에 익숙하지 않은 사용자들의 편의를 위해 라이트 모드 또한 지원하여 사용자가 직접 테마를 선택할 수 있도록 했습니다.
Gitbal Light Mode
Gitbal Dark Mode
1. 변수 정의
모드에 따라 변경 되는 색상을 변수로 설정하되, CSS var() 함수를 사용하여 정의합니다.
CSS var() 함수는 Sass의 변수와 같은 역할을 하는 함수로 재사용할 임의의 값을 담을 수 있습니다.
Sass 변수에 직접 색상 코드를 입력할 경우 모드에 따라 변수의 색상을 변경하지 못합니다.
따라서 CSS var() 함수를 사용하여 모드에 따라 변경되는 색상 값을 변수에 넣어줍니다.
$font-color: var(--font-color);
$error-color: var(--error-color);
$background-color: var(--background-color); 다만 var() 함수는 IE에서 제공하지 않으므로 다른 방법을 사용해야 합니다.
2. 각 테마에 따른 색상 코드 Map 생성
CSS var() 함수에 테마에 따라 넣어줄 색상코드를 설정해야합니다.
$config: (
dark: (
font: #fff,
error: yellow,
background: #000
),
light: (
font: #000,
error: red,
background: #fff
)
); 3. html class 이름 부여
최상단 html에 테마를 구분해줄 class를 만듭니다.
gitbal에서는 dark-mode, light-mode로 테마를 구분합니다. @each를 사용해서 class의 dark, light를 @mixin, 함수에 사용될 key로 사용할 수 있도록 합니다.
@each를 사용해 html의 class에 따라 @mixin theme()의 인수를 결정할 수 있도록 합니다.
예를 들어 html의 class가 “dark-mode”인 경우 @mixin theme(dark)가 됩니다.
@each $theme in dark, light{
html.#{$theme}-mode{
@include theme($theme);
}
} 4. 색상을 불러올 @mixin, @function 생성
map-get은 Map에서 특정 key의 value를 반환합니다.
앞서 @each를 통해 받은 @mixin theme()이 setStyle()의 첫번째 key가 됩니다.
첫번째 map-get은 해당 key를 사용하여 dark, light에 해당되는 색상map을 value로 가져옵니다.
이어 setStyle()에 사용된 3번째 인자가 색상 map의 key가 되어 색상값을 가져옵니다.
예를 들어 html class가 “dark-mode”일 경우 @mixin theme()의 key가 dark가 되어 —font-color: #{setStyle($config, dark, font)};가 됩니다. setStyle()에 따라
$config map에서 dark에 해당하는 색상 map을 가지고 옵니다.
그리고 그 중 font의 색상을 가져와 —font-color라는 CSS var() 함수에 넣어줍니다.
결국 dark 모드 일때 변수 $font-color는 #fff가 됩니다.
@function setStyle($map, $object, $style) {
@if map-has-key($map, $object) {
@return map-get(map-get($map, $object), $style);
}
@warn "The key ´#{$object} is not available in the map.";
@return null;
}
@mixin theme($key){
--font-color: #{setStyle($config, $key, font)};
--error-color: #{setStyle($config, $key, error)};
--background-color: #{setStyle($config, $key, background)};
} 마치며
이렇게 Sass의 다양한 기능들을 활용해서 테마를 변경하는 방법을 알아보았습니다.
간단하게 변수의 값만으로도 프로젝트의 색상을 한 번에 유지, 보수 할 수 있을 뿐만 아니라
html class 변경만으로도 프로젝트 전체의 테마를 변경할 수 있게 되었습니다.
또한 추후 다크나 라이트 모드 외에 또다른 테마를 작성할 때도 쉽게 추가할 수 있게 되었습니다.
다만 추후 오픈할 IE에서의 깃발을 위해 또 다른 방법이 필요할 수도 있을 것 같습니다.
