0

У меня есть компонент у которого возможно две темы и соответственно 2 различных css. Можно ли как-то изменять содержание styleUrls либо styles без перезагрузки страницы? Пробовал забивать в localStorage переменную с тем какая у меня будет тема и потом при загрузке компонента ставить определенную тему, но для этого нужна перезагрузка страницы.

Вот то что у меня получилось:

var theme = localStorage.getItem('color'); 
if(theme == "dark") 
 var color = require('../constructor/dark.bootstrap.min.css'); 
else 
 var color = require('../constructor/bootstrap.min.css'); 
var styles = require('./constructor_area.component.css'); 
@Component({ 
 selector: 'constructor-area', 
 templateUrl: './constructor_area.component.html', 
 styles: [styles, color] 
})
1
  • можно, средствами css, лучше всего эта задача решается через препроцессоры less или sass: .dark { // все нужные стили } .light {// все нужные стили} и в зависимости от темы добавляете нужный класс к body
    – MasterAlex
    12 янв 2017 в 22:22

1 ответ 1

1

Можно добавлять класс с название темы например к тегу html, а оба-двое файлов стилей построить в соответствии с этим. Т.е. примерно так:

default.theme.css

bg {
  background-color: #fff;
  color: #000;
}

dark.theme.css

html.dark bg {
  background-color: #444;
  color: #ff0;
}

*.html

<html>
....

<div class="bg">
  zsdfsadfsdf
</div>

по умолчанию - дефолтная тема, добавил класс dark к html - тёмная... Если использовать sass/less/stylus то будет наверно не слишком замороченно.

PS. возможно потребуется отключить инкапсуляцию дома в компоненте. encapsulation: ViewEncapsulation.None

PPS. разумеется цсс должны грузиться оба сразу чтобы переключаться

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.