Alternating MuiTab Styles between tab rows with light/dark theme? Overrides or CSS?

PowerShell Universal Universal Dashboard
1

I’ve been toying with some UX improvements based on feedback and want to try to implement a 2-tier color scheme for the tab rows. The dashboard I’m working with often has two but sometimes up to four rows of child tabs, and this would help better visually separate the tiers.

This is what I was able to do by adjusting the styling directly in Edge Dev Tools:

image
image1837×862 79.6 KB

The only issue is, I have both a light and dark theme. If I try to do it via overrides, I don’t think I’ll be able to have two separate tab tier colours. If I do it via the CSS stylesheet, it will have to be a single color scheme for both light and dark modes. Am I missing something?

Product: PowerShell Universal
Version: 3.1.6
2

CSS

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

Button/Switch Function

function colorFlip() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
3

I’ve been using the UD Themes functionality for the light/dark mode in itself, and am poking at two different CSS classes for the even/odd rows. I’m just working on getting the styling to cascade down from New-UDTabs to its child elements. It’s working partially, but currently figuring out how to target the currently-selected tab. :thinking:

These two classes are working correctly:

.oddNumberTabRow {
	background: #003168;
}

.oddNumberTabRow * button {
	color: #E7EEF1 !important;
}

A third that is attempting to set a highlight color as the background for the selected button isn’t just yet.