Theme keys are extremely confusing

[Araxeus]

Reproduction steps

Try to customize checkboxes in a theme / theme_override

Current vs. Expected behavior

1. Spend 2 hours trying to figure out the key for customizing checkbox color
2. search https://github.com/zed-industries/zed/blob/main/crates/theme/src/styles/colors.rs for the right value
3. find element.disabled controls checkbox disabled color (ok makes sense all good)
4. try all keys in https://github.com/zed-industries/zed/blob/main/crates/theme/src/styles/colors.rs and none of them work for enabled checkboxes
5. try to understand from https://github.com/zed-industries/zed/blob/main/crates/ui/src/components/toggle.rs#L226C25-L226C33 what is the right key
6. give up and reverse engineer colors in other themes
7. hours later find the right value is info

what? element.disabled controls disabled checkboxes and info controls enabled checkboxes?

would be cool if we didn't need to spend hours reverse engineering themes for such simple things

ps. I have a question, is this whole program AI generated? because those are some extremely weird decisions for humans to do

Zed version and system specs

Zed: v0.215.3-90+fda162bf3d9a11d18e07cbf2b488829450135d34 (Zed)
OS: Windows 10.0.19045
Memory: 31.9 GiB
Architecture: x86_64
GPU: NVIDIA GeForce RTX 5070 Ti || NVIDIA Corporation || 581.57 r581_55

[Araxeus]

this thread looks AI generated ngl

im not sure if you're serious or not... if this 7 lines badly formatted issue seriously looks AI generated to you then you need to visit a ripperdoc and install new eyes implant

It's also very cool how you completely avoided the actual issue... very good behavior

once again, why does element.disabled controls disabled checkboxes and info controls enabled checkboxes?

[karearl]

@rawandahmad698 🤡
gj on the deleted comment mr clown man

[karearl]

the issue is what would logically be called element.enabled is called info which makes 0 sense..

[Araxeus]

can you reply to my question? its now the 3rd time im asking:

why does element.disabled controls disabled checkboxes and info controls enabled checkboxes?

how does that makes sense to a human being?

you can't take me seriously? really? maybe try to understand that i spent hours debugging this shit just because it makes no sense so it made me frustrated?

[danilo-leal]

Hey, thanks for the issue. The enabled checkbox colors are defined in here:

zed/crates/ui/src/components/toggle.rs

Line 181 in e75a7ae

let color = if self.disabled {

We use the text_accent token a lot for what would be the opposite of element_disabled, and I agree it'd probably make sense to have a general accent token that's used for everything, maybe as the above-linked PR tried to create, element_enabled. We're revising the theme structure as we speak and hope to add/remove some confusing things soon enough, as well as a better way to version and introduce changes to the structure.

I'll close this issue for now.

[Araxeus]

@danilo-leal I think you're wrong, this issue is about a switch not a checkbox, what you linked is the checkbox code
text_accent is actually never used for checkboxes

To get the color for a switch - get_colors is called

zed/crates/ui/src/components/toggle.rs

Line 450 in e75a7ae

let (bg_color, border_color) = self.color.get_colors(is_on, cx);

which then leads to either theme().colors().element_disabled if disabled (ok)
or cx.theme().status().info if enabled (weird)

zed/crates/ui/src/components/toggle.rs

Lines 293 to 326 in e75a7ae

	fn get_colors(&self, is_on: bool, cx: &App) -> (Hsla, Hsla) {
	if !is_on {
	return (
	cx.theme().colors().element_disabled,
	cx.theme().colors().border,
	);
	}
	match self {
	SwitchColor::Default => {
	let colors = cx.theme().colors();
	let base_color = colors.text;
	let bg_color = colors.element_background.blend(base_color.opacity(0.08));
	(bg_color, colors.border_variant)
	}
	SwitchColor::Accent => {
	let status = cx.theme().status();
	(status.info.opacity(0.4), status.info.opacity(0.2))
	}
	SwitchColor::Error => {
	let status = cx.theme().status();
	(status.error.opacity(0.4), status.error.opacity(0.2))
	}
	SwitchColor::Warning => {
	let status = cx.theme().status();
	(status.warning.opacity(0.4), status.warning.opacity(0.2))
	}
	SwitchColor::Success => {
	let status = cx.theme().status();
	(status.success.opacity(0.4), status.success.opacity(0.2))
	}
	SwitchColor::Custom(color) => (*color, color.opacity(0.6)),
	}
	}

toggles are created by default with the SwitchColor::Accent color

zed/crates/settings_ui/src/settings_ui.rs

Lines 3502 to 3504 in ef76f07

	Switch::new("toggle_button", toggle_state)
	.tab_index(0_isize)
	.color(SwitchColor::Accent)

which means text_accent is never used, only status.info which is for some reason the color because the switch has SwitchColor::Accent

A much simpler fix is to create the switch with the default color instead of accent, which means changing:

zed/crates/settings_ui/src/settings_ui.rs

Lines 3502 to 3504 in ef76f07

	Switch::new("toggle_button", toggle_state)
	.tab_index(0_isize)
	.color(SwitchColor::Accent)

to

 Switch::new("toggle_button", toggle_state) 
     .tab_index(0_isize) 
     .color(SwitchColor::Default) 

OR

you could change this line:

zed/crates/ui/src/components/toggle.rs

Lines 308 to 311 in e75a7ae

	SwitchColor::Accent => {
	let status = cx.theme().status();
	(status.info.opacity(0.4), status.info.opacity(0.2))
	}

to

SwitchColor::Accent => {
     let colors= cx.theme().colors();
     (colors.element_selected(0.4), colors.element_selected.opacity(0.2))
}

OR you could indeed refactor the whole logic if you want