[create-theme]: Glance Button Colors

[ronniemason]

Name

Glance Button Colors

Description

Customize Zen Browser’s floating Glance button colors.

Homepage

https://github.com/ronniemason/glance-button-colors

Image

https://imgur.com/a/et7nmOM

Type

• JSON Color Theme

Theme Styles

/* Glance Button Colors
 * Customize Zen's floating Glance button colors.
 */

.zen-glance-sidebar-container toolbarbutton {
  background: var(--theme-glance_button_colors-button_background, #181818) !important;
  color: var(--theme-glance_button_colors-icon_color, #ffffff) !important;
  fill: var(--theme-glance_button_colors-icon_color, #ffffff) !important;
  stroke: var(--theme-glance_button_colors-icon_color, #ffffff) !important;

  opacity: var(--theme-glance_button_colors-button_opacity, 1) !important;

  border: var(--theme-glance_button_colors-button_border, none) !important;
  box-shadow: var(--theme-glance_button_colors-button_shadow, none) !important;

  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

.zen-glance-sidebar-container toolbarbutton:hover {
  background: var(--theme-glance_button_colors-button_hover_background, #2c2c2c) !important;
}

.zen-glance-sidebar-container toolbarbutton .toolbarbutton-icon {
  color: var(--theme-glance_button_colors-icon_color, #ffffff) !important;
  fill: var(--theme-glance_button_colors-icon_color, #ffffff) !important;
  stroke: var(--theme-glance_button_colors-icon_color, #ffffff) !important;
  filter: none !important;

  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
}

Readme

# Glance Button Colors

Glance Button Colors lets you customize Zen Browser's floating Glance controls.

Zen's workspace theme colors can sometimes make the Glance buttons difficult to read. This mod lets you set your own icon color, button background, hover background, opacity, border, and shadow.

## Options

- Icon color
- Button background
- Hover background
- Button opacity
- Button border
- Button shadow

## Defaults

- White icons
- Dark button background
- Slightly lighter hover background
- No border
- No shadow
- Full opacity

## Notes

This mod targets Zen's floating Glance controls using:


.zen-glance-sidebar-container


If Zen changes its internal Glance markup in a future update, this mod may need an update.

Preferences

[
  {
    "property": "theme-glance_button_colors-icon_color",
    "label": "Icon color",
    "type": "string",
    "defaultValue": "#ffffff",
    "placeholder": "#ffffff"
  },
  {
    "property": "theme-glance_button_colors-button_background",
    "label": "Button background",
    "type": "string",
    "defaultValue": "#181818",
    "placeholder": "#181818"
  },
  {
    "property": "theme-glance_button_colors-button_hover_background",
    "label": "Hover background",
    "type": "string",
    "defaultValue": "#2c2c2c",
    "placeholder": "#2c2c2c"
  },
  {
    "property": "theme-glance_button_colors-button_opacity",
    "label": "Button opacity",
    "type": "string",
    "defaultValue": "1",
    "placeholder": "0.85, 0.9, or 1"
  },
  {
    "property": "theme-glance_button_colors-button_border",
    "label": "Button border",
    "type": "string",
    "defaultValue": "none",
    "placeholder": "none or 1px solid rgba(255,255,255,.2)"
  },
  {
    "property": "theme-glance_button_colors-button_shadow",
    "label": "Button shadow",
    "type": "string",
    "defaultValue": "none",
    "placeholder": "none or 0 4px 12px rgba(0,0,0,.35)"
  }
]

[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 a PNG.