인프런 커뮤니티 질문&답변

안녕하세요, 퀘이사 다크 모드 사용과 관련하여 질문이 있어 글을 남기게 되었습니다.

퀘이사 Documentation을 보게 되면, 다크 모드를 토글했을 때 body에 .body--light / .body--dark가 변경되어 나타나기 때문에 이를 활용하여 모드 별 스타일링을 진행하는 것을 확인했습니다. 그런데 이 부분이 다소 불편하여 (혹은 제가 제대로 사용하지 못하고 있는 상황이라) 질문드립니다.

프로젝트를 진행하면서 css파일을 세분화시킬 필요성을 느끼고 있고, 이를 진행하고 있습니다.

특정 Vue 파일에서만 필요한 클래스에 대한 스타일링은 해당 Vue 파일의 <style scoped lang="sass">로 처리하고 있고, 범용적으로 쓰는 것들은 app.scss에서 관리하고 있습니다.

그런데 다크모드와 라이트모드일 때 scss 변수의 값이 달라지는데 이를 다른 scss파일에서 사용하는 데 문제가 있습니다.

다크모드와 라이트모드의 scss 파일의 내용 예시는 아래와 같습니다. 변수명은 같고 값만 다른 상황입니다.

// dark.scss
$color-text-primary: #ecf3f0;
$color-text-secondary: #c6cdc9;
...

// light.scss
$color-text-primary: #161816;
$color-text-secondary: #747676;
...

모드에 따라 달라지는 변수들을 적용하기 위해서 현재 제가 생각한 방식은 결국 색상 별 파일을 따로 분리하여 색상과 관련된 코드는 해당 부분에서 .body--dark, .body--light로 모든 클래스의 색상을 변경해야 되는 상황으로 이어져서 질문드립니다.

// dark-mode.scss
.body--dark {
   .border-bottom {
       ...
   }
}

// dark-mode.scss
.body--dark {
   .border-bottom {
       ...
   }
}

1. Quasar.variables에 $변수를 일괄적으로 등록하는 방법을 사용한다면, 모드 별 변수 명을 다 다르게 설정하고, .body--dark / .body--light에 각 클래스 별로 변수를 사용하는 방식을 진행해야 합니다. 모드 별로 변수명을 다르게 하는게 나을지, 아니면 같게 한 다음에 편하게 처리하는 방식이 있는지 궁금합니다.

2. 1번과 관련된 내용인 것 같습니다. 가능한 상황인지는 모르겠지만, quasar.variables.scss 등에서 isDark(다크모드여부)를 감지하여 $변수명: dark ? '#aaa' : '#000' 등으로 일괄 처리를 할 수 있는 방식은 없는지 알고 싶습니다.

3. css파일이 세분화됨에 따라서 만약 모드에 따른 $변수를 두 파일에서 나누어서 관리한다면, app.scss 등과 같이 해당 변수가 정의되어 있지 않는 곳에서 특정 변수 명을 사용한다면 모드에 따른 scss파일을 감지하는 방식이 있는지 궁금합니다.

감사합니다!!