[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://raw.githubusercontent.com/ronniemason/glance-button-colors/main/image.png

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]

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

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