search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.27k stars 3.59k forks source link

Enhance isColor Utility to Support Theme Variables for Improved Dark Mode Compatibility #16260

Open sebastianapw opened 3 weeks ago

sebastianapw commented 3 weeks ago

Description: The current implementation of the isColor utility function is limited to recognizing traditional color formats such as HEX and HSL as valid colors. This limitation hinders the ability to seamlessly adapt UI components, like tables, to different themes, including dark mode, through the use of theme variables.

Proposed Enhancement: I propose extending the isColor utility’s capabilities to include support for CSS custom properties (theme variables) as valid color definitions. This enhancement would enable developers to define and utilize a custom color palette based on theme variables, thereby facilitating a more flexible and theme-responsive design.

Example Use Case: Consider the following scenario where a custom color palette is defined using a theme variable:

const customColorPalette = [
    {
        color: 'var(--color-danger-transparent-200)',
        label: 'Red'
    }
]

With the proposed enhancement, the isColor utility would recognize 'var(--color-danger-transparent-200)' as a valid color, allowing for its use in dynamically changing UI components based on the active theme, such as switching between light and dark modes.

📃 Other details

If you'd like to see this improvement implemented, add a 👍 reaction to this post.