---
url: /glimpse/config/theme-tokens.md
---
# Theme tokens

Tokens are the CSS custom properties a theme redefines, usually in `:root`. These are the main
tokens a theme can usefully change. Where a default names a GTK color, glimpse follows your GTK
theme until you set the token. How to write a theme is in [Write a theme](/guide/theming).

glimpse-lens (the magnifier, and the color picker and ruler it runs as tools) loads only the
built-in stylesheet. Your theme and `~/.config/glimpse/styles.css` cannot change it.

## Surfaces and text

| Token | Default | Paints |
| --- | --- | --- |
| `--gl-panel` | GTK's header bar color | the bar's background |
| `--gl-panel-fg` | GTK's window text color | text and icons on the bar |
| `--gl-surface` | GTK's popover color | popovers and other floating cards |
| `--gl-surface-fg` | GTK's popover text color | text on popovers |
| `--gl-notification` | `--gl-surface` mixed 8% toward `--gl-surface-fg` | notification cards |
| `--gl-notification-fg` | `--gl-surface-fg` | text on notification cards |
| `--gl-muted` | `--gl-surface-fg` at 65% | secondary text and meter fills |
| `--gl-dim` | `--gl-surface-fg` at 38% | less important text |
| `--gl-faint` | `--gl-surface-fg` at 22% | the faintest text, empty meter tracks |
| `--gl-border` | GTK's border color | borders and separators |
| `--gl-hover` | `--gl-surface-fg` at 8% | the background under the pointer |
| `--gl-active` | `--gl-surface-fg` at 16% | the background of a pressed or open item |
| `--gl-control` | `--gl-border`, stronger | the calendar's Today button, shown when you browse away from the current month or select another day |
| `--gl-disabled` | GTK's disabled opacity, 0.5 | the opacity of a control you can't use |

`--gl-muted`, `--gl-dim` and `--gl-faint` come out a little lighter in light mode than in dark,
the same as dimmed text in GTK apps.

## Accent and status

| Token | Default | Paints |
| --- | --- | --- |
| `--gl-accent` | GTK's accent color | the current workspace in a labeled pager, today and the selected day in the calendar, prompt confirm buttons, the notification progress bar, sparkline marks and the checked screenshot tool's foreground |
| `--gl-accent-fg` | GTK's text-on-accent color | text drawn on `--gl-accent` |
| `--gl-accent-text` | GTK's accent text color | accent-colored text, focus outlines, attention dots |
| `--gl-accent-soft` | `--gl-accent` at 18% | badges, highlighted groups, the checked screenshot tool's background |
| `--gl-danger-text` | GTK's destructive color | error text |
| `--gl-danger-soft` | GTK's destructive background at 18% | the background behind errors |
| `--gl-warning-text` | GTK's warning color | warning text |
| `--gl-warning-soft` | GTK's warning background at 18% | the background behind warnings |

## Shape, depth and type

| Token | Default | Sets |
| --- | --- | --- |
| `--gl-radius` | `0.95rem` | the corner radius of popovers, sheets and the screenshot editor's panels |
| `--gl-shadow` | black at 55% | the shadow color the elevations use |
| `--gl-elevation-raised` | a small, soft shadow | the bar, where the outer shadow is clipped and not visible, and notifications in a list |
| `--gl-elevation-floating` | a larger shadow | popovers and notification popups |
| `--gl-popup-paint-outset` | `2.5rem` | the space reserved around a notification popup |
| `--gl-font-family` | `"Adwaita Sans", system-ui, sans-serif` | the font on themed surfaces |
| `--gl-font-family-mono` | `"Adwaita Mono", monospace` | numbers that must line up and monospace row text |
| `--gl-text-caption` | `0.85rem` | small print |
| `--gl-text-body` | `1rem` | regular text |
| `--gl-text-title` | `1.2rem` | the large heading at the top of a popover, the title of what is playing |
| `--gl-text-display` | `2.4rem` | large numbers; the lock screen clock is 3.2 times this |

## Popovers

| Token | Default | Sets |
| --- | --- | --- |
| `--applet-popover-width` | `27rem` | the width of most popovers |
| `--applet-popover-width-wide` | `40rem` | the width of wide popovers |
| `--applet-popover-padding` | `0.8rem` | popover padding |
| `--applet-popover-bg` | `--gl-surface` | the popover body's background |
| `--applet-popover-fg` | `--gl-surface-fg` | popover text |
| `--applet-popover-radius` | `--gl-radius` | the popover body's corner radius |
| `--popover-shell-header-padding` | `0.55rem 0.8rem` | popover header padding |
| `--popover-body-spacing` | `0.35rem` | spacing in the popover body |

## Rows, meters and containers

