[create-theme]: Space Icon Boost

[sergiubacioiu]

Name

Space Icon Boost

Description

Space Icon Boost is a small mod that makes the Space icons at the bottom of the sidebar larger and easier to hit.

Homepage

https://github.com/sergiubacioiu/zen-mods/

Image

https://github.com/sergiubacioiu/zen-mods/blob/main/space-icon-boost/screenshot.png?raw=true

Type

• JSON Color Theme

Theme Styles

/* Space Icon Boost */

:root {
  --space-icon-boost-icon-size: var(--mod-space_icon_boost-icon_size, 22px);
  --space-icon-boost-hit-area: var(--mod-space_icon_boost-hit_area, 31px);
  --space-icon-boost-gap: var(--mod-space_icon_boost-gap, 4px);
  --space-icon-boost-radius: var(--mod-space_icon_boost-radius, 8px);
}

#zen-workspaces-button {
  gap: var(--space-icon-boost-gap) !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 4px !important;
  padding-inline: 0 !important;
}

#zen-workspaces-button > toolbarbutton,
#zen-workspaces-button > .subviewbutton,
#zen-workspaces-button toolbarbutton.subviewbutton {
  min-inline-size: var(--space-icon-boost-hit-area) !important;
  inline-size: var(--space-icon-boost-hit-area) !important;
  min-block-size: var(--space-icon-boost-hit-area) !important;
  block-size: var(--space-icon-boost-hit-area) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--space-icon-boost-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#zen-workspaces-button > toolbarbutton > .toolbarbutton-badge-stack,
#zen-workspaces-button > .subviewbutton > .toolbarbutton-badge-stack,
#zen-workspaces-button > toolbarbutton > .toolbarbutton-icon,
#zen-workspaces-button > .subviewbutton > .toolbarbutton-icon {
  min-inline-size: var(--space-icon-boost-hit-area) !important;
  min-block-size: var(--space-icon-boost-hit-area) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

#zen-workspaces-button .zen-workspace-icon,
#zen-workspaces-button .toolbarbutton-icon,
#zen-workspaces-button image.toolbarbutton-icon {
  inline-size: var(--space-icon-boost-icon-size) !important;
  block-size: var(--space-icon-boost-icon-size) !important;
  font-size: var(--space-icon-boost-icon-size) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

Readme

# Space Icon Boost

`Space Icon Boost` is a small Zen Browser mod that makes the Space icons at the bottom of the sidebar larger and easier to hit.

## What This Mod Changes

- Increases the visible size of Space icons.
- Keeps each Space button centered and balanced inside its hit area.
- Preserves a comfortable click target by enlarging the button container, not just the glyph.

## Files

- `chrome.css`: applies the Workspace icon sizing and layout rules.
- `preferences.json`: exposes Zen mod settings for icon size, button size, spacing, and corner radius.
- `screenshot.png`: a 600x400 Zen Mod Store screenshot.

## Customization

You can change the defaults from Zen's mod preferences:

- `Space icon size`: default `22px`
- `Space button size`: default `31px`
- `Space button gap`: default `4px`
- `Space button radius`: default `8px`

Preferences

[
  {
    "property": "mod.space_icon_boost.icon_size",
    "label": "Space icon size",
    "type": "string",
    "defaultValue": "22px"
  },
  {
    "property": "mod.space_icon_boost.hit_area",
    "label": "Space button size",
    "type": "string",
    "defaultValue": "31px"
  },
  {
    "property": "mod.space_icon_boost.gap",
    "label": "Space button gap",
    "type": "string",
    "defaultValue": "4px"
  },
  {
    "property": "mod.space_icon_boost.radius",
    "label": "Space button radius",
    "type": "string",
    "defaultValue": "8px"
  }
]

[github-actions]

Thank you for your contribution! 🎉

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-1958 branch.

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