dark mode

[KUKARAF]

optional dakrmode for the webapp. i cant use it that way without feeling like someone threw sand in my eyes.
I have taken the liberty to make a violentmonkey script that does it with some vibecoded css that MAY make this easier? i dont know. Frontend is black magic to me.

'''
// ==UserScript==
// @name WebTypist Dark Mode Toggle (Custom Palette)
// @Version 1.4
// @description Dark mode toggle button
// @match https://onedeadkey.github.io/webtypist/v2/*
// @grant none
// ==/UserScript==

(function () {
"use strict";

const style = document.createElement("style");
style.innerHTML = `
    /* Color palette */
    :root.darkmode {
        --bg-dark: #222831;
        --bg-mid: #393E46;
        --border: #948979;
        --text: #DFD0B8;
    }

    /* Core dark styling */
    html.darkmode, body.darkmode {
        background-color: var(--bg-dark) !important;
        color: var(--text) !important;
    }

    body.darkmode * {
        color: var(--text) !important;
    }

    /* Panels / containers */
    body.darkmode .navbar,
    body.darkmode .container,
    body.darkmode .card,
    body.darkmode #root,
    body.darkmode .main {
        background-color: var(--bg-mid) !important;
        border-color: var(--border) !important;
    }

    /* Inputs */
    body.darkmode input,
    body.darkmode textarea {
        background-color: var(--bg-mid) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

    /* Dropdowns */
    body.darkmode select {
        background-color: var(--bg-mid) !important;
        color: var(--text) !important;
        border: 1px solid var(--border) !important;
    }

    body.darkmode option {
        background-color: var(--bg-mid) !important;
        color: var(--text) !important;
    }

    /* Button */
    #darkmode-toggle {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 9999;
        padding: 8px;
        background: #393E46;
        color: #DFD0B8;
        border: 2px solid #948979;
        border-radius: 50%;
        cursor: pointer;
        font-size: 20px;
        height: 42px;
        width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #darkmode-toggle:hover {
        background: #222831;
    }
`;
document.head.appendChild(style);

// Create toggle button
const btn = document.createElement("button");
btn.id = "darkmode-toggle";
btn.innerText = "🌙";

btn.onclick = () => {
    const nowDark = document.body.classList.toggle("darkmode");
    document.documentElement.classList.toggle("darkmode");
    btn.innerText = nowDark ? "☀️" : "🌙";
};

document.body.appendChild(btn);

})();

'''

I am happy to try and help if you are overwhelmed or this is not a priority but my JS sucks to be frank