Как вызвать переменные для темного режима

Question

Здравствуйте, я хочу сделать темный режим для своего проекта Ioni c 3 Angular 5. Я сделал функции, которые меняют темы, как хотел.

Моя проблема в том, что переменные s css в моем файле ioni c .theme.dark s css внутри папки темы не применяются, например, $ background-color simple css правила применяются нормально. например, p {font-size: 40px}.

Я думаю, есть обходной путь, потому что когда я просто вызываю файл ioni c .theme.dark в файле variables.s css, не помещая его в класс, он работает нормально, но когда мне нужно позвонить темный режим внутри класса, например .dark-theme {@import "./ionic.theme.dark";} он вызывает только правила css, а не переменные

Например

.dark-theme{
    p{
      font-size:76px
     }

     $text-color:                 #fff !default;
     $link-color:                 color($colors, primary) !default;
     $background-color:           rgba(0,0,0,0.6) !important;
     $subdued-text-color:         #666 !default;
  }

p font-size работает, но $ background-color не работает, когда я теряю! По умолчанию во всех переменных. Есть идеи, почему?

Answer 1

Вы можете использовать медиа-запрос для достижения

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/@media / prefers-color-scheme