[create-theme]: Better Tab Indicators

[TheRealMG]

Name

Better Tab Indicators

Description

This Zen Theme provides some alternative styling for the tabs on the sidebar.

Homepage

https://github.com/TheRealMG/zen-themes/tree/main/BetterTabIndicators

Image

https://raw.githubusercontent.com/TheRealMG/zen-themes/refs/heads/main/BetterTabIndicators/image.png

Type

• [ ] JSON Color Theme

Theme Styles

@media (-moz-bool-pref: "zen.tabs.vertical") {
  /* Tab Borders Based on Preference */
  .tabbrowser-tab:not([pinned]):is([multiselected="true"], [selected]) {
    &:has(#uc-tabs[uc-tabs-preferred_color="primary"]) .tab-background {
      border: 2px solid var(--zen-colors-primary) !important;
    }
    &:has(#uc-tabs[uc-tabs-preferred_color="secondary"]) .tab-background {
      border: 2px solid var(--zen-colors-secondary) !important;
    }
    &:has(#uc-tabs[uc-tabs-preferred_color="tertiary"]) .tab-background {
      border: 2px solid var(--zen-colors-tertiary) !important;
    }
    &:has(#uc-tabs[uc-tabs-preferred_color="border"]) .tab-background {
      border: 2px solid var(--zen-colors-border) !important;
    }
    &:has(#uc-tabs[uc-tabs-preferred_color="custom"]) .tab-background {
      @media (prefers-color-scheme: light) {
        border: 2px solid var(--uc-tabs-preferred_color, #000000) !important; /* Fallback to black */
      }
      @media (prefers-color-scheme: dark) {
        border: 2px solid var(--uc-tabs-preferred_color, #ffffff) !important; /* Fallback to white */
      }
    }
  }

  /* Background Modification for Selected Tab */
  #tabbrowser-tabs {
    & .tabbrowser-tab {
      &[selected] .tab-background {
        background: color-mix(
          in srgb,
          var(--zen-colors-secondary) 40%,
          transparent
        ) !important;
      }
    }
  }

  /* Dimming Tab Text When Unloaded */
  @media (-moz-bool-pref: "uc.tabs.dim_unloaded") {
    #tabbrowser-tabs {
      & .tabbrowser-tab {
        @media (-moz-bool-pref: "zen.tabs.dim-pending") {
          &[pending="true"] .tab-text {
            opacity: 0.5; /* Dimmed text for pending tabs */
          }
        }
      }
    }
  }
}

Readme

# Better Tab Indicators
Options for customizing tabs on the sidebar.
- Adds a border around active tabs.
- Dims the title of tabs when unloaded.

Preferences

[
  {
    "property": "uc.tabs.preferred_color",
    "label": "Preferred color for tab border",
    "type": "dropdown",
    "options": [
      {
        "label": "Zen primary",
        "value": "primary"
      },
      {
        "label": "Zen secondary",
        "value": "secondary"
      },
      {
        "label": "Zen tertiary",
        "value": "tertiary"
      },
      {
        "label": "Zen border",
        "value": "border"
      },
      {
        "label": "Custom color",
        "value": "custom"
      }
    ]
  },
  {
    "property": "uc.tabs.custom_color_hex",
    "label": "Custom Color (Hex)",
    "type": "string", 
    "defaultValue": "#ffffff",
    "placeholder": "#ffffff"
  },
  {
    "property": "uc.tabs.dim_unloaded",
    "label": "Dim Unloaded Tabs",
    "type": "boolean",
    "defaultValue": false
  }
]

[github-actions[bot]]

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Field must be one of checkbox, dropdown, string but received boolean