Toggle dark mode on link

See the little dark mode button in the lower right corner? On pressing this button the web page toggles dark mode including SVG images (if it is not fixed in your browser / system settings). The functionality is provided by a piece of JS code.

If I wanted to do the same on a linked text like <a id="dark-mode-toggle" class="colorscheme-toggle">TOGGLE!</a> it wouldn’t work because the id of the related JS code cannot be re-used (DOM¹ violation). It must be unique²! As a workaround we have to create a new id by copying the JS code and assigning it to a new DOM variable.

const darkModeToggleLink = document.getElementById('dark-mode-toggle-link'); // new id
if (darkModeToggleLink) { // new var
    darkModeToggleLink.addEventListener('click', () => { // new var
        let theme = body.classList.contains("colorscheme-dark") ? "light" : "dark";
        setTheme(theme);
        rememberTheme(theme);
    });
}

So, in this case, the code for the dark mode button was copied from the theme’s coder.js into assets/js/custom.js and modifications to the names (“Link” and “-link” added) were made. This allows using the new id="dark-mode-toggle-link" to switch dark mode on a linked text:
Try it!

Finally, however, I settled with a button for the same functionality, replacing <a> with <button>. It is more obious than the link and clearer what to do with it.