vue动态修改主题颜色-拓冰建站

Vue动态主题颜色功能实现方案

我将为您实现一个在Vue项目中全局动态设置主题颜色的功能，让用户可以通过简单的方式自定义整个应用的主题色。

设计思路

全局CSS变量系统：使用CSS自定义属性（CSS变量）存储主题色
主题颜色响应式管理：使用Vue的响应式系统管理主题状态
本地存储集成：使用localStorage保存用户选择，实现主题持久化
统一风格样式：所有组件使用CSS变量确保风格一致性
视觉反馈机制：添加颜色预览和预设方案选择

下面是完整的实现方案：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue动态主题颜色系统</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>:root {/* 定义主题相关CSS变量 */--primary-color: #42b983;--primary-light: #e7f6ee;--primary-dark: #338064;--text-on-primary: #ffffff;--app-background: #f8f9fa;--card-background: #ffffff;--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);--border-color: #e0e0e0;--text-primary: #212529;--text-secondary: #495057;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--radius: 8px;--transition: all 0.3s ease;}* {margin: 0;padding: 0;box-sizing: border-box;transition: var(--transition);}body {font-family: 'Segoe UI', system-ui, sans-serif;background-color: var(--app-background);color: var(--text-primary);line-height: 1.6;padding: 20px;min-height: 100vh;}.app-container {max-width: 1200px;margin: 0 auto;}header {display: flex;justify-content: space-between;align-items: center;padding: 20px 0;border-bottom: 1px solid var(--border-color);margin-bottom: 30px;}.logo {display: flex;align-items: center;gap: 10px;font-size: 1.8rem;font-weight: 700;}.logo-icon {color: var(--primary-color);}.theme-controls {display: flex;gap: 15px;align-items: center;}.theme-selector {position: relative;}.theme-button {background: var(--card-background);border: 1px solid var(--border-color);padding: 8px 16px;border-radius: var(--radius);display: flex;align-items: center;gap: 8px;cursor: pointer;box-shadow: var(--card-shadow);}.theme-button:hover {border-color: var(--primary-color);}.theme-panel {position: absolute;top: 120%;right: 0;background: var(--card-background);border-radius: var(--radius);padding: 20px;width: 300px;box-shadow: var(--card-shadow);z-index: 10;opacity: 0;visibility: hidden;transform: translateY(10px);transition: var(--transition);}.theme-panel.active {opacity: 1;visibility: visible;transform: translateY(0);}.theme-title {margin-bottom: 15px;font-weight: 600;display: flex;justify-content: space-between;align-items: center;}.color-input-group {margin-bottom: 15px;}.color-preview {display: flex;align-items: center;gap: 10px;}.preview-box {width: 30px;height: 30px;border-radius: 4px;background-color: var(--primary-color);}input[type="color"] {border: none;background: none;width: 50px;height: 30px;cursor: pointer;padding: 0;}input[type="color"]::-webkit-color-swatch {border: none;border-radius: 4px;}input[type="color"]::-moz-color-swatch {border: none;border-radius: 4px;}.preset-colors {display: grid;grid-template-columns: repeat(6, 1fr);gap: 8px;margin: 15px 0;}.color-option {width: 30px;height: 30px;border-radius: 50%;cursor: pointer;transition: transform 0.2s;border: 2px solid transparent;}.color-option:hover {transform: scale(1.1);}.color-option.active {border-color: var(--text-primary);box-shadow: 0 0 0 2px var(--card-background);}.preset-labels {display: grid;grid-template-columns: repeat(6, 1fr);gap: 8px;font-size: 0.7rem;text-align: center;}.card-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;margin-top: 20px;}.card {background: var(--card-background);border-radius: var(--radius);padding: 20px;box-shadow: var(--card-shadow);}.card-header {margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid var(--border-color);}.card-title {font-size: 1.2rem;font-weight: 600;color: var(--primary-color);}.btn {padding: 10px 16px;border-radius: var(--radius);border: none;font-weight: 500;cursor: pointer;transition: var(--transition);}.btn-primary {background: var(--primary-color);color: var(--text-on-primary);}.btn-primary:hover {background: var(--primary-dark);}.btn-outline {background: transparent;border: 1px solid var(--primary-color);color: var(--primary-color);}.btn-outline:hover {background: var(--primary-light);}.btn-group {display: flex;gap: 10px;margin-top: 15px;}.progress-bar {height: 8px;background: #e9ecef;border-radius: 4px;overflow: hidden;margin: 15px 0;}.progress-fill {height: 100%;background: var(--primary-color);width: 65%;}.info-box {padding: 15px;border-radius: var(--radius);margin-top: 20px;display: flex;gap: 15px;align-items: flex-start;background: var(--primary-light);color: var(--primary-dark);}.info-icon {color: var(--primary-color);font-size: 1.5rem;}.info-content h4 {margin-bottom: 5px;}@media (max-width: 768px) {.preset-colors, .preset-labels {grid-template-columns: repeat(3, 1fr);}.theme-panel {width: calc(100vw - 40px);right: 20px;}}</style>
</head>
<body><div id="app" class="app-container"><header><div class="logo"><i class="fas fa-palette logo-icon"></i><span>Vue主题设置系统</span></div><div class="theme-controls"><div class="theme-selector"><button class="theme-button" @click="toggleThemePanel"><i class="fas fa-paint-brush"></i>自定义主题</button><div class="theme-panel" :class="{ active: isThemePanelOpen }"><div class="theme-title"><h3>主题设置</h3><button class="btn" @click="resetTheme"><i class="fas fa-sync-alt"></i> 重置</button></div><div class="color-input-group"><label>主色选择</label><div class="color-preview"><input type="color" v-model="themeColor" @input="updateTheme"><div class="preview-box"></div><span>{{ themeColor }}</span></div></div><div><p>预设主题:</p><div class="preset-colors"><div v-for="(color, index) in presetColors" :key="index"class="color-option":style="{ backgroundColor: color }":class="{ active: themeColor === color }"@click="setPresetTheme(color)"></div></div><div class="preset-labels"><span>绿</span><span>蓝</span><span>橙</span><span>红</span><span>紫</span><span>靛</span></div></div><div class="info-box"><i class="fas fa-info-circle info-icon"></i><div class="info-content"><h4>主题系统说明</h4><p>选择或自定义主题颜色后，整个应用程序的颜色系统将实时更新。</p></div></div></div></div><div class="color-preview"><div class="preview-box"></div><span>当前主题</span></div></div></header><main><div class="card-container"><div class="card"><div class="card-header"><h3 class="card-title">卡片标题</h3></div><p>这是一个使用主题颜色的应用组件示例。背景、文本和按钮颜色会根据主题设置自动调整。</p><div class="progress-bar"><div class="progress-fill"></div></div><div class="btn-group"><button class="btn btn-primary">主要操作</button><button class="btn btn-outline">次要操作</button></div></div><div class="card"><div class="card-header"><h3 class="card-title">系统特性</h3></div><ul style="padding-left: 20px; margin-top: 10px;"><li>实时预览主题效果</li><li>多种预设配色方案</li><li>自定义颜色选择器</li><li>主题持久化存储</li><li>一键重置功能</li><li>响应式设计</li></ul></div></div></main></div><script>const { createApp, ref, onMounted, watch } = Vue;createApp({setup() {const isThemePanelOpen = ref(false);const themeColor = ref('#42b983');const presetColors = ref(['#42b983', '#2196f3', '#ff9800', '#e74c3c', '#9b59b6', '#3f51b5']);// 计算辅助颜色const calculateColorShades = (hexColor) => {// 这里简化处理，实际项目中应使用颜色计算库return {light: hexToRgba(hexColor, 0.2),dark: shadeColor(hexColor, -20),text: getTextColor(hexColor)};};// 十六进制转RGBAconst hexToRgba = (hex, alpha = 1) => {let r = 0, g = 0, b = 0;if (hex.length === 4) {r = parseInt(hex[1] + hex[1], 16);g = parseInt(hex[2] + hex[2], 16);b = parseInt(hex[3] + hex[3], 16);} else if (hex.length === 7) {r = parseInt(hex[1] + hex[2], 16);g = parseInt(hex[3] + hex[4], 16);b = parseInt(hex[5] + hex[6], 16);}return `rgba(${r}, ${g}, ${b}, ${alpha})`;};// 颜色阴影计算const shadeColor = (color, percent) => {let R = parseInt(color.substring(1,3),16);let G = parseInt(color.substring(3,5),16);let B = parseInt(color.substring(5,7),16);R = Math.min(255, parseInt(R * (100 + percent) / 100));G = Math.min(255, parseInt(G * (100 + percent) / 100));B = Math.min(255, parseInt(B * (100 + percent) / 100));const RR = R.toString(16).length === 1 ? '0' + R.toString(16) : R.toString(16);const GG = G.toString(16).length === 1 ? '0' + G.toString(16) : G.toString(16);const BB = B.toString(16).length === 1 ? '0' + B.toString(16) : B.toString(16);return '#' + RR + GG + BB;};// 获取文本颜色（深色/浅色）const getTextColor = (bgColor) => {const color = bgColor.substring(1);const r = parseInt(color.substr(0,2),16);const g = parseInt(color.substr(2,2),16);const b = parseInt(color.substr(4,2),16);const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;return luminance > 0.5 ? '#000000' : '#ffffff';};// 更新主题const updateTheme = () => {// 计算相关颜色值const shades = calculateColorShades(themeColor.value);// 更新根元素CSS变量const root = document.documentElement;root.style.setProperty('--primary-color', themeColor.value);root.style.setProperty('--primary-light', shades.light);root.style.setProperty('--primary-dark', shades.dark);root.style.setProperty('--text-on-primary', shades.text);// 保存到localStoragelocalStorage.setItem('themeColor', themeColor.value);};// 设置预设主题const setPresetTheme = (color) => {themeColor.value = color;updateTheme();};// 重置主题const resetTheme = () => {themeColor.value = '#42b983';localStorage.removeItem('themeColor');updateTheme();};// 切换主题面板const toggleThemePanel = () => {isThemePanelOpen.value = !isThemePanelOpen.value;};// 初始化时检查保存的主题onMounted(() => {const savedColor = localStorage.getItem('themeColor');if (savedColor) {themeColor.value = savedColor;updateTheme();}// 关闭面板当点击外部区域document.addEventListener('click', (e) => {const panel = document.querySelector('.theme-panel');const button = document.querySelector('.theme-button');if (isThemePanelOpen.value && !panel.contains(e.target) && !button.contains(e.target)) {isThemePanelOpen.value = false;}});});return {isThemePanelOpen,themeColor,presetColors,updateTheme,setPresetTheme,resetTheme,toggleThemePanel};}}).mount('#app');</script>
</body>
</html>