基于Vue和Bootstrap使用CSS变量实现动态修改网页基色的完整方案

本文链接：https://blog.youkuaiyun.com/qq_36799762/article/details/146174503

以下是实现动态修改网页基色的完整方案，基于CSS变量和Vue的响应式特性：

思路：使用CSS变量（自定义属性），这样可以在一个地方定义颜色，然后在其他地方引用。同时，结合Vue的数据绑定，可以实现动态修改这些CSS变量，从而达到改变基色的效果。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态基色方案</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1890ff; /* 默认基色 */
            --primary-hover: #40a9ff; /* 悬停色 */
            --text-on-primary: #ffffff; /* 基色上的文字颜色 */
        }

        /* 基色应用示例 */
        .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: var(--text-on-primary) !important;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
        }

        .nav-link-custom.active {
            color: var(--primary-color) !important;
            border-bottom: 2px solid var(--primary-color);
        }

        .color-picker-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 颜色选择器 -->
        <div class="color-picker-container">
            <label class="form-label">选择基色：</label>
            <input 
                type="color" 
                class="form-control form-control-color"
                v-model="primaryColor"
                @input="updateTheme"
            >
        </div>

        <!-- 导航栏和其他页面内容 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <span style="color: var(--primary-color)">安通控股</span>
                </a>
                <button class="btn btn-primary">示例按钮</button>
            </div>
        </nav>

        <div class="container mt-4">
            <a href="#" class="text-decoration-none" style="color: var(--primary-color)">
                示例链接
            </a>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    primaryColor: '#1890ff'
                }
            },
            methods: {
                updateTheme() {
                    // 计算衍生颜色
                    const hexToRgb = hex => 
                        hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
                           ,(m, r, g, b) => '#' + r + r + g + g + b + b)
                          .substring(1).match(/.{2}/g)
                          .map(x => parseInt(x, 16));

                    const rgb = hexToRgb(this.primaryColor);
                    const hoverColor = `rgb(${
                        rgb.map(c => Math.min(c + 30, 255)).join(',')
                    })`;

                    // 更新CSS变量
                    document.documentElement.style.setProperty(
                        '--primary-color', 
                        this.primaryColor
                    );
                    document.documentElement.style.setProperty(
                        '--primary-hover', 
                        hoverColor
                    );
                    document.documentElement.style.setProperty(
                        '--text-on-primary', 
                        this.getContrastColor(this.primaryColor)
                    );
                },
                getContrastColor(hex) {
                    const rgb = parseInt(hex.substring(1), 16);
                    const r = (rgb >> 16) & 0xff;
                    const g = (rgb >> 8) & 0xff;
                    const b = (rgb >> 0) & 0xff;
                    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
                    return luminance > 128 ? '#000000' : '#ffffff';
                }
            },
            mounted() {
                this.updateTheme();
            }
        }).mount('#app');
    </script>
</body>

关键实现说明：

1，CSS变量定义：

:root {    --primary-color: #1890ff;    --primary-hover: #40a9ff;    --text-on-primary: #ffffff;}

定义了三层颜色变量，用于主题控制

2，动态颜色计算：

hexToRgb：将HEX颜色转换为RGB数组
hoverColor：自动生成比基色亮30的悬停色
getContrastColor：根据W3C对比度算法自动计算合适的文字颜色

3，颜色应用示例：

.btn-primary {    background-color: var(--primary-color) !important;    border-color: var(--primary-color) !important;    color: var(--text-on-primary) !important;}

覆盖Bootstrap原生按钮样式

4，Vue颜色绑定：

<input type="color" v-model="primaryColor" @input="updateTheme">

使用HTML5颜色选择器并绑定到Vue数据

5，响应式更新：

document.documentElement.style.setProperty('--primary-color', this.primaryColor);

通过修改根元素的CSS变量实现全局样式更新

扩展建议：

1.保存用户偏好：

// 保存到localStoragelocalStorage.setItem('themeColor', this.primaryColor);
// 初始化时读取mounted() {    const savedColor = localStorage.getItem('themeColor');    if(savedColor) {        this.primaryColor = savedColor;    }    this.updateTheme();}

2.预设主题方案：

data() {    return {        presets: [            { name: '科技蓝', value: '#1890ff' },            { name: '活力橙', value: '#ff6b35' },            { name: '生态绿', value: '#00c853' }        ]    }}
// 模板中添加<div class="btn-group">    <button         v-for="preset in presets"        :key="preset.value"        class="color-preset"        :style="{ backgroundColor: preset.value }"        @click="primaryColor = preset.value; updateTheme()"    ></button></div>

3.服务端同步（可选）：

// 如果需要用户主题同步methods: {    async saveTheme() {        await axios.post('/api/user/theme', {            color: this.primaryColor        });    }}

4.增强辅助功能

@media (prefers-color-scheme: dark) {    :root {        --text-on-primary: #ffffff;    }}

该方案的优点：

完全解耦的样式管理
自动计算配套颜色
实时响应式更新
良好的可扩展性
兼容Bootstrap生态
符合现代Web开发标准

使用时需要注意：

在需要应用基色的地方使用CSS变量
避免直接使用固定颜色值
重要样式可能需要!important覆盖
颜色计算算法可根据需求调整
建议配合SCSS/Less进行更复杂的颜色管理

详细阅读原文