Блог

Главная - Вопросы по программированию - Как создать условный цвет в scss или css reactjs

Как создать условный цвет в scss или css reactjs

#javascript #css #reactjs #sass

#javascript #css #reactjs #sass

Вопрос:

У меня есть css и scss-файл для моего проекта, я хочу изменить цветовую тему своих страниц с помощью localstorage

это файл css

 :root {
    --footerQuotesColor : yellow;
}
[data-theme="Light"] {
    --footerQuotesColor : red;
}
[data-theme="IGS"] {
    --footerQuotesColor : blue;
}
.footer-quotesColor {
    color: var(--footerQuotesColor);
}

Файл Scss

 $footerQuotesColor : yellow;
$footerQuotesColor : red;
$footerQuotesColor : blue;
.footer-quotesColor {
    color: $footerQuotesColor;
}

как я могу использовать это, чтобы изменить свой цвет, я не могу найти js сторону для изменения части

Комментарии:

1. Тематизация выполняется не только с помощью цветов. Вы должны определить иерархию классов CSS, которая будет адаптироваться к изменениям «класса темы» в самом верхнем элементе

Ответ №1:

В мире, отличном от reactjs, это можно просто сделать с помощью

 // 1. define theme, as a map of theme variable and value
const themeObject = {
  "Light": {
    '--footerQuotesColor': '#222',
    '--otherVariables': 'othercolor',
  },
  "IGS": {
    '--footerQuotesColor': '#DDD',
    '--otherVariables': 'othercolor',    
  },
};
// 2. Read theme from localstorage
const theme = localStorage.getItem('theme'); // read theme from localstorage
// 3. Apply theme to all variables
Object.keys(themeObject[theme]).map(themeVariable => {
  document.documentElement.style.setProperty('--footerQuotesColor', themeObject[theme][themeVariable]); // this is how you set CSS variables in JS
})

Для этого в React JS вы можете использовать стилизованные компоненты, и вот подход высокого уровня

  1. Шаги 1 и 2 одинаковы, вместо хранения переменных CSS в качестве ключей используйте имена свойств CSS
  2. Передайте тему в качестве контекста реакции в ваше приложение (https://reactjs.org/docs/context.html )
  3. Теперь внутри стилизованного компонента считайте тему из контекста и соответствующим образом устанавливайте стили.

Приятное чтение в журнале smashing

Метки: