Как использовать медиа-запрос и селекторы одновременно, используя s css? - PullRequest
Новая
       20

Как использовать медиа-запрос и селекторы одновременно, используя s css?

0 голосов
/ 17 февраля 2020

Итак, я создаю веб-приложение, которое поддерживает темный режим.

Если устройство по умолчанию предпочитает темный режим, оно будет использовать темный режим по медиазапросу @media (prefers-color-scheme: dark).

Но я также хочу иметь функцию, с помощью которой пользователи могут вручную переключаться в темный режим, добавляя атрибут к телу: data-theme="dark".

Итак, я попробовал это: 

// ...

.ChatScreen {
    background-color: #eee;
}

@media (prefers-color-scheme: dark), body[data-theme="dark"] {
    .ChatScreen {
        background-color: #000;
    }
}

Это дает мне эта ошибка при компиляции: 

Failed to compile.

./src/scss/app.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/scss/app.scss)
SassError: Invalid CSS after "...me: dark), body": expected "{", was '[data-theme="dark"]'
        on line 107 of src/scss/screens/_chat.scss
        from line 6 of /Users/****/src/scss/app.scss
>> @media (prefers-color-scheme: dark), body[data-theme="dark"] {

   -------------------------------------^

Как мне добиться этого без дублирования этих кодов?

1 Ответ

1 голос
/ 17 февраля 2020 
@media (prefers-color-scheme: dark) {
  body {
    &[data-theme="dark"] {
   .ChatScreen {
        background-color: #000;
    }
   }
  }
}

Вы можете посмотреть на sass mixins и определить свой темный стиль, а затем включить это правило, где вам нужно.

Редактировать 

@mixin dark-theme {
  .ChatScreen {
        background-color: #000;
    }
}

@media (prefers-color-scheme: dark) {
    @include dark-theme;
}

body {
    &[data-theme="dark"] {
        @include dark-theme;
   }
}
...