[create-theme]: Better Tab Indicators 7

[TheRealMG]

Name

Better Tab Indicators 7

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": "checkbox",
    "defaultValue": false
  }
]

[github-actions[bot]]

Thank you for your contribution! :tada:

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-16 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.