Задача: сделать на jQuery кнопку-переключатель тем - со светлой на тёмную.
на чистом JS работает, а на jQ не могу подобрать соответствующие функции.
всё, что мне надо, это
по первому клику добавить к html дата-атрибут data-theme='dark'. И
по второму клику - убрать атрибут. И так циклично.
не могу найти аналоги в jQuery для функций
hasAttribute, removeAttribute и setAttribute.
Пример переключения темы:
дальше весь код.
const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener('click', (e) => {
console.log("Switching theme");
if (document.documentElement.hasAttribute('theme')) {
document.documentElement.removeAttribute('theme');
}
else {
document.documentElement.setAttribute('theme', 'dark');
}
});
<nav class="navbar">Title</nav>
<div class="container">
<div>
<input type="button" value="Light/Dark" id="toggle-theme" />
<label for="darkness">
Darkness
</label>
</div>
<h2 class="title">What is Lorem Ipsum?</h2>
<p class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
</p>
</div>
<style>
:root {
--red-hue: 360;
--blue-hue: 240;
--green-hue: 120;
--main-hue: var(--red-hue);
--theme-darkness: 1;
--nav-bg-color: hsl(var(--main-hue), 50%, 50%);
--nav-text-color: hsl(var(--main-hue), 50%, 10%);
--container-bg-color: hsl(var(--main-hue), 50%, 95%);
--content-text-color: hsl(var(--main-hue), 50%, 50%);
--title-color: hsl(--main-hue, 50%, 20%);
--footer-bg-color: hsl(var(--main-hue), 93%, 88%);
--button-text-color: hsl(var(--main-hue), 50%, 20%);
filter: brightness(var(--theme-darkness));
}
:root[theme='dark'] {
--red-hue: 360;
--blue-hue: 240;
--green-hue: 120;
--main-hue: var(--blue-hue);
--theme-darkness: 1;
--nav-bg-color: hsl(var(--main-hue), 50%, 90%);
--nav-text-color: hsl(var(--main-hue), 50%, 10%);
--container-bg-color: hsl(var(--main-hue), 50%, 95%);
--content-text-color: hsl(var(--main-hue), 50%, 50%);
--title-color: hsl(--main-hue, 50%, 20%);
--footer-bg-color: hsl(var(--main-hue), 93%, 88%);
--button-text-color: hsl(var(--main-hue), 50%, 20%);
filter: invert(1) brightness(var(--theme-darkness));
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
nav {
background: var(--nav-bg-color);
color: var(--nav-text-color)
}
.container {
flex: 1;
background: var(--container-bg-color);
}
p.content {
color: var(--content-text-color)
}
.container h2.title {
color: var(--title-color)
}
</style>
