Styling - Degoog docs

CSS variables

The application exposes several CSS custom properties on the :root element. You can use these in your themes and plugin styles to ensure your colors automatically adapt to light or dark modes (using data-theme="light" or data-theme="dark" on the <html> tag).

Variable	Use
`--primary`	Primary accent for links and buttons
`--primary-hover`	Hover state for primary elements
`--primary-rgb`	Primary color as an RGB tuple
`--danger`	Danger or error color
`--warning`	Warning color
`--success`	Success color
`--bg`	Page background
`--bg-light`	Lighter background for cards and inputs
`--bg-hover`	Hover background
`--border`	Border color
`--border-light`	Lighter border
`--text-primary`	Main text color
`--text-secondary`	Secondary or muted text
`--text-link`	Link color
`--text-link-visited`	Visited link color
`--text-cite`	Citation or URL text
`--text-snippet`	Snippet or description text
`--search-bar-bg`	Search bar background
`--search-bar-bg-hover`	Search bar hover state
`--btn-bg`	Button background
`--btn-text`	Button text color
`--overlay-bg`	Overlay background for modals
`--white`	Pure white

Example theme or plugin CSS

.my-panel {
  background: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.my-panel a {
  color: var(--text-link);
}

Reusable classes

Try to reuse these built in classes in your plugin or theme HTML and CSS. This makes sure your output matches the main UI and benefits from the exact same layout structure. It is always better to use these instead of inventing new classes when the meaning fits perfectly.

Generic UI classes (degoog-*)

The main UI is moving toward a small set of generic degoog-* classes. Templates often keep the older specific classes for backwards compatibility, but the styling should be driven by these generic classes and their modifiers.

Modifiers follow a BEM-like pattern: .degoog-thing + .degoog-thing--variant.

Class	Use
`.degoog-panel`	Card/panel wrapper (background, border, shadow)
`.degoog-panel--accordion`	Accordion wrapper panel (no default padding)
`.degoog-panel--slot`	Slot panel wrapper (grid sizing, no default padding)
`.degoog-panel--slot-title`	Slot panel title block
`.degoog-panel--slot-body`	Slot panel body typography (no padding by default)
`.degoog-panel--slot-body-padded`	Slot body padding when the content needs it
`.degoog-search-bar`	Search bar shell (icon + input)
`.degoog-search-bar--square`	Less-rounded search bar variant
`.degoog-dropdown`	Floating dropdown container
`.degoog-dropdown--menu`	Menu sizing for dropdowns
`.degoog-dropdown--submenu`	Submenu sizing for dropdowns
`.degoog-accordion`	Accordion wrapper - adds `.open` toggle behaviour and chevron rotation
`.degoog-accordion-body`	Hidden accordion body, shown when parent has `.open`
`.degoog-accordion-body--flex`	Flex variant of the accordion body (for when `display: flex` is needed on open)
`.degoog-accordion-toggle`	Accordion trigger button
`.degoog-tab`	Tab button (active state, hover)
`.degoog-menu-item`	Button-like list item (hover/focus)
`.degoog-menu-item--option`	Option rows (active checkmark)
`.degoog-input`	Text input styling
`.degoog-input--tools`	Tools dropdown input variant
`.degoog-badge`	Small badge/pill
`.degoog-icon-btn`	Icon-only button

Note: the app still contains older, more specific classnames (for example .result-*, .glance-*, .btn*) and they may still have styling while the transition is ongoing. They are not considered a stable styling API for themes/plugins. Prefer the degoog-* classes and modifiers above.

Theme template migration (append-only)

Theme templates can keep their legacy classes and append the generic degoog-* classes (and modifiers) so they pick up the built-in UI styling without breaking older selectors.

DRY_RUN=1 bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme
bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme

Forms and extension settings

If you are rendering settings forms in your plugin UI, these classes will align them perfectly with the standard Settings modals.

Class	Use
`.degoog-input`	Text inputs and textareas
`.degoog-select-wrap`	Select wrappers (adds chevron)
`.degoog-toggle-wrap`	Toggle rows
`.degoog-toggle`	Toggle slider (pill)
`.degoog-panel`	Panels/cards used across settings and modals

Layout and chrome

Use the degoog-* classes above for UI elements you want to look consistent with the built-in theme.