the-simplest-color-checker
v2.1.3
Published
check if a dynamic color is dark or light and optimize the text within it
Downloads
6
Maintainers
Readme
Table of Contents
Installation
npm install the-simplest-color-checker --save
import {checkColor} from 'the-simplest-color-checker'
Usage
1- import the checkColor module into your project and add the selector as following :
import {checkColor} from 'the-simplest-color-checker'
checkColor({
selector:".colors_box" //add any selector,
optimize_text_color: true, //change text color depending on the background
ifDark:{
textColor:"#f00"
},
ifLight:{
textColor:"#00f"
}
});
2- Add data-color to all elements with the value of the color you wanna test;
data-color="#000"
the previous line will result with a
data-brightness="dark"
Examples
This :
<span data-color="#000" class="colors_box"></span>
<span data-color="#fff" class="colors_box"></span>
<span data-color="#f00" class="colors_box"></span>
will result :
<span data-color="#000" class="colors_box" data-brightness="dark"></span>
<span data-color="#fff" class="colors_box" data-brightness="light"></span>
<span data-color="#f00" class="colors_box" data-brightness="light"></span>
Using the-simplest-color-checker in React app:
import { Component } from 'react';
import {checkColor} from 'the-simplest-color-checker'
class App extends Component {
componentDidMount(){
checkColor({
selector: ".colors_box", //add any selector
optimize_text_color: true, //change text color depending on the background,
ifDark:{
textColor:"#fff"
},
ifLight:{
textColor:"#000"
}
})
}
render() {
return (
<div className="App">
<div className="boxes">
<span data-color="#000" className="colors_box">color box</span>
<span data-color="#fff" className="colors_box">color box</span>
<span data-color="#0f0" className="colors_box">color box</span>
<span data-color="#00f" className="colors_box">color box</span>
<span data-color="#f00" className="colors_box">color box</span>
</div>
</div>
);
}
}
export default App;
Using the-simplest-color-checker in Vue app:
import { checkColor } from "the-simplest-color-checker";
export default {
mounted() {
checkColor({
selector: ".colors_box", //add any selector
optimize_text: true,
ifDark:{
textColor:"#fff"
},
ifLight:{
textColor:"#000"
}
});
},
};
Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE
for more information.
Contact
Ahmed Mansour - @amans199 - [email protected]
Project Link: https://github.com/amans199/the-simplest-color-checker