【前端】使用JavaScript控制CSS中的颜色

阅读数: 2023-09-15

前言

需要实现一个暗黑模式的功能，初步考虑是达到黑白灰颜色反转，彩色不变的效果

实现

// https://www.infoq.cn/article/ziwrvjfudh_ac057jomj

// https://www.zhihu.com/question/317536668
// 灰度算法：Y = ((R*299)+(G*587)+(B*114))/1000
// js 判断颜色是否为深色 阀值 
function grayLevel(R, G, B) {
  return (R * 299 + G * 587 + B * 114)/ 1000;
}

function isGray(R, G, B) {
  return grayLevel(R, G, B) >= 192;
}


// 计算亮度（黑色最暗，白色最亮，这里正常应该是0-1之间的值，这里似乎不太对劲）
function rgbToLightness(r,g,b) {
  return 1/2 * (Math.max(r,g,b) + Math.min(r,g,b))
};

// 饱和度
function rgbToSaturation(r,g,b) {
  const L = rgbToLightness(r,g,b);
  const max = Math.max(r,g,b);
  const min = Math.min(r,g,b);
  return (L === 0 || L === 1)
   ? 0
   : (max - min)/(1 - Math.abs(2 * L - 1));
};

// 色调
function rgbToHue(r,g,b) {
  return Math.round(
    Math.atan2(
      Math.sqrt(3) * (g - b),
      2 * r - g - b,
    ) * 180 / Math.PI
  );
};

// RGB -> HSL
function rgbToHsl(r,g,b) {
  const lightness = rgbToLightness(r,g,b);
  const saturation = rgbToSaturation(r,g,b);
  const hue = rgbToHue(r,g,b);
  return [hue, saturation, lightness];
};

// HSL -> RGB
function hslToRgb(h,s,l) {
  const C = (1 - Math.abs(2 * l - 1)) * s;
  const hPrime = h / 60;
  const X = C * (1 - Math.abs(hPrime % 2 - 1));
  const m = l - C/2;
  const withLight = (r,g,b) => [r+m, g+m, b+m];
  if (hPrime <= 1) { return withLight(C,X,0); } else
  if (hPrime <= 2) { return withLight(X,C,0); } else
  if (hPrime <= 3) { return withLight(0,C,X); } else
  if (hPrime <= 4) { return withLight(0,X,C); } else
  if (hPrime <= 5) { return withLight(X,0,C); } else
  if (hPrime <= 6) { return withLight(C,0,X); }
};

// Hex -> RGB
function hexToRgb(hexColor) {
  hexColor = hexColor.slice(1);
  hexColor.length < 6 && (hexColor = hexColor.split('').map(c => (c + c)).join(''));
  hexColor = hexColor.slice(0, 8) // 最多8位，最后2位是透明度
  // 将颜色的每两位分割开
  const rgbColors = hexColor.match(/.{1,2}/g);
  // 将每一种颜色从十六进制转换为十进制
  for (let i = 0; i < rgbColors.length; i++) {
    rgbColors[i] = parseInt(rgbColors[i], 16);
  }
  rgbColors[3] = rgbColors.length === 4 ? rgbColors[3] / 255 : 1;
  return rgbColors;
}

// RGB -> Hex
function rgbToHex(r, g, b) {
  return (
    "#" +
    [r, g, b]
      .map((x) => {
        const hex = x.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      })
      .join("")
  );
}


// rgb颜色对象
function rgbToObject(red,green,blue) {
  const [hue, saturation, lightness] = rgbToHsl(red, green, blue);
  return {red, green, blue, hue, saturation, lightness};
}

// hsl颜色对象
function hslToObject(hue, saturation, lightness) {
  const [red, green, blue] = hslToRgb(hue, saturation, lightness);
  return {red, green, blue, hue, saturation, lightness};
}

// 是否灰度颜色
function isGrayscale(r, g, b) {
  const color = rgbToObject(r, g, b);
  return color.saturation === 0;
}
// 是否暗色
function isDark(r, g, b) {
  const color = rgbToObject(r, g, b);
  return color.lightness < 0.5;
}

最终方案

CSS

let style = null, defaultMode = '', storageMode = ''
function setTheme (mode) {
  localStorage.setItem('cmc-dark-mode', mode)
  if (mode === 'dark') {
    style = document.createElement('style')
    // 不需要反转颜色的html元素需要再次反转下以负负得正
    style.innerText = `html { filter: invert(1) hue-rotate(180deg); }
     img, video, canvas { filter: invert(1) hue-rotate(180deg); }`
    document.body.appendChild(style)
  } else {
    style && style.parentNode && style.parentNode.removeChild(style)
  }
}
// 如果没有设置过颜色则跟随系统（https://www.bilibili.com/read/cv18661145/）
defaultMode = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'
storageMode = localStorage.getItem('cmc-dark-mode')
setTheme(storageMode || defaultMode)

注意：上述方式反转后发现会有些偏暗，可以用 brightness(1.02) 提亮一些，但是依旧无法完美保持彩色不变。

JavaScript

// hexColor 转 RgbColor
function hexToRgb(hexColor) {
  hexColor = hexColor.slice(1)
  hexColor.length === 3 && (hexColor = hexColor.split('').map(item => item.repeat(2)).join(''))
  // 将颜色的每两位分割开
  const rgbColors = hexColor.match(/.{1,2}/g)
  // 将每一种颜色从十六进制转换为十进制
  for (let i = 0; i < rgbColors.length; i++) {
    rgbColors[i] = parseInt(rgbColors[i], 16)
  }
  return rgbColors
}

// 灰度
function grayLevel (R, G, B) {
  return (R * 299 + G * 587 + B * 114) / 1000
}

// 判断是否黑白灰
function isWhiteBlackGray (R, G, B) {
  return grayLevel(R, G, B) >= 192 || grayLevel(R, G, B) <= 255 - 192
}

// 其他颜色格式先转成hexColor
function getInverseColor (hexColor) {
  hexColor = hexColor.slice(1)
  // 补完整简写的hexColor
  hexColor.length === 3 && (hexColor = hexColor.split('').map(item => item.repeat(2)).join(''))
  // 将六位颜色的每两位分割开
  const rgbColors = hexColor.match(/.{1,2}/g)
  // 将每一种颜色从十六进制转换为十进制，然后取反
  for (let i = 0; i < rgbColors.length; i++) {
    if (i > 2) break // 透明度不处理
    rgbColors[i] = parseInt(rgbColors[i], 16)
    rgbColors[i] = (255 - rgbColors[i]).toString(16).padStart(2, '0')
  }
  const inverseColor = '#' + rgbColors.join('')
  return inverseColor
}

const color = '#ccc'
isWhiteBlackGray(...hexToRgb(color)) && console.log(getInverseColor(color))

上述代码的核心在于 isWhiteBlackGray 的阈值需要合适

参考文章

计算机中的RGB值和屏幕亮度有什么关系？RGB值对应着颜色深度(亮度)，那屏幕亮度是什么决定的？

JS判断颜色是否为深色阀值

js颜色常用处理方法

如何使用 JavaScript 控制 CSS 中的颜色

CSS 如何根据背景色自动切换黑白文字？

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/4de4a2fe.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！