前端实现快速更改网页整体配色的方法与实践

方法概述

在css文件中 :root伪类 定义颜色变量

//示例   通常在全局样式文件中
:root {
    //主色调
  --primary-color: #e67e22;
  --primary-color-dark: #cf711f;
  
  //从深到浅的灰色梯度
  --color-grey-dark-1: #333;
  --color-grey-dark-2: #555;
  --color-grey-dark-3: #777;
  --color-grey-dark-4: #999;
 
  --color-grey-light-1: #eee;
  --color-grey-light-2: #f7f7f7;
  --color-grey-light-3: #fafafa;
  
  //功能色：成功绿、错误红、警告黄等
  --color-white: #fff;
  --color-black: #000;
  --color-green: #51cf66;
  --color-red: #ff6b6b;
  --color-orange: #ffd43b;
  --color-orange-dark: #e6a23c;
  
  //阴影
  --shadow-light: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.06);
  --shadow-dark: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.15);
}

在对应设置组件颜色处使用var变量引用 通过改变变量值改变样式

.button {
  background-color: var(--primary-color);
  color: var(--color-white);
  box-shadow: var(--shadow-light);
}

.button:hover {
  background-color: var(--primary-color-dark);
}

.error-message {
  color: var(--color-red);
  background-color: var(--color-grey-light-2);
}

使用js动态更改颜色

// 修改变量值
document.documentElement.style.setProperty('--primary-color', '#ff5733');

// 获取变量值
const primaryColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

实际应用

切换暗夜模式

//利用媒体查询自动获取操作系统的主题偏好**
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #ff922b;
    --color-grey-light-1: #1a1a1a;
    --color-white: #2d2d2d;
  }
}