Hangun's World – Blog

Sass에서 다크모드 적용하기 2

작성자

Hangun’s World

카테고리:

Sass에서 다크모드 적용하기 에서는 IE에 대한 고려때문에 코드가 좀 복잡해졌는데, 이제 IE를 무시해도 될만하니, 좀 더 간단한 코드로 다시 작업해 봤습니다.
굳이 믹스인 사용하지 않고 변수만 정의해서 사용하면 됩니다.

@use "sass:meta";
@use "sass:list";

$color-theme: (
    bg-color: (#fff, #333),
    txt-color: #333 #eee,
    brd-color: #666,
);
 
:root{
    @each $k, $v in $color-theme{
        @if(meta.type-of($v) == "list"){
            #{"--" + $k}: #{list.nth($v, 1)};
        }@else{
            #{"--" + $k}: #{$v};
        }
    }
};

@media (prefers-color-scheme: dark){
    :root{
        @each $k, $v in $color-theme{
            @if(meta.type-of($v) == "list"){
                #{"--" + $k}: #{list.nth($v, 2)};
            }@else{
                #{"--" + $k}: #{$v};
            }
        }
    }
}
:root {
  --bg-color: #fff;
  --txt-color: #333;
  --brd-color: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333;
    --txt-color: #eee;
    --brd-color: #666;
  }
}

html, body {
  color: var(--txt-color);
  background-color: var(--bg-color);
}
 
.border {
  border: 1px solid var(--brd-color);
}

더 많은 게시물