Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

contrast-js

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

contrast-js

Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the b

  • 0.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
15
decreased by-55.88%
Maintainers
1
Weekly downloads
 
Created
Source

Contrast.js logo

GitHub package.json version GitHub Size GitHub issues GitHub stars Live Demo

Contrast.js is a tiny (4.26kb) library with no dependencies that adds responsiveness to the color or background attributes of DOM elements based on the section of background image behind the target element. The library analyzes the background behind the bounding box of the target element by getting the average RGB values of pixels in the sub-rectangle behind the element and finding the best contrasting color.

In simple words, never worry about your color matching the background image again! No more countless media queries.

GIF demo


Buy me a coffee

Whether you use this project, have learned something from it, or just like it, please consider supporting it by buying me a coffee, so I can dedicate more time on open-source projects like this :)

Buy Me A Coffee


Features

  • Vanilla JS - no jQuery or any other dependencies
  • Very simple setup/activation
  • Support for responsive font color
  • Support for responsive div background color
  • Support for background-size: cover;
  • Support for background-size: 100%;
  • Option to add custom colors to switch between (Light/Dark)
  • Option to change activation class names
  • Option to turn on/off activation on window resize event

Setup

Clone this repo to your desktop and run npm install to install all the dependencies.

You might want to look into config.json to make change the port you want to use and set up a SSL certificate.


Usage

After you clone this repo to your desktop, go to its root directory and run npm install to install its dependencies.

Once the dependencies are installed, you can run npm start to start the application. You will then be able to access it at localhost:3000

To give yourself administrator permissions on the chat, you will have to type /role [your-name] in the app console.


License

You can check out the full license here

This project is licensed under the terms of the MIT license.

Keywords

FAQs

Package last updated on 23 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc