Hangun's World – Blog

블로그

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

    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);
}

  • 크롬 데브툴 필터링

    크롬에서 테스트 시 네트워크에 실제 확인하려는 데이터 외에 로그들이 많이 쌓이는 경우에 다음의 필터를 사용해서 불필요한 로그들을 안 보이게 설정할 수 있습니다.

    /^((?!(analytics|doubleclick|abcde)).)*$/

    콘솔에서 위의 정규식은 원하는 대로 작동하지 않아, 다음과 같이 설정해야 하네요.

    -mohlslive -facebook

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

    점점 다크모드를 적용하는 사이트들이 늘어나고 있는데, Sass를 사용하여 다크모드를 쉽게 적용할 수 있게 코드를 만들어 봤습니다.

    우선 일반 컬러 테마와 다크모드 테마를 $light-theme와 $dark-theme 맵에 각각 선언합니다. (4-13줄)
    그리고 위의 맵을 사용해서 CSS에서 var()를 사용하기 위한 변수를 선언하고, 미디어쿼리도 적용해 줍니다. (15-25줄)
    그러면 CSS의 1-13줄과 같이 변수가 생성됩니다.

    이제 본격적으로 믹스인을 생성합니다. (28-41줄)
    기본적으로 color-theme(key: value)의 형태로 한 개 이상의 키:밸류 쌍으로 된 속성을 전달할 수 있습니다. 그러나 border나 background 등과 같이 색상 이외에 다른 속성도 같이 설정할 필요가 있는 경우에 color, prefix, suffix의 속성을 가진 맵을 사용할 수 있습니다.

    43-53줄과 같이 믹스인을 사용하면 CSS의 14-29줄에 해당하는 코드를 생성합니다.
    같은 속성이 두 개씩 만들어 지는 것은 CSS의 변수나 미디어쿼리를 지원하지 않는 구형 브라우저에서는 첫 번째 속성의 컬러를 사용하고, 지원하는 브라우저는 변수와 미디어쿼리가 적용되도록 하기 위해서 입니다.
    IE와 같은 구형 브라우저를 지원할 필요가 없다면 31, 37줄의 코드는 삭제하면 됩니다.

    @use "sass:map";
@use "sass:meta";

$light-theme: (
    bgc: #fff,
    txt: #333,
    brd: #ff6
);
$dark-theme: (
    bgc: #333,
    txt: #eee,
    brd: #339
);

:root{
    @each $k, $v in $light-theme{
        #{"--" + $k}: #{$v};
    }
}
@media (prefers-color-scheme: dark){
    :root{
        @each $k, $v in $dark-theme{
            #{"--" + $k}: #{$v};
        }
    }
}

@mixin color-theme($args...){
    @each $k, $v in meta.keywords($args){
        @if(meta.type-of($v) == "string"){
            #{$k}: map.get($light-theme, $v);
            #{$k}: #{"var(--" + $v + ")"};
        }@else if(meta.type-of($v) == "map"){
            $c: map.get($v, color);
            $p: map.get($v, prefix);
            $s: map.get($v, suffix);
            #{$k}: $p map.get($light-theme, $c) $s;
            #{$k}: $p #{"var(--" + $c + ")"} $s;
        }
    }
}

html, body{
	@include color-theme($color: txt, $background-color: bgc);
}

.border{
	@include color-theme($border: (prefix: 1px solid, color: brd));
}

.background{
    @include color-theme($background: (color: bgc, suffix: url(bg.jpg) no-repeat 50% 50%));
}
    :root {
  --bgc:#fff;
  --txt:#333;
  --brd:#ff6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bgc:#333;
    --txt:#eee;
    --brd:#339;
  }
}
html, body {
  color: #333;
  color: var(--txt);
  background-color: #fff;
  background-color: var(--bgc);
}

.border {
  border: 1px solid #ff6;
  border: 1px solid var(--brd);
}

.background {
  background: #fff url(bg.jpg) no-repeat 50% 50%;
  background: var(--bgc) url(bg.jpg) no-repeat 50% 50%;
}

  • iPadOS 13에서 마우스 연결 시 키보드 입력 문제

    iPadOS 13으로 업데이트 후에 마우스를 연결해서 사용할 수 있게 되었습니다.

    설정 > 손쉬운 사용 > 터치 > AssitiveTouch > AssitiveTouch 를 활성화한 후,
    포인터 기기 영역의 “기기”로 들어가서 블루투스 마우스를 연결해 주면 됩니다.

    그런데 이렇게 설정하면 스마트키보드를 사용할 대 일부 키가 AssitiveTouch 포인터 제어로 매핑이 되어 입력이 되지 않는 문제가 발생합니다.

    설정 > 손쉬운 사용 > 터치 > AssitiveTouch > 마우스 키로 가면 “마우스 키”가 기본으로 활성화 되어 있어서 생기는 문제로, 이를 비활성화 해주면 키보드가 정상으로 입력 가능해 집니다.

  • 콘솔에서 VUE 객체 사용하기

    전에 콘솔에서 AngularJs의 스코프에 접근하기 위한 코드를 올렸는데, 이번에는 VUE에서 내부 객체에 접근하기 위한 방법입니다.
    다음과 같이 __vue__ 를 참조하여 VUE 객체에 접근이 가능합니다.

    var myVue1 = document.getElementById("myVueId").__vue__
var myVue2 = document.getElementsByClassName("myVueClass")[0].__vue__;

    아래 포스트와 같이 Custom JavaScript를 사용하면 더욱 쉽게 디버깅 할 수 있습니다.
    크롬에서 cjs로 AngularJS 디버깅하기