Измените тему с помощью переменной CSS и tinyColor.js

В этой статье мы поговорим о том, как изменить значение переменной внутри корневого элемента с помощью JavaScript.

Исходный код:



Курс CSS
Каскадные таблицы стилей, также известные как CSS, являются одной из важных технологий Всемирной паутины (WWW). CSS — это…www.udemy.com



Мы создали index.html в предыдущем проекте.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>CSS variables</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda magnam fugit, tempora mollitia harum quas, magni nam repellendus veniam at atque dolore similique rem soluta tenetur inventore, animi non? Eveniet.</p>
<button>Submit</button>
<h2>CSS variables</h2>
<p class="lorem">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda magnam fugit, tempora mollitia harum quas, magni nam repellendus veniam at atque dolore similique rem soluta tenetur inventore, animi non? Eveniet.</p>
<button>Submit</button>
<div class="colors">
<div style="background-color: green;"></div>
<div style="background-color: blueviolet;"></div>
</div>
</div>
<script src="colors"></script>
</body>
</html>

Мы создали цвет темы светло-голубым, а основной цвет — синим.

Установите цвет текста контейнера в качестве цвета темы, цвет фона — белый.

Использование цвета темы в качестве цвета кнопки

:root{
--theme-color:lightblue;
--primary-color:blue;
}
body{
background-color: var(--theme-color);
}
.container{
color:var(--theme-color);
background-color: white;
padding: 30px;
}
.lorem{
color:var(--primary-color);
}
button{
background-color: var(--primary-color) ;
color:white;
border: none;
padding: 10px;
}
.colors div{
margin-top: 10px;
display: inline-block;
height: 20px;
width: 20px;
cursor: pointer;
}

Мы создаем две кнопки для изменения цвета.

<div class="colors">
<div style="background-color: green;"></div>
<div style="background-color: blueviolet;"></div>
</div>

Использование JavaScript

Мы создаем файл colors.js, а затем ссылаемся на него в html-файле, до конца тела.

Связанный курс:



Пройти курс Modern JavaScript Firebase BootCamp для начинающих
Он является зарегистрированным учителем, который имеет опыт преподавания JavaScript, физики, математики и статистики более 10 лет…www. udemy.com



<div style="background-color: green;"></div>
<div style="background-color: blueviolet;"></div>
</div>
</div>
<script src="tinycolor.js"></script>
</body>

Получаем цвета и корень. Мы используем querySelectorAll для выбора более одного div.

Мы также захватываем корневой элемент, чтобы мы могли изменить значения переменных.

Затем мы добавляем прослушиватель onclick к цвету, чтобы изменить цвет, мы можем использовать setProperty.

Теперь мы используем значение свойства backgroundColor, чтобы переопределить основной цвет.

var colors = document.querySelectorAll('.colors div');
var root = document.querySelector(':root');
console.log(colors);
colors.forEach(color=>{
color.addEventListener('click',e=>{
root.style.setProperty('----primary-color',e.target.style.backgroundColor)
})
})

Чтобы затемнить или осветлить цвет, чтобы сделать его вторичным цветом или другим цветом, мы можем сделать это с помощью TinyColor.



bgrins/TinyColor
TinyColor — это небольшая и быстрая библиотека для работы с цветами и их преобразования в JavaScript. Он допускает множество форм ввода…github.com



Скачиваем его как tinycolor.js

<div style="background-color: blueviolet;"></div>
</div>
</div>
<script src="tinycolor.js"></script>
<script src="colors.js"></script>
</body>

Назад к цветам.js

Мы можем осветлить цвет как вторичный, сказав

root.style.setProperty('--secondary-color',tinycolor(e.target.style.backgroundColor).lighten().toString());

или затемните цвет как цвет темы, сказав

root.style.setProperty('--theme-color',tinycolor(e.target.style.backgroundColor).darken().toString())

Мы также можем использовать случайный цвет в качестве цвета темы, например

root.style.setProperty('--theme-color',tinycolor.random())

Полный код colors.js

colors.forEach(color=>{
color.addEventListener('click',e=>{
root.style.setProperty('--primary-color',e.target.style.backgroundColor)
root.style.setProperty('--secondary-color',tinycolor(e.target.style.backgroundColor).lighten().toString());
// root.style.setProperty('--theme-color',tinycolor(e.target.style.backgroundColor).darken().toString())
root.style.setProperty('--theme-color',tinycolor.random())
}

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.