Skip to content

feat(DNA): Add customizable color props to DNA loader #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Signor1
Copy link

@Signor1 Signor1 commented Jun 29, 2025

Summary

This pull request resolves issue #156 by adding the ability to customize the colors of the DNA loader component directly via props. Previously, the colors were hardcoded, forcing users to rely on CSS overrides.

Changes

  • Introduced dnaColorOne and dnaColorTwo props: The DNA component now accepts two optional string props to set the colors of the DNA strands.
  • Dynamic Animation Colors: To ensure the animation looks great with any color, this PR adds the tinycolor2 library. It dynamically generates the intermediate frame of the color animation, preserving the original aesthetic (one color brightens, the other fades).
  • Removed Hardcoded Colors: All hardcoded fill colors in the SVG have been replaced with the new props.
  • Added New Dependency: tinycolor2 is now a dependency.

How to Use

The new props make customization simple and declarative.

Before:

// No way to change colors without CSS
<DNA />

Now:

<DNA
  dnaColorOne="#3056D3" // A custom blue
  dnaColorTwo="#E52727" // A custom red
/>

@Signor1 Signor1 mentioned this pull request Jun 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant