[tp-20]

Задача: сделать на 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>