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.