[create-theme]: Highlight Active Space

[countbasil]

Name

Highlight Active Space

Description

Highlights the active workspace with a customizable outline, tint, or glow.

Homepage

https://github.com/countbasil/zen-mods/tree/main/active-workspace-indicator

Image

https://github.com/countbasil/zen-mods/blob/main/active-workspace-indicator/image.png?raw=true

Type

• JSON Color Theme

Theme Styles

/* =============================================
   Active Workspace Indicator — Zen Mod
   Adds a visible indicator around the active
   workspace button in the sidebar.
   ============================================= */

/* Fix: parent container clips box-shadow by default.
   Setting overflow: visible allows the glow style
   to extend beyond the container bounds.            */
#zen-workspaces-button {
  overflow: visible !important;
}

/* Base: apply border-radius and transition to
   the active button regardless of style.            */
#zen-workspaces-button .subviewbutton[active="true"] {
  border-radius: var(--mod-active-workspace-indicator-radius, 6px) !important;
  transition: outline 0.15s ease,
              box-shadow 0.15s ease,
              background-color 0.15s ease !important;
}

/* ── Style: Outline ──────────────────────────
   Drawn with a negative offset so it sits flush
   against the button edge as a clean square.        */
@media (-moz-pref("mod.active-workspace-indicator.style", "outline")) {
  #zen-workspaces-button .subviewbutton[active="true"] {
    outline: 2px solid color-mix(
      in srgb,
      var(--mod-active-workspace-indicator-color, currentColor)
        var(--mod-active-workspace-indicator-opacity, 100%),
      transparent
    ) !important;
    outline-offset: -2px !important;
  }
}

/* ── Style: Background tint ──────────────────
   Fills behind the icon with a semi-transparent
   color. Recommended opacity: 20–30%.              */
@media (-moz-pref("mod.active-workspace-indicator.style", "background")) {
  #zen-workspaces-button .subviewbutton[active="true"] {
    background-color: color-mix(
      in srgb,
      var(--mod-active-workspace-indicator-color, currentColor)
        var(--mod-active-workspace-indicator-opacity, 25%),
      transparent
    ) !important;
  }
}

/* ── Style: Glow ─────────────────────────────
   A soft box-shadow emanating outward.
   Requires overflow: visible on the parent
   (set above) to avoid clipping.                   */
@media (-moz-pref("mod.active-workspace-indicator.style", "glow")) {
  #zen-workspaces-button .subviewbutton[active="true"] {
    box-shadow: 0 0 8px 3px color-mix(
      in srgb,
      var(--mod-active-workspace-indicator-color, currentColor)
        var(--mod-active-workspace-indicator-opacity, 100%),
      transparent
    ) !important;
  }
}

Readme

> ⚠️ **Alpha / Testing** — This mod is newly published and undergoing real-world testing. Image not up to date right now (but it looks good 😊)

# Active Workspace Indicator

Adds a visible indicator around the currently active workspace button in Zen's sidebar, so you always know at a glance which workspace you're in.

## Options

| Setting | Description | Default |
|---|---|---|
| **Indicator style** | `Outline` / `Background tint` / `Glow` | Outline |
| **Indicator color** | Any valid CSS color (`#fff`, `oklch(…)`, `cornflowerblue`, etc.) | `currentColor` (follows your workspace theme) |
| **Opacity** | A CSS percentage controlling indicator intensity | `100%` |
| **Corner radius** | Border radius of the indicator | `6px` |

## Style guide

- **Outline** — drawn *outside* the element box, so it never shifts the sidebar layout. Fully opaque by default.
- **Background tint** — fills behind the workspace icon. Works best with a low opacity (20–30%); 100% gives a fully solid fill.
- **Glow** — a soft `box-shadow` emanating outward. Does not affect layout.

## Notes

- `currentColor` as the color value automatically follows whichever color your active workspace theme sets.
- The opacity preference uses `color-mix()` to blend the indicator color toward transparent, so the workspace icon itself is never affected.
- Outline and Glow are the most layout-safe choices on compact sidebars.

Preferences

[
  {
    "property": "mod.active-workspace-indicator.style",
    "label": "Indicator style",
    "type": "dropdown",
    "defaultValue": "outline",
    "options": [
      { "label": "Outline",          "value": "outline"     },
      { "label": "Background tint",  "value": "background"  },
      { "label": "Glow",             "value": "glow"        }
    ]
  },
  {
    "property": "mod.active-workspace-indicator.color",
    "label": "Indicator color (any CSS color: #fff, oklch(…), etc.)",
    "type": "string",
    "defaultValue": "currentColor",
    "placeholder": "e.g. #ffffff or oklch(0.8 0.15 250)"
  },
  {
    "property": "mod.active-workspace-indicator.opacity",
    "label": "Opacity (as a CSS percentage — lower = more transparent)",
    "type": "string",
    "defaultValue": "100%",
    "placeholder": "e.g. 80% — for Background style try 20–30%"
  },
  {
    "property": "mod.active-workspace-indicator.radius",
    "label": "Corner radius",
    "type": "string",
    "defaultValue": "6px",
    "placeholder": "e.g. 4px or 50%"
  }
]

[github-actions]

Error creating theme

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

Image must be 600x400 pixels.