소낙눈 0

얼마 전에 알려드린 CTFT : 색 팔레트와 라이트/다크 변수 전환의 구문은

이미 :root에 대한 지식이 있거나 글 중간의 '왜 루트를 사용하나요' 부분을 읽었다면 비효율적으로 보일 겁니다.

동일한 효과를 가졌지만 '쉬운 이해와 빠른 구분성' 대신 '효율성'을 높인 심플한 형태의 구문을 보겠습니다.

말이 거창하죠. 배려가 필요 없는 사용자들을 위한 실전 압축형 변수 전환 팔레트라고 생각하세요.

먼저 :root { ··· } 에 라이트/다크 모드 둘 다 공통으로 사용할 색상을 선언합니다.

그리고 이와 동시에 전환이 필요한 색상도 선언합니다. 먼저 라이트 모드에서 사용할 색상으로 선언하세요.

공통으로 사용할 색상의 변수 이름과 전환이 필요한 색상의 변수 이름은 서로 겹쳐서는 안 됩니다.

:root {

    --공통색1: 색상;

    --공통색2: 색상;

    --전환색1: 색상;

    --전환색2: 색상;

}

그리고 이제 :root.darkmode { ··· } 에 다크 모드에서 사용할 색상만을 선언하면 완료됩니다.

:root { ··· } 에 선언했었던 전환이 필요한 색상의 변수 이름을 사용하고 색상 값만 다르게 선언하면 됩니다.

:root.darkmode {

    --전환색1: 색상;

    --전환색2: 색상;

}

그런데 왜 기존 글에서는 색 팔레트를 선언할 때 비효율적인 방법을 사용했을까요?

CTFT이지만 초보자도 컬러칩을 쉽게 선언할 수 있도록 구문을 직관적으로 이해할 수 있게 만들었기 때문입니다.

:root { ··· } 와 html { ··· } 의 구분과 설명을 통해

초보자도 간접적으로 :root 선택자에 대해 이해할 수 있고

html { ··· } 과 html.darkmode { ··· } 의 구분을 통해 

간접적으로 다크 모드 선택자를 사용하는 방법과 동시에 명시도 개념도 파악할 수 있습니다.

마지막으로 :root { ··· } 와 html { ··· }  그리고 html.darkmode { ··· } 의 구분을 통해

각각 공통/라이트/다크 모드 컬러칩을 쉽고 빠르게 구분할 수 있죠.

굳이 필요는 없겠지만 한 번 효율성도 비교해보겠습니다.

아래 두 형태의 코드는 :root 선택자에 따른 명시도 차이만 있을 뿐 서로 같습니다.

어라?

별 차이 없어 보이네?