Встречается на собеседованиях • сегодня
Как сделать темизацию сайта
Для темизации сайта можно использовать CSS-переменные (Custom Properties) и менять их динамически через JavaScript.
- Определяем переменные в CSS:
css
:root {
--primary-color: #3498db;
--background: #ffffff;
--text-color: #333333;
}
[data-theme="dark"] {
--primary-color: #9b59b6;
--background: #222222;
--text-color: #ffffff;
}- Применяем переменные в стилях:
css
body {
background-color: var(--background);
color: var(--text-color);
}
button {
background-color: var(--primary-color);
}- Переключаем тему через JS:
javascript
document.querySelector('.theme-toggle').addEventListener('click', () => {
document.documentElement.toggleAttribute('data-theme');
});Альтернативы:
- Использование CSS-препроцессоров (SASS/LESS) с миксинами.
- Готовые библиотеки (styled-components, Emotion).
- Системный подход (CSS-in-JS, CSS Modules).
Для сохранения выбранной темы можно использовать localStorage.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы