Color Weaver

[!NOTE]

• Help you to make colorful UI.
• Easy to use & customize.
• Also it's type safe & tested by 100% coverage.

boilerplate from modern-npm-package

Get Started

🎨 Color Weaver 🔢

npm install color-weaver
yarn add color-weaver

How to use

by default

import { ColorWeaver } from "color-weaver";

const colorWeaver = new ColorWeaver();

// get text color for background color
console.log(colorWeaver.getTextColor("#000000")); // #EEEEEE
console.log(colorWeaver.getTextColor("#FFFFFF")); // #000000

// check if the color is dark
console.log(colorWeaver.isColorDark("#000000")); // true
console.log(colorWeaver.isColorDark("#FFFFFF")); // false

by options

const colorWeaver = new ColorWeaver({
  lightTextColor: "#ffff00",
  darkTextColor: "#222222",
});

// get custom text color for background color
console.log(colorWeaver.getTextColor("#000000")); // #ffff00
console.log(colorWeaver.getTextColor("#FFFFFF")); // #222222

Examples

Javascript

const colorWeaver = new ColorWeaver();
const backgroundColor = "#000000";

const TagElement = document.querySelector(".tag");
TagElement.style.backgroundColor = backgroundColor;
TagElement.style.color = colorWeaver.getTextColor(backgroundColor);

React

{selectedConcepts.map((e) => {
  return (
    <Concept
      key={e.en}
      style={{
        backgroundColor: e.color,
        color: colorWeaver.getTextColor(e.color),
      }}
      onClick={() => handleSelectConcept(e)}
    >
      {e.en} <XIcon width={16} />
    </Concept>
  );
})}