专栏名称: xfcdxg
目录
相关文章推荐
中国国家地理  ·  且慢且慢碧湖有清欢 ·  14 小时前  
丁香生活研究所  ·  两种让人失眠的饮料,你可能每天都在喝 ·  6 天前  
丁香生活研究所  ·  好评 100% 的沐浴露,皮肤越洗越嫩! ·  2 天前  
营养师顾中一  ·  不想越吃越笨,小心这7类食物 ·  4 天前  
营养师顾中一  ·  做好这5件事,秋冬「美白」效果好! ·  1 周前  
51好读  ›  专栏  ›  xfcdxg

切换Web应用主题色的 (KU)

xfcdxg  · 掘金  ·  · 2017-12-14 03:23

正文

color-switch

用于切换Web应用主题色

只需在进入应用时调用该方法

调用后会监听 DOM Tree 及 StyleTag 的变化,动态修改内部相关的色值

应用场景

  • 不同客户对产品有不同的主题色要求
  • 修改主题色,而不修改样式文件
  • 用户切换主题色后...

Demo

Demo

Example

Example

更新范围

DOMElement

  • color
  • border-color
  • background-color

StyleSheet

  • color
  • border-color
  • background-color

SVG

  • fill

🌰

  import colorSwitch from 'color-switch'

  const fromColorList = [
    ['000', 'rgb(255, 255, 255)'],  // [hex (black), rgb (white)] to #50A5FC (blue)
    ['#007eff']                     // [hex (blue)] to rgb(255, 86, 12) (red)
  ]
  const toColorList = ['#50A5FC', 'rgb(255, 86, 12)'] // [hex (blue), rgb (red)]

  colorSwitch(fromColorList, toColorList)

注意

如果是 SSR,建议在 Client 端调用(因为 Server 端不支持...略略略)

暂不支持来回切换和局部设置...

更多