nixos/shared/modules/services/theme_switcher/templates/gtk-4.0.css

/* GTK 4.0 Theme - Generated by pywal */
/* This theme uses colors extracted from wallpapers */

/* Define color variables */
@define-color window_bg_color {background};
@define-color window_fg_color {foreground};
@define-color view_bg_color {background};
@define-color view_fg_color {foreground};
@define-color accent_bg_color {color4};
@define-color accent_fg_color {background};
@define-color accent_color {color4};
@define-color destructive_bg_color {color1};
@define-color destructive_fg_color {background};
@define-color destructive_color {color1};
@define-color success_bg_color {color2};
@define-color success_fg_color {background};
@define-color success_color {color2};
@define-color warning_bg_color {color3};
@define-color warning_fg_color {background};
@define-color warning_color {color3};
@define-color error_bg_color {color1};
@define-color error_fg_color {background};
@define-color error_color {color1};
@define-color headerbar_bg_color {color0};
@define-color headerbar_fg_color {foreground};
@define-color headerbar_border_color {color8};
@define-color sidebar_bg_color {color0};
@define-color sidebar_fg_color {foreground};
@define-color card_bg_color {color0};
@define-color card_fg_color {foreground};
@define-color popover_bg_color {color0};
@define-color popover_fg_color {foreground};
@define-color dialog_bg_color {background};
@define-color dialog_fg_color {foreground};

/* Legacy GTK3 compatibility colors */
@define-color theme_bg_color {background};
@define-color theme_fg_color {foreground};
@define-color theme_base_color {background};
@define-color theme_text_color {foreground};
@define-color theme_selected_bg_color {color4};
@define-color theme_selected_fg_color {background};
@define-color insensitive_bg_color alpha({foreground}, 0.1);
@define-color insensitive_fg_color alpha({foreground}, 0.5);
@define-color borders alpha({foreground}, 0.2);

/* Window styling */
window {
  background-color: @window_bg_color;
  color: @window_fg_color;
}

/* Widget styling */
* {
  background-color: @window_bg_color;
  color: @window_fg_color;
}

/* Button */
button {
  background-color: @card_bg_color;
  color: @window_fg_color;
  border: 1px solid @borders;
  border-radius: 6px;
  padding: 6px 12px;
  min-height: 24px;
}

button:hover {
  background-color: alpha(@accent_bg_color, 0.1);
  border-color: @accent_color;
}

