Repository: eslint/eslint
File: docs/src/assets/js/themes.js (JavaScript)

Code before:
/* theme toggle buttons */
(function () {
    var enableToggle = function (btn) {
        btn.setAttribute("aria-pressed", "true");
    }
    var disableToggle = function (btns) {
        btns.forEach(btn => btn.setAttribute("aria-pressed", "false"));
    }
    var setTheme = function (theme) {
        if (theme === "system") {
            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
            document.documentElement.setAttribute('data-theme', theme);
            window.localStorage.setItem("theme", "system");
        } else {
            document.documentElement.setAttribute('data-theme', theme);
            window.localStorage.setItem("theme", theme);
        }
    }

    var theme = window.localStorage.getItem("theme");

    document.addEventListener('DOMContentLoaded', function () {
        var switcher = document.getElementById('js-theme-switcher');
        switcher.removeAttribute('hidden');
        var light_theme_toggle = document.getElementById('light-theme-toggle'),
            dark_theme_toggle = document.getElementById('dark-theme-toggle'),
            system_theme_toggle = document.getElementById('system-theme-toggle');

        if (!theme || theme === "system") {
            enableToggle(system_theme_toggle);
            disableToggle([light_theme_toggle, dark_theme_toggle]);
        } else if (theme === "light") {
            enableToggle(light_theme_toggle);
            disableToggle([system_theme_toggle, dark_theme_toggle]);
        } else if (theme === "dark") {
            enableToggle(dark_theme_toggle);
            disableToggle([system_theme_toggle, light_theme_toggle]);
        }

        light_theme_toggle.addEventListener("click", function () {
            enableToggle(light_theme_toggle);
            theme = this.getAttribute('data-theme');
            setTheme(theme);

Review comment (bug):
[Refactor] I think this function can be simplified, since the `setAttribute` call happens no matter what, and the `setItem` call is always done with the original value of `theme`?

```suggestion
    var setTheme = function (theme) {
        window.localStorage.setItem("theme", theme);
        if (theme === "system") {
            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
        }
        document.documentElement.setAttribute('data-theme', theme);
    }
```

I suspect this idea can be applied to more code later on - but haven't looked too closely myself, per the bug.

Code after:
(function () {
    var enableToggle = function (btn) {
        btn.setAttribute("aria-pressed", "true");
    };

    var disableToggle = function (btns) {
        btns.forEach(btn => btn.setAttribute("aria-pressed", "false"));
    };

    var setTheme = function (theme) {
        if (theme === "system") {
            var systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
            document.documentElement.setAttribute('data-theme', systemTheme);
        } else {
            document.documentElement.setAttribute('data-theme', theme);
        }
        window.localStorage.setItem("theme", theme);
    };

    var initializeThemeSwitcher = function () {
        var theme = window.localStorage.getItem("theme") || "system";
        var switcher = document.getElementById('js-theme-switcher');
        switcher.removeAttribute('hidden');

        var lightThemeToggle = document.getElementById('light-theme-toggle');
        var darkThemeToggle = document.getElementById('dark-theme-toggle');
        var systemThemeToggle = document.getElementById('system-theme-toggle');

        var toggleButtons = [lightThemeToggle, darkThemeToggle, systemThemeToggle];

        toggleButtons.forEach(function (btn) {
            btn.addEventListener("click", function () {
                enableToggle(btn);
                var theme = this.getAttribute('data-theme');
                setTheme(theme);
                if (btn === systemThemeToggle) {
                    disableToggle([lightThemeToggle, darkThemeToggle]);
                } else if (btn === lightThemeToggle) {
                    disableToggle([systemThemeToggle, darkThemeToggle]);
                } else if (btn === darkThemeToggle) {
                    disableToggle([systemThemeToggle, lightThemeToggle]);
                }
            });