在使用 javascript 加载时将“checked”添加到单选按钮

问：

基于 Bootstrap 5 的暗模式切换 javascript （https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript） 我正在尝试将单选按钮设置为在页面加载时以及更改颜色模式时“选中”。

使用以下 javascript：

    <script>
      (() => {
        'use strict'

        const getStoredTheme = () => localStorage.getItem('theme')
        const setStoredTheme = theme => localStorage.setItem('theme', theme)

        const getPreferredTheme = () => {
          const storedTheme = getStoredTheme()
          if (storedTheme) {
            return storedTheme
          }

          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
        }

        const setTheme = theme => {
          if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark')
          } else {
            document.documentElement.setAttribute('data-bs-theme', theme)
          }
        }

        setTheme(getPreferredTheme())

        const showActiveTheme = (theme, focus = false) => {
          const themeSwitcher = document.querySelector('#bd-theme')

          if (!themeSwitcher) {
            return
          }

          const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)

          document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
            element.classList.remove('checked')
          })

          btnToActive.classList.add('checked')

          if (focus) {
            themeSwitcher.focus()
          }
        }

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
          const storedTheme = getStoredTheme()
          if (storedTheme !== 'light' && storedTheme !== 'dark') {
            setTheme(getPreferredTheme())
          }
        })

        window.addEventListener('DOMContentLoaded', () => {
          showActiveTheme(getPreferredTheme())

          document.querySelectorAll('[data-bs-theme-value]')
            .forEach(toggle => {
              toggle.addEventListener('click', () => {
                const theme = toggle.getAttribute('data-bs-theme-value')
                setStoredTheme(theme)
                setTheme(theme)
                showActiveTheme(theme, true)
              })
            })
        })
      })()
    </script>

我正在尝试控制按钮组：

  <div class="btn-group" id="bd-theme" role="group">
    <input autocomplete="off" checked class="btn-check" data-bs-theme-value="light" id="btnradio1" name="btnradio" type="radio">
    <label class="btn btn-outline-dark" for="btnradio1">
      Light
    </label>
    <input autocomplete="off" class="btn-check" data-bs-theme-value="dark" id="btnradio2" name="btnradio" type="radio">
    <label class="btn btn-outline-dark" for="btnradio2">
      Dark
    </label>
    <input autocomplete="off" class="btn-check" data-bs-theme-value="auto" id="btnradio3" name="btnradio" type="radio">
    <label class="btn btn-outline-dark" for="btnradio3">
      Auto
    </label>
  </div>

默认情况下，“Light”模式是“选中”的，但如果已经存储了不同的“主题”，则应“选中”其他单选按钮。

我认为特别需要更改的代码是：

        const showActiveTheme = (theme, focus = false) => {
          const themeSwitcher = document.querySelector('#bd-theme')

          if (!themeSwitcher) {
            return
          }

          const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)

          document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
            element.classList.remove('checked')
          })

          btnToActive.classList.add('checked')

          if (focus) {
            themeSwitcher.focus()
          }
        }