How to configure the checked content tab's background color

[santaimpersonator]

How can I reinstate the background accent color on the checked/active content tab?

Previously (in v8.3.1), the checked/active tab would feature an accented background-color:

Source: #3833

Currently, the checked/active tab featuress a --md-default-fg-color text color :

As far as I can determine from inspecting the element, this is the modification that is required in the extra.css file:

.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child,.md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),.md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),.md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),.md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),.md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),.md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),.md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),.md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),.md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),.md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),.md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),.md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20),.md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),.md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),.md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),.md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),.md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),.md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),.md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9) {
  background-color: var(--md-accent-fg-color);
}

However, I assume there is a better way to implement the modification that I am not aware of. Maybe in content.html or _tabbed.scss (from commit history: 5deec28?diff=split&w=0#diff-dbced4a35e10d8879f35ea6cbd0074a6a8fb687dd330bc7344c3a787164baea4L118-R123)?

[kamilkrzyskow]

Hello @santaimpersonator,
yes setting this selector in the extra.css file is the most straightforward way to get what you want.
However, perhaps this would be closer to the initial screenshot:

color: var(--md-accent-fg-color);
background-color: var(--md-mermaid-sequence-loop-bg-color);

The black bar is managed by the .js .md-typeset .tabbed-labels:before selector, and you need to set the background color for it separately.
Also the selector doesn't have to be written in a single long line, you can break line after each comma.

As for the other files:

• _tabbed.scss needs to be compiled into CSS for the browser to load it later, so if you're willing to maintain your own version of the mkdocs-material theme then this would be the best approach
• content.html contains the JavaScript that links the tabs together when the users uses the content.tabs.link feature, this code runs only once after the page loads. You could add some JavaScript here to add an event listener which would detect changes and sync the checked inputs and labels, but you can also do that in extra.js without having to override the partial file, and this approach won't be as straightforward as the long selector.

[santaimpersonator]

Haha, we must have replied at the same time...
Cool, thanks for the tip on breaking the line up.

[santaimpersonator]

Here is our current solution: (see #6699 (reply in thread))

Light Theme	Dark Theme

Modification to docs/stylesheet/extra.css:

/* ================================================================================== */
/* Content Tabs                                                                       */
/* ================================================================================== */

/* Sets color of active label to accent, when mouse is hovered over item */
.md-typeset .tabbed-labels > label > a:hover {
  background-color: var(--md-accent-fg-color);
}

/* Sets color of active label to primary */
.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child,
.md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),
.md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),
.md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),
.md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),
.md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),
.md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),
.md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),
.md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9),
.md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),
.md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),
.md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),
.md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),
.md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),
.md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),
.md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),
.md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),
.md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
.md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
.md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
  background-color: var(--md-primary-fg-color--light);
}

The color variables are based on the color palette that is defined for our light/dark theme in the mkdocs.yml file:

  # Adds light/dark theme to the webpage
  palette:
    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      primary: grey
      accent: red
      toggle:
        icon: material/brightness-auto
        name: Switch to dark mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      primary: grey
      accent: red
      scheme: default 
      toggle:
        icon: material/brightness-7
        name: Switch to system preference

    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      primary: grey
      accent: red
      scheme: slate
      toggle:
        icon: material/weather-night
        name: Switch to light mode    

[santaimpersonator]

Yeah, I couldn't find a preset (primary, default, or accent) color that matched really well. I'll take a look at the mermaid-sequenceone variables that you suggested 👍

I get the streamlined/clean look that the designers are going for there. However, we need the tabs accented; otherwise, we have found that a bunch of our users don't realize that the tabs are there. Especially, with the white-onwhite or dark-on-dark... they just scroll right past the information they are looking for 😅

[kamilkrzyskow]

You could also try to use a left/top/right border or outline with your red accent color instead of the background. Putting things in a visible box helps with readability. Personally, I'm not really a fan of white-space content management like seen in Spotify or YouTube or Material design in general 😅 I'm a big fan of content divided with clear lines.

[santaimpersonator]

Unfortunately, I couldn't figure out a way to invert the color variable based on the palette...

• Light Theme: var(--md-code-bg-color--light)
• Dark Theme: var(--md-code-bg-color--dark)

I used the red accent for the hover, mostly because it matched the action of the hyperlinks (i.e. associate with clickable elements)

---

I'm sure there is a better contrast option, but this seemed like a decent compromise:

• Added an outline and light background shade to the labels
• On the active label, changed the outline color to match the border color of .js .md-typeset .tabbed-labels:before and removed the background shading

Light Theme	Dark Theme

Modification to docs/stylesheet/extra.css:

/* ================================================================================== */
/* Content Tabs                                                                       */
/* ================================================================================== */

