Kevin

⋮ Change Colors

Primary

primary-50

primary-100

primary-200

primary-300

primary-400

primary-500

primary-600

primary-700

primary-800

primary-900

Secondary

secondary-50

secondary-100

secondary-200

secondary-300

secondary-400

secondary-500

secondary-600

secondary-700

secondary-800

secondary-900

Gray

gray-50

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

gray-700

gray-800

gray-900

Inverted

inverted-50

inverted-500

Use the color pickers to customize the color scheme. Click Apply to update, or Reset to restore defaults.

Export Colors

--color-primary-50: ;
--color-primary-100: ;
--color-primary-200: ;
--color-primary-300: ;
--color-primary-400: ;
--color-primary-500: ;
--color-primary-600: ;
--color-primary-700: ;
--color-primary-800: ;
--color-primary-900: ;
--color-secondary-50: ;
--color-secondary-100: ;
--color-secondary-200: ;
--color-secondary-300: ;
--color-secondary-400: ;
--color-secondary-500: ;
--color-secondary-600: ;
--color-secondary-700: ;
--color-secondary-800: ;
--color-secondary-900: ;
--color-gray-50: ;
--color-gray-100: ;
--color-gray-200: ;
--color-gray-300: ;
--color-gray-400: ;
--color-gray-500: ;
--color-gray-600: ;
--color-gray-700: ;
--color-gray-800: ;
--color-gray-900: ;
--color-inverted-50: ;
--color-inverted-500: ;

The exported colors can be copied and shared. Click 'Copy to clipboard' to copy the colors.

Import Colors

Paste the color values into the text area and click 'Import colors' to apply the new color scheme.

Color Scheme Editor Help

The Color Scheme Editor allows you to change and customize the colors used in the application. This help text will guide you through all the features available in the editor.

Change Colors

The Change Colors section lets you modify the colors used in the application. There are different color groups available, each containing multiple shades numbered from 50 (lightest) to 900 (darkest).

Example: To change a color, locate the corresponding color input field (e.g., color-primary-500) and choose a new color. The color value will be updated accordingly.

Apply Colors

After making your color adjustments, click the "Apply" button to save your changes and apply the new color scheme to the application.

Reset Colors

If you want to revert the colors to their initial state, click the "Reset" button. This will discard any unsaved changes and restore the original color scheme.

Import Colors

If you have a color configuration that you would like to use, click the "Import" button. This will open a new overlay where you can paste the color configuration, and then click the "Import colors" button to apply it to the application.

Example: A valid color configuration would look like:

--color-primary-50: #f0f9ff;
--color-primary-100: #e0f2fe;
--color-primary-200: #bae6fd;
...

Export Colors

If you want to save the current color scheme to use in another application or share it with someone else, click the "Export" button. This will open a new overlay with the color configuration that you can copy to your clipboard by clicking the "Copy to clipboard" button.

Drag Dialog

The editor dialog is draggable, so feel free to move it around as needed.