detect button:

themeBtn.addEventListener("click", () => {

Get main elements in Html:

const root = document.documentElement;

Checking the current theme:

const isDark = root.getAttribute("data-theme") === "dark";

change theme:

root.setAttribute(
    "data-theme",
    isDark ? "light" : "dark"
);

Add a pause:

setTimeout(() => {
    const active = document.querySelector(".nav-btn.active");
    if (active) updatePill(active);
}, 100);

Add a CSS:

:root {
    --bg: #f5f5f7;
    --text: #171717;
    --glass: rgba(255, 255, 255, 0.35);
    --glass-border: rgba(255, 255, 255, 0.45);
}

:root[data-theme="dark"] {
    --bg: #0b0c10;
    --text: #f5f5f7;
    --glass: rgba(30, 30, 35, 0.45);
    --glass-border: rgba(255, 255, 255, 0.15);
}

body {
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s ease, color 0.3s ease;
}

.navbar {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}