Color Palette

The Rokkit library provides a versatile palette containing various shades of the following colors:

Each color in the palette has shades ranging from 50 to 950, allowing users to customize the appearance of their applications with a wide range of color options.

The preview section shows the current palette with all the colors and their respective shades. Try clicking on the dark/light mode toggle to see how the palette looks in different modes.

Color Palette Preview

Usage

Users can apply colors from the Rokkit palette to different elements of their application using the following classes:

Background Colors

Border Colors

Text Colors

💡CSS Variables

You can also use CSS variables to apply colors directly to elements:

Customization

The Rokkit library allows users to customize the palette by calling the themeRules(themename, mapping, colors) function.

Function Parameters

• themename: Name of the theme to be customized
• mapping: A map that provides overrides for specific colors in the palette
• colors: An object containing standard defaults for all palette colors

Example Implementation

Integration

You can include the call to the themeRules function in your uno.config.js in the rules section to apply the custom theme to your application.