Изменить стили на основе темного или светлого режима

Question

Я хочу, чтобы в моем приложении Vue была темная и светлая тема. Я могу создать dark.scss файл и изменить стили классов и использовать свойство !important для переопределения стилей, определенных в компонентах. Или я могу использовать props в своих компонентах и ​​изменить className на v-if в зависимости от темы. Например, установите класс className__light, когда тема светлая, в противном случае установите className__dark. какой из них лучше во всех ситуациях, таких как производительность или время, необходимое для этого?

Answer 1

Ну, я бы не стал делать это с классами. Я бы создал CSS переменные либо с S CSS, либо вы создали CSS переменные в :root

Если вы сделаете это с помощью метода :root, то это должно выглядеть примерно так:

:root {
   --background: red;
}

Затем вы можете получить к нему доступ в любом компоненте, например, так:

.class {
   background: var(--background); // the background will appear red
}

Теперь вы можете изменить цвет фона с помощью только 1 CSS переменных.

Чтобы изменить переменную с помощью Javascript, просто напишите следующее:

 root.style.setProperty('--background', "green");

Проблема в том, что она не поддерживается в IE, если вам нужна поддержка браузера. Таким образом, вы должны создать запасной вариант так:

.class {
   background: red; //fallback
   background: var(--background); // the background will appear red
}