button:active {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

button:disabled {
  background-color: @insensitive_bg_color;
  color: @insensitive_fg_color;
}

button.suggested-action {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

button.destructive-action {
  background-color: @destructive_bg_color;
  color: @destructive_fg_color;
}

/* Entry/Input fields */
entry {
  background-color: @view_bg_color;
  color: @view_fg_color;
  border: 1px solid @borders;
  border-radius: 6px;
  padding: 6px;
  min-height: 32px;
}

entry:focus {
  border-color: @accent_color;
  outline: 2px solid alpha(@accent_color, 0.3);
  outline-offset: -1px;
}

entry:disabled {
  background-color: @insensitive_bg_color;
  color: @insensitive_fg_color;
}

/* Selections */
selection,
*:selected {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

/* Headerbar */
headerbar {
  background-color: @headerbar_bg_color;
  color: @headerbar_fg_color;
  border-bottom: 1px solid @headerbar_border_color;
  min-height: 46px;
  padding: 0 6px;
}

headerbar button {
  background-color: transparent;
  border: none;
}

headerbar button:hover {
  background-color: alpha(@accent_bg_color, 0.1);
}

headerbar button:active {
  background-color: alpha(@accent_bg_color, 0.2);
}

/* Sidebar */
.sidebar {
  background-color: @sidebar_bg_color;
  border-right: 1px solid @borders;
}

.sidebar row {
  padding: 6px;
}

.sidebar row:hover {
  background-color: alpha(@accent_bg_color, 0.1);
}

.sidebar row:selected {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

/* Notebook/Tabs */
notebook > header {
  background-color: @card_bg_color;
  border-bottom: 1px solid @borders;
}

notebook > header > tabs > tab {
  background-color: transparent;
  color: @window_fg_color;
  padding: 6px 12px;
  min-height: 32px;
}

notebook > header > tabs > tab:hover {
  background-color: alpha(@accent_bg_color, 0.1);
}

notebook > header > tabs > tab:checked {
  background-color: @window_bg_color;
  border-bottom: 2px solid @accent_color;
}

/* Menu */
menubar {
  background-color: @headerbar_bg_color;
  color: @headerbar_fg_color;
}

menu,
.menu {
  background-color: @popover_bg_color;
  color: @popover_fg_color;
  border: 1px solid @borders;
  border-radius: 8px;
  padding: 4px;
}

menuitem {
  padding: 6px 12px;
  border-radius: 4px;
  min-height: 28px;
}

menuitem:hover {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

/* Scrollbar */
scrollbar {
  background-color: transparent;
}

scrollbar slider {
  background-color: alpha(@window_fg_color, 0.3);
  border-radius: 8px;
  min-width: 10px;
  min-height: 10px;
}

scrollbar slider:hover {
  background-color: alpha(@window_fg_color, 0.5);
}

scrollbar slider:active {
  background-color: @accent_color;
}

/* Progressbar */
progressbar {
  background-color: @view_bg_color;
  border-radius: 4px;
}

progressbar progress {
  background-color: @accent_bg_color;
  border-radius: 4px;
}

progressbar trough {
  background-color: alpha(@window_fg_color, 0.1);
  border-radius: 4px;
}

/* Switch */
switch {
  background-color: alpha(@window_fg_color, 0.2);
  border-radius: 12px;
  min-width: 48px;
  min-height: 24px;
}

switch:checked {
  background-color: @accent_bg_color;
}

switch slider {
  background-color: @window_fg_color;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  margin: 2px;
}

/* Checkbutton & Radiobutton */
checkbutton check,
radiobutton radio {
  background-color: @view_bg_color;
  border: 1px solid @borders;
  min-width: 16px;
  min-height: 16px;
}

checkbutton check {
  border-radius: 4px;
}

radiobutton radio {
  border-radius: 50%;
}

checkbutton check:checked,
radiobutton radio:checked {
  background-color: @accent_bg_color;
  border-color: @accent_bg_color;
  color: @accent_fg_color;
}

/* Tooltip */
tooltip {
  background-color: @popover_bg_color;
  color: @popover_fg_color;
  border: 1px solid @borders;
  border-radius: 6px;
  padding: 6px 8px;
}

tooltip label {
  padding: 0;
}

/* Popover */
popover {
  background-color: @popover_bg_color;
  color: @popover_fg_color;
  border: 1px solid @borders;
  border-radius: 12px;
  padding: 6px;
}

popover > contents {
  background-color: transparent;
}

/* Frame */
frame {
  border: 1px solid @borders;
  border-radius: 6px;
}

/* List */
list,
listview,
.view {
  background-color: @view_bg_color;
  color: @view_fg_color;
  border-radius: 6px;
}

list row,
listview row {
  padding: 6px;
  border-radius: 4px;
}

list row:hover,
listview row:hover {
  background-color: alpha(@accent_bg_color, 0.1);
}

list row:selected,
listview row:selected {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

/* Card */
.card {
  background-color: @card_bg_color;
  color: @card_fg_color;
  border: 1px solid @borders;
  border-radius: 12px;
  padding: 12px;
}

/* Dialog */
dialog {
  background-color: @dialog_bg_color;
  color: @dialog_fg_color;
}

/* Searchbar */
searchbar {
  background-color: @headerbar_bg_color;
  border-bottom: 1px solid @borders;
}

/* Toolbar */
toolbar {
  background-color: @headerbar_bg_color;
  padding: 4px;
  border-bottom: 1px solid @borders;
}

/* Infobar */
.info {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
}

.warning {
  background-color: @warning_bg_color;
  color: @warning_fg_color;
}

.error {
  background-color: @error_bg_color;
  color: @error_fg_color;
}

.success,
.question {
  background-color: @success_bg_color;
  color: @success_fg_color;
}