如何通过JavaScript接收用户输入，永久修改CSS :root全局变量

实现方案 #

核心逻辑 #

• 点击提交时先校验输入的颜色值合法性
• 校验通过后修改:root全局CSS变量
• 配置存入localStorage实现永久生效，所有页面加载时优先读取本地存储的配置值

代码调整 #

优化后的HTML（保留原有结构，新增属性简化JS逻辑，已翻译所有文案为中文）

<div class="adminpage-background">
    <h1>修改主色（头部、底部、服务模块边框）</h1>
    <input type="text" name="primaryChange" data-css-var="--clr-primary" placeholder="#123456">
    <br><br>
    <button type="button" class="submit-color">提交</button>
    <br><br>

    <h1>修改边框色（背景边框颜色）</h1>
    <input type="text" name="borderChange" data-css-var="--border-color" placeholder="#123456">
    <br><br>
    <button type="button" class="submit-color">提交</button>
    <br><br>

    <h1>修改背景色</h1>
    <input type="text" name="backgroundChange" data-css-var="--clr-background" placeholder="#123456">
    <br><br>
    <button type="button" class="submit-color">提交</button>
    <br><br>

    <h1>修改主文本色</h1>
    <input type="text" name="primaryTextChange" data-css-var="--clr-text" placeholder="#123456">
    <br><br>
    <button type="button" class="submit-color">提交</button>
    <br><br>

    <h1>修改次要文本色</h1>
    <input type="text" name="secondaryTextChange" data-css-var="--clr-secondary-text" placeholder="#123456">
    <br><br>
    <button type="button" class="submit-color">提交</button>
    <br><br>
</div>

注：把原来的type="submit"按钮换成普通按钮，避免触发表单默认提交跳转行为

新增JS代码（全站所有页面都要引入这段JS，才能实现配置跨页面生效）

// 颜色合法性校验函数
function isValidColor(color) {
    const s = new Option().style;
    s.color = color;
    return s.color !== '';
}

// 页面初始化：读取本地存储的自定义配色设置CSS变量
function initCustomColor() {
    const customColors = JSON.parse(localStorage.getItem('customSiteColors') || '{}');
    Object.keys(customColors).forEach(varName => {
        document.documentElement.style.setProperty(varName, customColors[varName]);
        // 管理页的输入框回显已保存的颜色值
        const input = document.querySelector(`[data-css-var="${varName}"]`);
        if (input) input.value = customColors[varName];
    });
}
initCustomColor();

// 绑定所有提交按钮的点击事件
document.querySelectorAll('.submit-color').forEach((btn, index) => {
    btn.addEventListener('click', () => {
        const input = document.querySelectorAll('[data-css-var]')[index];
        const cssVar = input.dataset.cssVar;
        const inputColor = input.value.trim();
        
        if (!isValidColor(inputColor)) {
            alert('请输入合法的颜色值');
            return;
        }

        // 实时更新CSS变量
        document.documentElement.style.setProperty(cssVar, inputColor);
        // 写入本地存储永久保存
        const customColors = JSON.parse(localStorage.getItem('customSiteColors') || '{}');
        customColors[cssVar] = inputColor;
        localStorage.setItem('customSiteColors', JSON.stringify(customColors));
        alert('颜色修改成功');
    });
});

补充说明 #

• 上述方案是基于本地存储的单设备永久生效方案，如果需要所有访问用户同步全局配色，需要额外对接后端接口存储配置
• 支持Hex、RGB、RGBA、颜色名等所有合法CSS颜色格式输入

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