/* Sets the background color of the labels and creates an outline */
.md-typeset .tabbed-labels > label {
  background-color: var(--md-code-bg-color--light);
  border-top: .1rem solid var(--md-default-fg-color--lighter);
  border-left: .1rem solid var(--md-default-fg-color--lighter);
  border-right: .1rem solid var(--md-default-fg-color--lighter);
  margin-left: .1rem;
  margin-right: .1rem;
}

/* Sets background color of active label to accent, when mouse is hovered over item */
.md-typeset .tabbed-labels > label > a:hover {
  background-color: var(--md-accent-fg-color);
}

/* Sets the color of the background and outline on the active label */
.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child,
.md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),
.md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),
.md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),
.md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),
.md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),
.md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),
.md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),
.md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9),
.md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),
.md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),
.md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),
.md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),
.md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),
.md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),
.md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),
.md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),
.md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
.md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
.md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
  background-color: #0000;
  border-top: .1rem solid var(--md-default-fg-color);
  border-left: .1rem solid var(--md-default-fg-color);
  border-right: .1rem solid var(--md-default-fg-color);
}

[kamilkrzyskow]

It turned out great IMHO, the contrast is better than the previous iteration and the border combined with the margin also helps a lot.

I'm surprised the "moving bar" under the tabs has a bigger width after adding the border and margin, and the width is correct for the middle and right tabs it only overflows for the initial left one, I'm not sure how to fix that 🤔

As for changing stuff based on the palette, I guess, you'd have to make 2 versions of the selector with a prefixed [data-md-color-scheme=slate] and [data-md-color-scheme=default] and since this selector is actually 20 selectors back to back you'd have 40 of them later 😅
[data-md-color-scheme=slate] .md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child...

[santaimpersonator]

I also noticed that artifact... looks like it could be a rounding error from how --md-indicator-width is calculated. I can live with the minor artifact, without needing to dig further down the rabbit hole...

Haha! Yeah, without doing a lot of work to get pull requests merged... I think I 'm happy with the current results.

[santaimpersonator]

Well, I found an issue with my suggested solution... if the tab's title includes `code` or a ++"button"++. This is illustrated in the examples below, when hovering over specific tabs:

• For both themes, the RDY code block completely disappears into the hover background color
• In the dark theme, the PMIC button's background matches the hover background color

Light Theme

Dark Theme

[santaimpersonator]

Initially, my solution was to hard code a compatible backgorund color: #547cc6b7

/* Sets background color of active label to accent, when mouse is hovered over item */
.md-typeset .tabbed-labels > label > a:hover {
	background-color: #547cc6b7;
}

While this was fine in the light theme, it left a blue hue on Buttons in the dark theme. This is because the default configuration of --md-typeset-kbd-color variable:

• Dark Theme: hsla(var(--md-hue),15%,90%,0.12)
• Light Theme: #fafafa

---

To resolve this issue, I had to configure a color aesthetic for the keyboard buttons that match both themes:

/* Sets kbd button aesthetic */
.md-typeset {
	--md-typeset-kbd-color:rgb(80, 80, 80);
	--md-typeset-kbd-border-color: rgb(175, 175, 175);
	--md-typeset-kbd-accent-color: hsla(0, 0%, 50%, 0.4);
}

.md-typeset kbd {
	color:#ffffff;
}

[santaimpersonator]

Current Solution:

Light Theme

Dark Theme

---

Required modification to docs/stylesheet/extra.css:

/* ================================================================================== */
/* Content Tabs                                                                       */
/* ================================================================================== */

/* Sets the background color of the labels and creates an outline */
.md-typeset .tabbed-labels > label {
  background-color: var(--md-code-bg-color--light);
  border-top: .1rem solid var(--md-default-fg-color--lighter);
  border-left: .1rem solid var(--md-default-fg-color--lighter);
  border-right: .1rem solid var(--md-default-fg-color--lighter);
  margin-left: .1rem;
  margin-right: .1rem;
}

/* Sets background color of active label to accent, when mouse is hovered over item */
.md-typeset .tabbed-labels > label > a:hover {
	/* Light Blue */
	background-color: #547cc6b7;
}

/* Sets kbd button aesthetic */
.md-typeset {
	--md-typeset-kbd-color:rgb(80, 80, 80);
	--md-typeset-kbd-border-color: rgb(175, 175, 175);
	--md-typeset-kbd-accent-color: hsla(0, 0%, 50%, 0.4);
}

.md-typeset kbd {
	color:#ffffff;
}


/* Sets the color of the background and outline on the active label */
.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child,
.md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2),
.md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3),
.md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4),
.md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5),
.md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6),
.md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7),
.md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8),
.md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9),
.md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10),
.md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11),
.md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12),
.md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13),
.md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14),
.md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15),
.md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16),
.md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17),
.md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18),
.md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19),
.md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20) {
  background-color: #0000;
  border-top: .1rem solid var(--md-default-fg-color);
  border-left: .1rem solid var(--md-default-fg-color);
  border-right: .1rem solid var(--md-default-fg-color);
}