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