Bootstrap 5.3主题切换只工作一次

fdx2calv 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(1)|浏览(149)

我正在阅读Bootstrap 5.3的文档，以便使用JavaScript在黑暗和光明主题之间切换。我将脚本包含在页面中，并将data-bs-theme属性添加到html标签中：

<!DOCTYPE html>
<html lang="it" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="/js/theme.js" type="text/javascript"></script>
</head>
<body>
...

其中theme.js包括文档页面上的脚本。然后我在我的页面上放了一个按钮：

<button type="button" class="btn btn-outline-secondary me-3" data-bs-toggle="button" data-bs-theme-value="light">Dark/light theme switch</button>

当我单击button时，它将data-bs-theme属性从dark交换为light，但在第二次按下时，它不会再次交换值。

twitter-bootstrap

来源：https://stackoverflow.com/questions/77248534/bootstrap-5-3-theme-toggle-works-only-one-time

1条答案

按热度按时间

e5nqia271#

click函数将主题分配给data-bs-theme-value。由于您还将所选主题存储到localStorage，因此您可以获取主题的值，然后在单击时将其设置为相反的值。
这里有一个可行的选择：

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

    document.querySelectorAll('[data-bs-theme-value]')
      .forEach(toggle => {
        toggle.addEventListener('click', () => {
          const theme = (getStoredTheme() || toggle.getAttribute('data-bs-theme-value')) == 'light' ? 'dark' : 'light'
          setStoredTheme(theme)
          setTheme(theme)
          showActiveTheme(theme, true)
      })
    })
})

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 5.3主题切换只工作一次

1条答案

相关问题

热门标签

最新问答