Learn how to use the Dracula UI color system.
Dracula UI ships with a handcrafted color system that helps you design apps and websites that are pleasing and easy on the eyes.
The color system includes a variety of CSS classes, utilities, and properties that can be used to manage the main accent color, as well as override the colors of specific components and text.
Base / Accent Colors
Base colors are the elemental colors derived from the Dracula color palette. The entire palette was tested against the WCAG 2.0 level AA spec, which requires a contrast ratio of at least 4.5:1 for normal text, therefore affording the best readability.
Gradients can be used to add a more playful tone to your application, and can be very aesthetically pleasing when used in moderation.
Color Animations (Experimental)
The animated color takes gradients one step further by alternating gradient colors in an infinite loop.
Conveying Hiearchy with Colors
Conveying hierarchy is one of the most challenging problems when designing for Dark Mode. Dracula UI helps solve for it by providing transparent and secondary colors.
Utility Classes and Properties
Here's a full list of all CSS classes and React properties.