| Token | Default | Sets |
| --- | --- | --- |
| `--row-height` | `2.85rem` | the minimum row height |
| `--row-padding` | `0 0.8rem` | row padding |
| `--row-radius` | `0.7rem` | row corner radius |
| `--row-gap` | `10px` | spacing inside rows |
| `--row-hover-bg` | `--gl-hover` | an interactive row's background under the pointer |
| `--row-active-bg` | `--gl-active` | an interactive row's background while pressed |
| `--row-tone-warning` | `--gl-warning-text` | warning row icons, subtitles, values and meter fills |
| `--row-tone-error` | `--gl-danger-text` | error row icons, subtitles, values and meter fills |
| `--row-tone-destructive` | `--gl-danger-text` | destructive row titles and meter fills |
| `--row-mono-font` | `--gl-font-family-mono` | the font of monospace rows |
| `--meter-row-height` | `0.3rem` | meter bar thickness |
| `--meter-row-trough` | `--gl-faint` | meter tracks |
| `--meter-row-fill` | `--gl-muted` | meter fills |
| `--container-radius` | `--row-radius` | container corner radius |
| `--container-red`, `--container-orange`, `--container-yellow`, `--container-green`, `--container-blue`, `--container-purple` | `--red-3`, `--orange-3`, `--yellow-3`, `--green-3`, `--blue-3`, `--purple-3` | container backgrounds and text of the corresponding color |
| `--container-light`, `--container-dark` | `--light-1`, `--dark-5` | light and dark container backgrounds and text |

## Per-widget tokens

These classes redeclare their own tokens. Set each token on the class shown, not in `:root`; a
`:root` setting has no effect.

| Set on | Token | Default | Sets |
| --- | --- | --- | --- |
| `.pager` | `--gl-pager-dot`, `--gl-pager-wide`, `--gl-pager-pill` | `0.5rem`, `1.3rem`, `1.8rem` | pager dot, wide item and label pill sizes |
| `.pager` | `--gl-pager-gap` | `0.18rem` | spacing around pager items |
| `.pager` | `--gl-pager-idle`, `--gl-pager-occupied`, `--gl-pager-here` | `--gl-panel-fg` at 25%, 50% and 90% | idle, occupied and current pager dots |
| `.pager` | `--gl-pager-text` | `--gl-panel-fg` at 55% | pager label text |
| `.calendar` | `--gl-calendar-control` | `2.4rem` | calendar header control size |
| `.calendar` | `--gl-calendar-cell` | `3rem` | day and month cell size |
| `.calendar` | `--gl-calendar-radius` | `0.6rem` | calendar control and cell corner radius |
| `.calendar` | `--gl-calendar-gap` | `0.2rem` | space above calendar event dots |
| `.notice` | `--gl-notice-radius` | `0.7rem` | notice corner radius |
| `.notification` | `--gl-notification-radius` | `1.1rem` | notification corner radius |

For example, reduce the notification corner radius with:

```css
.notification {
    --gl-notification-radius: 0.5rem;
}
```

## Motion and blur

| Token | Default | Sets |
| --- | --- | --- |
| `--gl-duration` | `150ms` | the length of every transition; set by `animation-speed`, not by CSS |
| `--gl-ease` | `cubic-bezier(0.2, 0, 0, 1)` | the easing of every transition |
| `--gl-popup-motion` | `0.75rem` | how far a notification popup slides in and out |
| `--gl-blur-opacity` | `60%` | how much of a blurred surface's color stays over the blur |
| `--gl-blur-radius` | `12px` | blur on or off; below `10px` there is no blur |

## Lock screen

Set these in `lock.css`, the file the lock screen reads.

| Token | Default | Paints |
| --- | --- | --- |
| `--gl-lock-fg` | white | text and icons |
| `--gl-lock-dim` | black | the layer that darkens the wallpaper |
| `--gl-lock-field` | white at 16% | the password field |
| `--gl-lock-glass-hover` | white at 18% | buttons under the pointer |
| `--gl-lock-shade` | black at 55% | the default text shadow color and the background of error and Caps Lock notes |
| `--gl-lock-text-shadow` | `0 1px 3px var(--gl-lock-shade)` | the shadow on lock stage text |
| `--gl-lock-error` | `#ffc4bf` | error text |
| `--gl-lock-warning` | `#ffda97` | warning text |

## Screenshot editor

| Token | Default | Paints |
| --- | --- | --- |
| `--gl-shot-red`, `--gl-shot-yellow`, `--gl-shot-green`, `--gl-shot-blue`, `--gl-shot-white` | red, yellow, green, blue, white | the color swatches in the toolbar |
| `--gl-shot-ink` | black | the mark drawn on the yellow and white swatches |
| `--gl-shot-ring` | black at 45% | the outline around a selected region |
| `--gl-scrim` | black at 55% | the dimmed area outside a selection and behind the size readout |
| `--gl-knob` | white | the selection outline, the size readout text, and the ring on today when it is selected in the calendar |