Contrast between color and text isn't calculated in the config to always be able to read it

[Porkepix]

Description of the Problem

Current master, screenshots taken on Wezterm, example with the native color scheme (but applicable to many other themes); first screenshot just shows the zone. Second screenshot have had me select one of the options. Third and fourth screenshot have me selecting one option, and then "entering" into it, making the border around the selection invisible.

[hasezoey]

I agree that the Themes & Colors style editor should be more readable. It currently simply uses the color it has selected for the entire area to preview it.

Termusic never calculates or does anything with contrast (and i dont think it ever will) - especially because we dont even know what color in native might be in use (for very bad example, ANSI black and white may be set to #fff and #ffee00(yellow-ish) respectively)

Any suggestions how those components should change to still be readable, but also be able to preview the color (in both empty space and in text space)?

[Porkepix]

Any suggestions how those components should change to still be readable, but also be able to preview the color (in both empty space and in text space)?

Well, does that mean termusic does not always know the hex code of the color? Because if it's known I'd say libs probably exist to pick a color for border and text calculated from the other color to always be able to read it? Like complementary colors?

[hasezoey]

Well, does that mean termusic does not always know the hex code of the color

termusic only knows the rgb values if any theme except Native is used.

Because if it's known I'd say libs probably exist to pick a color for border and text calculated from the other color to always be able to read it? Like complementary colors?

Note that Theme(color selection / palette) and Style(color application, for the lack of a better term) are 2 different things.

Also note that the Style components (color application) are currently setting each color they use as the background color for big preview, which can make the text unreadable. Anything beyond that (like combining white and yellow), i would say is user error.

I dont really want to make the theme editor more complex. If you want to create a theme, i think there are better tools available.

Any suggestions how those components should change to still be readable, but also be able to preview the color (in both empty space and in text space)?

Just as clarification, i am asking suggestions for how the Style components should be changed in terms of looks (like what text is where, and what color that text should have), to make the text readable, while still having a place to preview the colors.

[Porkepix]

Well, does that mean termusic does not always know the hex code of the color

termusic only knows the rgb values if any theme except Native is used.

Because if it's known I'd say libs probably exist to pick a color for border and text calculated from the other color to always be able to read it? Like complementary colors?

Note that Theme(color selection / palette) and Style(color application, for the lack of a better term) are 2 different things.

Also note that the Style components (color application) are currently setting each color they use as the background color for big preview, which can make the text unreadable. Anything beyond that (like combining white and yellow), i would say is user error.

I dont really want to make the theme editor more complex. If you want to create a theme, i think there are better tools available.

Any suggestions how those components should change to still be readable, but also be able to preview the color (in both empty space and in text space)?

Just as clarification, i am asking suggestions for how the Style components should be changed in terms of looks (like what text is where, and what color that text should have), to make the text readable, while still having a place to preview the colors.

I think there's a misunderstanding here; I discovered the issue merely by walking the built-in themes: you go over one and press enter, and its complete color scheme in shown on the right. I wasn't trying to build a new theme from the ground up, but just looked at some of the available ones (and especially, I discovered the bug when going to the native theme for testing purpose for another issue).

And here, I think on the right panel the borders and texts should be calculated from the background color inside the component, as a complementary color. I'm pretty sure such tools exist, but I don't know if a Rust crate for this exist (a little search gets me nothing for now, but maybe I'm not searching with the correct wording).

EDIT: Found https://github.com/ducflair/bigcolor#contrast-and-accessibility but I'm not sure this is what we're looking for here.

EDIT2: Also found https://github.com/ruurdbijlsma/material-color-utilities-rs but this is a brand new port (only 4 days old!), so I don't know how much usable it is and if it even have a complete feature set. The temperature component might be what fits, but not easy to find usage/contexts

[hasezoey]

Just as clarification, i am asking suggestions for how the Style components should be changed in terms of looks (like what text is where, and what color that text should have), to make the text readable, while still having a place to preview the colors.

I think there's a misunderstanding here; I discovered the issue merely by walking the built-in themes: you go over one and press enter, and its complete color scheme in shown on the right. I wasn't trying to build a new theme from the ground up, but just looked at some of the available ones (and especially, I discovered the bug when going to the native theme for testing purpose for another issue).

I think there is a additional misunderstanding; currently the background color in the Style components (everything on the right) is decided by the color that is selected / shown in the text, which can result in very low contrast with the text color (which does not change).
Hence why i said the Style components currently have bad theming and my question on how to re-design them (or at the least the color application) to still preview the color they select, while still making everything entirely readable. (Hopefully without having to use a contrast utility).

For context, the LEFT list is the theme, or also called palette, which can be viewed in the config toml under theme.*; this contains the hex codes / rgb values.
While on the RIGHT, the Style components use the "color" they have selected as the background, the settings correspond to the config toml style.* entries.

(Note that there is a difference due to needing some kind of mapping for the ANSI colors, which may not be intuitive for non-native themes).

[Porkepix]

I get the difference, but when you select a style and then hit enter, it changes the whole colors on the right in the Style component. That's how I've seen these colors issues. And I think the way it's currently presented is fine but can't think of any solution besides adapting text and border colors to the background in contrast: using complementary colors.
Or there's one but it means redesigning the zone to add padding to the border to still see it, and extract the text out of the zone and put it elsewhere.