How to change color of tab text?

Help
1

I need CSS to change color of tab text.
1

2

There are a bunch of different states a tab can be in. Luckily there are Obsidian variables that work with the default theme:

.theme-dark {  
  --tab-text-color: var(--color-orange);
  --tab-text-color-active: var(--color-green);
  --tab-text-color-focused: var(--color-orange);
  --tab-text-color-focused-active: var(--color-green);
  --tab-text-color-focused-highlighted: var(--color-green);
  --tab-text-color-focused-active-current: var(--color-green);
}

Screenshot 2023-04-24 082258
Screenshot 2023-04-24 082258954×74 3.15 KB

Unfortunately these don’t seem to work in the two community themes I tested. :frowning: Something like this should, but may need more adjusting depending on theme…

/*- tab text color -*/
.workspace .mod-root .workspace-tab-header-inner-title {
  color: var(--color-green) !important;
}

/*- focused tab text color -*/
.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--color-orange) !important;
}

Screenshot 2023-04-24 082442
Screenshot 2023-04-24 082442966×70 3.97 KB

2 Likes
3

Thank you very much! :+1:

4

I spent a few minutes working out exactly how each of these variables is used, in the default theme at least, for my own benefit and thought I’d post it here for anyone else who, like me, found this topic while looking for reference beyond what’s in the documentation. (My only real end goal was to make the current stacked tab stand out better, but I guess I got a bit sidetracked.)

.theme-dark {
	/* Tabs: non-current tab title and X while window unfocused */
	/* Stacked Tabs: non-current tab while window unfocused */
	--tab-text-color: #ff0000;
	
	/* Tabs, Stacked Tabs: current tab title while window unfocused */
	--tab-text-color-active: #00ff00;
	
	/* Tabs: Excepting mouse hover, all tab X buttons when window is focused, and current tab X when unfocused. */
	/* Stacked Tabs: non-current tab title while window focused, and ALL X buttons always */
	--tab-text-color-focused: #0000ff;
	
	--tab-text-color-focused-active: #ff00ff;
	--tab-text-color-focused-highlighted: #ffff00;
	
	/* Tabs: Current tab title while window focused. Any tab X button when hovered. */
	/* Stacked Tabs: current tab title while window focused. */
	--tab-text-color-focused-active-current: #00ffff;
}
3 Likes