Hangun's World – Blog

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

작성자

Hangun’s World

카테고리:

미디어 쿼리나 변수를 사용할 수 없어서 클래스로 구분을 해야 하는 경우에 사용할 수 있는 코드입니다.

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

$color-theme: (
    bg-color: (#fff, #333),
    txt-color: #000 #efefef,
    brd-color: #666
);
 
@mixin getColor($flag, $p, $n){
    @each $k, $v in $color-theme{
        @if($k == $n){
            @if(meta.type-of($v) == "list"){
                @if($flag == dark){
                    #{$p}: #{list.nth($v, 2)};
                }@else{
                    #{$p}: #{list.nth($v, 1)};
                }
            }@else{
                #{$p}: #{$v};
            }
        }
    }
}

@mixin parseList($flag, $pp...){
    $p: nth($pp, 1);
    @for $i from 1 through length($p){
        @if($i % 2 == 1){
            @include getColor($flag, #{nth($p, $i)}, #{nth($p, $i + 1)});
        }
    }
}

@mixin darkmode($path, $p...){
    @include parseList(light, $p);
    @at-root .darkmode #{$path}{
        @include parseList(dark, $p);
    }
}

.test .test2{
    margin:0 10px;
    border:1px solid;
    @include darkmode(&, color, txt-color, background-color, bg-color, border-color, brd-color);
}
.test .test2 {
  margin: 0 10px;
  border: 1px solid;
  color: #000;
  background-color: #fff;
  border-color: #666;
}
.darkmode .test .test2 {
  color: #efefef;
  background-color: #333;
  border-color: #666;
}

더 많은 게시물