Color values in the color picker not visible in dark themes

[Ruchita1010]

p5.js version

2.0.1

What is your operating system?

Windows

Web browser and version

Chrome 136.0.7103.93

Actual Behavior

The color values becomes invisible because the background color changes as per dark theme

Expected Behavior

Color values should remain clearly visible and readable in dark themes too.

Steps to reproduce

Steps:

1. Open a sketch in the web editor
2. Go to Settings and change your theme to either dark or high contrast
3. Press Ctrl/Cmd + K to o pen the color picker

[Ruchita1010]

I think either we change the text color or maybe not change the color picker theme at all, because the only thing that's changing here is the background color of the input fields. The background of the picker itself stays light-themed.

[yugalkaushik]

So the color picker is imported from Code Mirror and the Code Mirror is being updated to Version 6 and it would hopefully fix this issue.

[yashodipmore]

@Ruchita1010 Hi! 👋
I’d like to work on this issue. Could you please assign it to me?

🔧 My Approach:
I’ll inspect the current color picker input styles and identify the CSS classes or elements responsible.

I’ll apply conditional styling for the input text and background using CSS variables or class-based theming (e.g., data-theme="dark").

I’ll test the fix in both Light and Dark modes to ensure good readability and contrast.

If needed, I’ll also make the styles responsive to High Contrast mode.

Please assign this issue to me. Looking forward to contributing! 🙌

[Ruchita1010]

@yashodipmore it's not a custom color picker. It's imported from Code Mirror. And as @yugalkaushik mentioned the update to v6 might fix this issue.

Also, I am not a maintainer. I just happened to found a bug while I was working on a sketch.