要保持暗模式开关的状态在导航到其他页面时，可以使用本地存储（localStorage或sessionStorage）来保存用户的选择。当用户切换暗模式时，将其选择保存到本地存储中。然后，在每次加载新页面时，检查本地存储中的状态，并根据状态设置相应的CSS类。

下面是一个示例代码：

HTML:

    
    


    
暗模式开关示例
    暗模式
    
    
    

CSS（styles.css）:

body {
    background-color: #ffffff;
    color: #000000;
}

.dark-mode {
    background-color: #000000;
    color: #ffffff;
}

JavaScript（script.js）:

// 检查本地存储中的状态并应用相应的CSS类
function checkDarkMode() {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    const themeStyle = document.getElementById('theme-style');

    if (isDarkMode) {
        themeStyle.href = 'dark-mode.css'; // 设置暗模式的CSS样式表
        document.body.classList.add('dark-mode'); // 添加暗模式的CSS类
    } else {
        themeStyle.href = 'styles.css'; // 设置默认的CSS样式表
        document.body.classList.remove('dark-mode'); // 移除暗模式的CSS类
    }
}

// 监听暗模式开关的更改事件
function toggleDarkMode() {
    const darkModeToggle = document.getElementById('dark-mode');
    const isDarkMode = darkModeToggle.checked;

    localStorage.setItem('darkMode', isDarkMode); // 将暗模式状态保存到本地存储

    checkDarkMode(); // 检查并应用相应的CSS类
}

// 页面加载时检查暗模式状态并应用相应的CSS类
window.addEventListener('load', checkDarkMode);

// 监听暗模式开关的更改事件
document.getElementById('dark-mode').addEventListener('change', toggleDarkMode);

这个示例中，当用户切换暗模式时，将其选择保存到本地存储中。然后，在每次加载新页面时，通过检查本地存储中的状态，并根据状态设置相应的CSS类来保持暗模式开关的状态。