color-switch

Switch the theme color of the Web application

Simply call this method when you enter the application

After the call, it will listen to the DOM Tree and StyleTag changes, and dynamically modify internal related color values

Application scenarios

  • Different customers have different theme color requirements for products
  • Modify the theme color without modifying the style file
  • After the user switches the theme color…

Demo

Demo

Example

Example

Update the scope

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)
Copy the code

Pay attention to

If it is SSR, it is recommended to call it on the Client side (because the Server side does not support… Have slightly)

Switching back and forth and local Settings are not supported…

More and more

  • Github
  • Npm
  • Welcome to throw to turn