Javascript-форум - data атрибуты

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - data атрибуты - из JS в jQuery (https://javascript.ru/forum/events/82255-data-atributy-iz-js-v-jquery.html)

data атрибуты - из JS в jQuery

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

tp-20,
Атрибуты и .is()

tp-20,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $("#toggle-theme").on("click", function() {
                $("html").is("[theme]") ? $("html").removeAttr("theme") : $("html").attr("theme", "dark")
            })
        });
    </script>
</head>
<body>
    <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>
</body>
</html>