nixos/templates/zen-userChrome.css

/* Wallpaper-based colors substituted by stylix */

/* Override Zen's JS-applied gradient backgrounds directly on elements */
#zen-browser-background,
#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;
  border: none !important;
  outline: none !important;
}

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

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

/* URL bar */
#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 */
#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;
}

/* Content area containers */
#browser, #appcontent, #tabbrowser-tabbox,
#tabbrowser-tabpanels, #zen-appcontent-wrapper,
#appcontent-tabpanels, #zen-tabbox-wrapper {
  background-color: {{colors.surface_container_low.default.hex}} !important;
}

/* Sidebar splitter — blend with sidebar, show accent on hover */
#zen-sidebar-splitter {
  background: {{colors.surface_container_low.default.hex}} !important;
  opacity: 1 !important;
}

#zen-sidebar-splitter:hover {
  background: {{colors.primary.default.hex}} !important;
}

/* Titlebar / window controls */
#titlebar, #zen-titlebar, .titlebar-buttonbox-container,
#zen-appcontent-navbar-container, .browser-toolbar,
#PersonalToolbar {
  background-color: {{colors.surface_container_low.default.hex}} !important;
}

#main-window, #main-window[tabsintitlebar] {
  background-color: {{colors.surface_container_low.default.hex}} !important;
  -moz-appearance: none !important;
  border: none !important;
  outline: none !important;
}

/* CSS variables */
:root {
  --zen-themed-toolbar-bg: {{colors.surface_container_low.default.hex}} !important;
  --zen-main-browser-background: {{colors.surface.default.hex}} !important;
  --zen-appcontent-navbar-container-bg: {{colors.surface_container_low.default.hex}} !important;
  --zen-appcontent-separator-color: {{colors.surface_container_low.default.hex}} !important;
  --zen-dialog-background: {{colors.surface_container.default.hex}} !important;
  --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;
}

/* Zen's whole palette is built out of light-dark(), which picks its branch
   from the computed `color-scheme` — not from the colours we set below. So
   the vars we override here are only half the input: everything Zen derives
   from them takes the LIGHT branch unless a scheme is declared. Worst case
   is the menu foreground,

     --zen-colors-primary-foreground: light-dark(
       var(--zen-branding-bg-reverse),                              // near-black
       color-mix(in srgb, var(--zen-primary-color) 80%, white 20%)) // light tint

   whose light branch is dark text, landing on the dark backgrounds forced
   above — invisible until hover swaps in a highlight background. It still
   tracks the wallpaper (the derived backgrounds move with our accent), which
   is why switching themes changes how readable it is without ever fixing it.
   The palette generator only ever runs `dark` (settings/theming.nix), so the
   scheme is not conditional. */
:root, menupopup, panel {
  color-scheme: dark !important;
}