nixos/templates/zen-userChrome.css

/* Wallpaper-based colors generated by matugen */

/* Override Zen's JS-applied gradient backgrounds directly on elements */
#zen-browser-background::after,
#zen-browser-background::before {
  background: {{colors.surface.default.hex}} !important;
  opacity: 1 !important;
}

#zen-toolbar-background::after,
#zen-toolbar-background::before {
  background: {{colors.surface_container_low.default.hex}} !important;
  opacity: 1 !important;
}

/* Sidebar and tab strip */
#navigator-toolbox {
  background-color: {{colors.surface_container_low.default.hex}} !important;
}

#TabsToolbar, #tabbrowser-tabs {
  background-color: transparent !important;
}

.tab-background:is([selected], [multiselected]) {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

/* URL bar — override Zen's color-mix background */
#urlbar .urlbar-background,
#urlbar-background {
  background-color: {{colors.surface_container.default.hex}} !important;
}

#urlbar[focused="true"] .urlbar-background {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

#urlbar-input {
  color: {{colors.on_surface.default.hex}} !important;
}

/* Nav bar and toolbar — match the toolbar background */
#nav-bar {
  background-color: transparent !important;
}

/* Sidebar text and icons */
#sidebar-box, #sidebar {
  background-color: {{colors.surface_container_low.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* Popup panels (menus, extensions etc) */
.panel-arrowcontent, panel, #appMenu-popup {
  background-color: {{colors.surface_container.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* New tab page background */
:root {
  --newtab-background-color: {{colors.surface.default.hex}} !important;
  --lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
  --lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important;
  --toolbar-bgcolor: {{colors.surface_container.default.hex}} !important;
  --lwt-accent-color: {{colors.surface_container.default.hex}} !important;
  --lwt-text-color: {{colors.on_surface.default.hex}} !important;
  --arrowpanel-background: {{colors.surface_container.default.hex}} !important;
  --arrowpanel-color: {{colors.on_surface.default.hex}} !important;
  --zen-primary-color: {{colors.primary.default.hex}} !important;
  --zen-colors-primary: {{colors.primary_container.default.hex}} !important;
  --zen-colors-secondary: {{colors.secondary_container.default.hex}} !important;
  --zen-colors-tertiary: {{colors.tertiary_container.default.hex}} !important;
  --zen-colors-border: {{colors.outline_variant.default.hex}} !important;
  --toolbox-textcolor: {{colors.on_surface.default.hex}} !important;
}