如何实现多HTML页面主题色切换及持久化（移动端开发）

核心逻辑 #

1. 用localStorage存储用户选择的主题色，实现关闭浏览器后仍保留设置
2. 所有页面加载时读取localStorage中的主题值，动态切换CSS变量
3. 设置页提供可视化的主题色选择项，修改后同步更新localStorage并立即应用到当前及后续打开的页面

设置页（page1.html）完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 20px;
            font-family: sans-serif;
            --primary-color: #165DFF; /* 默认蓝色 */
            background-color: var(--primary-color);
            color: white;
        }
        .theme-container {
            max-width: 400px;
            margin: 0 auto;
        }
        .theme-title {
            font-size: 24px;
            margin-bottom: 30px;
            text-align: center;
        }
        .theme-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        .theme-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .theme-color {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid transparent;
            transition: border-color 0.2s;
        }
        .theme-item input:checked + .theme-color {
            border-color: white;
        }
        .theme-label {
            margin-top: 8px;
            font-size: 14px;
        }
        .save-btn {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            border: none;
            border-radius: 8px;
            background-color: white;
            color: var(--primary-color);
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .save-btn:hover {
            opacity: 0.9;
        }
        /* 定义6种主题色变量 */
        .theme-blue { --primary-color: #165DFF; }
        .theme-yellow { --primary-color: #FFC107; }
        .theme-green { --primary-color: #36D399; }
        .theme-red { --primary-color: #F87272; }
        .theme-purple { --primary-color: #8B5CF6; }
        .theme-orange { --primary-color: #FB923C; }
    </style>
</head>
<body>
    <div class="theme-container">
        <h1 class="theme-title">选择主题色</h1>
        <div class="theme-options">
            <!-- 主题色选项 -->
            <label class="theme-item">
                <input type="radio" name="theme" value="blue" hidden checked>
                <div class="theme-color" style="background-color: #165DFF;"></div>
                <span class="theme-label">蓝色</span>
            </label>
            <label class="theme-item">
                <input type="radio" name="theme" value="yellow" hidden>
                <div class="theme-color" style="background-color: #FFC107;"></div>
                <span class="theme-label">黄色</span>
            </label>
            <label class="theme-item">
                <input type="radio" name="theme" value="green" hidden>
                <div class="theme-color" style="background-color: #36D399;"></div>
                <span class="theme-label">绿色</span>
            </label>
            <label class="theme-item">
                <input type="radio" name="theme" value="red" hidden>
                <div class="theme-color" style="background-color: #F87272;"></div>
                <span class="theme-label">红色</span>
            </label>
            <label class="theme-item">
                <input type="radio" name="theme" value="purple" hidden>
                <div class="theme-color" style="background-color: #8B5CF6;"></div>
                <span class="theme-label">紫色</span>
            </label>
            <label class="theme-item">
                <input type="radio" name="theme" value="orange" hidden>
                <div class="theme-color" style="background-color: #FB923C;"></div>
                <span class="theme-label">橙色</span>
            </label>
        </div>
        <button class="save-btn">保存主题设置</button>
    </div>

    <script>
        // 页面加载时读取本地存储的主题，恢复选中状态和样式
        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('selectedTheme') || 'blue';
            // 选中对应的radio
            document.querySelector(`input[name="theme"][value="${savedTheme}"]`).checked = true;
            // 应用主题样式
            applyTheme(savedTheme);
        });

        // 保存按钮点击事件
        document.querySelector('.save-btn').addEventListener('click', () => {
            const selectedTheme = document.querySelector('input[name="theme"]:checked').value;
            // 保存到本地存储
            localStorage.setItem('selectedTheme', selectedTheme);
            // 应用主题
            applyTheme(selectedTheme);
            // 可选：提示保存成功
            alert('主题已保存');
        });

        // 应用主题的函数
        function applyTheme(themeName) {
            // 移除所有主题类
            document.body.classList.remove('theme-blue', 'theme-yellow', 'theme-green', 'theme-red', 'theme-purple', 'theme-orange');
            // 添加选中的主题类
            document.body.classList.add(`theme-${themeName}`);
        }
    </script>
</body>
</html>

其他页面（如文章页）的主题适配代码 #

所有需要应用主题的页面，都需要在<head>中加入以下CSS和JS代码，确保主题色能同步生效：

<style>
    :root {
        --primary-color: #165DFF; /* 默认蓝色 */
    }
    /* 根据自己的页面结构，将需要变色的元素绑定到这个变量 */
    body {
        background-color: var(--primary-color);
        /* 其他需要主题色的样式，比如导航栏、按钮等 */
    }
    /* 可选：如果需要更多主题变量，比如文字色、边框色等，可以扩展 */
    /* --text-color: #fff; --border-color: rgba(255,255,255,0.3); */
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const savedTheme = localStorage.getItem('selectedTheme') || 'blue';
        // 定义主题色映射
        const themeColors = {
            blue: '#165DFF',
            yellow: '#FFC107',
            green: '#36D399',
            red: '#F87272',
            purple: '#8B5CF6',
            orange: '#FB923C'
        };
        // 动态修改CSS变量
        document.documentElement.style.setProperty('--primary-color', themeColors[savedTheme]);
    });
</script>

关键说明 #

1. 手机端适配：设置页的颜色选项用网格布局，色块尺寸足够大，方便手指点击
2. 持久化：通过localStorage存储主题值，数据会一直保留在浏览器中，除非用户手动清除或修改主题
3. 跨页面同步：所有页面加载时都会读取localStorage中的值，因此设置页修改后，其他页面刷新或重新打开时会自动应用新主题

内容的提问来源于stack exchange，提问作者Justin LRT