dye.js – Color Library

What is Dye.JS

Dye.js – A Dynamic Color Adaptation Library for Enhanced Accessibility

As a passionate web developer, I created dye.js, a lightweight and blazing-fast JavaScript library that dynamically adapts the color of HTML elements based on their own or their parent element’s background color. Developed using TypeScript, Dye.js simplifies the process of maintaining color contrast and adhering to Web Content Accessibility Guidelines (WCAG) best practices, ensuring a seamless experience for users with diverse accessibility needs.

Use case

I recognized a common challenge faced by web developers: ensuring that text, icons, and other elements remain visible and accessible when the background color of a web page changes due to user input or other factors. Dye.js was developed to reduce repetitive code and streamline the process of updating element colors in real-time. By simply adding a custom data attribute, developers can now easily implement this powerful solution in their projects.

One of the most remarkable features of Dye.js is its ability to work with both text elements and black and white images or icons. The library intelligently detects gradients with up to three colors and solid colors, providing a versatile solution for a wide range of design scenarios

Features & Advantages of using dye.js

• 🎨 Dynamic Color Adaptation: Dye.js intelligently adjusts the color of HTML elements based on their own or their parent element’s background color, ensuring optimal visibility and accessibility.
• ♿ WCAG Compliance: By maintaining appropriate color contrast, Dye.js helps developers adhere to Web Content Accessibility Guidelines (WCAG) best practices, creating a more inclusive web experience for all users.
• 🧩 Easy Integration: Adding a custom data attribute is all it takes to implement Dye.js, streamlining the process of updating element colors in real-time and reducing repetitive code.
• 🔧 Versatile Compatibility: Dye.js works with both text elements and black and white images or icons, making it a flexible solution for a wide range of design scenarios.
• 🌈 Gradient Detection: The library can detect gradients with up to three colors, as well as solid colors, providing a versatile and robust solution for dynamic color adaptation.
• ⚡ Lightweight and Fast: Developed using TypeScript, Dye.js is a lightweight and fast library that won’t hinder your website’s performance.
• 🚀 Active Development: Dye.js is under continuous development, with new features and enhancements being added to improve its functionality and versatility.
• 🎯 Simplified Element Targeting: Dye.js allows developers to target specific elements using CSS-like selectors (IDs and classes), making it easy to control which elements receive dynamic color updates.
• 🌐 Cross-Browser Support: Dye.js works seamlessly with modern browsers, ensuring consistent performance and compatibility across different platforms.
• 🤝 Open-Source Community: As an open-source project, Dye.js encourages collaboration and contribution from the developer community, fostering growth and improvements to the library.

1. ELEMENTS

To apply Dye.js to a regular HTML element, simply add the “dye” attribute. This will work for elements that have their own background color.

The above instruction works for elements with a background color, or for images where the parent element has a background color. If the element doesn’t have a background color, specify the parent:

2. IMAGES

Currently, Dye.js changes the color of black / white images or icons. Follow the same logic as above, but add the “blackimg” parameter for black source images:

By default, Dye.js checks the parent background color for images. To use a different color from a remote relative, provide the element to the dye=”” parameter:

3. GRADIENTS

Starting from version 0.4.3, Dye.js supports gradients with up to three colors. Keep in mind that the output might not be 100% accurate for complex gradients, but it works well with simple gradient backgrounds. This feature currently only changes text color and supports RGB, RGBA, and HEX colors.

To use gradients, add the “gradient” attribute to elements with a gradient background.

IMPORTANT NOTES

When specifying a selector, identify it as a class or id using the syntax below.
Use . or # to inform Dye.js that the selector is an id or class, respectively.