From f103d343b012a5c002f7110302c62b1d2c6f0931 Mon Sep 17 00:00:00 2001 From: Minijackson Date: Sun, 18 Dec 2022 16:10:24 +0100 Subject: gtk: add gtk3 theme --- usecases/desktop/graphical/gtk-colors.scss | 125 +++++++++++++++++++++++++++++ usecases/desktop/graphical/gtk.nix | 28 ++++++- 2 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 usecases/desktop/graphical/gtk-colors.scss (limited to 'usecases/desktop/graphical') diff --git a/usecases/desktop/graphical/gtk-colors.scss b/usecases/desktop/graphical/gtk-colors.scss new file mode 100644 index 0000000..b8868de --- /dev/null +++ b/usecases/desktop/graphical/gtk-colors.scss @@ -0,0 +1,125 @@ +// When color definition differs for dark and light variant +// it gets @if ed depending on $variant + +$blue_1: @fadedBlue@; +$blue_2: #62a0ea; +$blue_3: @neutralBlue@; +$blue_4: #1c71d8; +$blue_5: @brightBlue@; +$green_1: @fadedGreen@; +$green_2: #57e389; +$green_3: @neutralGreen@; +$green_4: #2ec27e; +$green_5: @brightGreen@; +$yellow_1: @fadedYellow@; +$yellow_2: #f8e45c; +$yellow_3: @neutralYellow@; +$yellow_4: #f5c211; +$yellow_5: @brightYellow@; +$orange_1: @fadedOrange@; +$orange_2: #ffa348; +$orange_3: @neutralOrange@; +$orange_4: #e66100; +$orange_5: @brightOrange@; +$red_1: @fadedRed@; +$red_2: #ed333b; +$red_3: @neutralRed@; +$red_4: #c01c28; +$red_5: @brightRed@; +$purple_1: @fadedMagenta@; +$purple_2: #c061cb; +$purple_3: @neutralMagenta@; +$purple_4: #813d9c; +$purple_5: @brightMagenta@; +$brown_1: #cdab8f; +$brown_2: #b5835a; +$brown_3: #986a44; +$brown_4: #865e3c; +$brown_5: #63452c; + +$light_1: @foreground0@; +$light_2: @foreground1@; +$light_3: @foreground2@; +$light_4: @foreground3@; +$light_5: @foreground4@; + +$dark_1: @background4@; +$dark_2: @background3@; +$dark_3: @background2@; +$dark_4: @background1@; +$dark_5: @background0@; + +$base_color: if($variant == 'light', $light_1, lighten(desaturate($dark_4, 100%), 2%)); +$text_color: if($variant == 'light', black, white); +$bg_color: if($variant == 'light', $light_2, darken(desaturate($dark_3, 100%), 4%)); +$fg_color: if($variant == 'light', #2e3436, #eeeeec); + +$selected_fg_color: $light_1; +$selected_bg_color: if($variant == 'light', $blue_3, darken($blue_3, 20%)); +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); +$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%)); +$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%)); +$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); +$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); +$top_hilight: $borders_edge; +$dark_fill: mix($borders_color, $bg_color, 50%); +$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); +$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); +$popover_bg_color: $bg_color; +$popover_hover_color: lighten($bg_color, 5%); + +$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); +$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); +$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%); +$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%)); + +$warning_color: #f57900; +$error_color: #cc0000; +$success_color: if($variant == 'light', $green_3, darken($green_3, 10%)); +$destructive_color: if($variant == 'light', $red_3, darken($red_3, 10%)); + +$osd_fg_color: #eeeeec; +$osd_text_color: white; +$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate($dark_3, 100%), 4%),0.1), transparentize(darken(desaturate($dark_3, 100%), 10%),0.1)); +$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); +$osd_borders_color: transparentize(black, 0.3); + +$sidebar_bg_color: mix($bg_color, $base_color, 50%); +$base_hover_color: transparentize($fg_color, 0.95); + +$tooltip_borders_color: transparentize(white, 0.9); +$shadow_color: transparentize(black, 0.9); + +$drop_target_color: #4e9a06; + +//insensitive state derived colors +$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +$insensitive_bg_color: mix($bg_color, $base_color, 60%); +$insensitive_borders_color: $borders_color; + +//colors for the backdrop state, derived from the main colors. +$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%)); +$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); +$backdrop_bg_color: $bg_color; +$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); +$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%)); +$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color); +$backdrop_borders_color: mix($borders_color, $bg_color, 80%); +$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); +$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%); + +$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); +$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); + +$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%)); + +//special cased widget colors +$suggested_bg_color: $selected_bg_color; +$suggested_border_color: $selected_borders_color; +$progress_bg_color: $selected_bg_color; +$progress_border_color: $selected_borders_color; +$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%)); +$checkradio_fg_color: $selected_fg_color; +$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%)); diff --git a/usecases/desktop/graphical/gtk.nix b/usecases/desktop/graphical/gtk.nix index 4a9f501..0151492 100644 --- a/usecases/desktop/graphical/gtk.nix +++ b/usecases/desktop/graphical/gtk.nix @@ -4,6 +4,32 @@ inputs: { pkgs, ... }: let + gtk3Colors = ./gtk-colors.scss; + + gtk3CssFile = + pkgs.stdenv.mkDerivation ({ + name = "gtk3.css"; + + src = pkgs.gtk3.src; + + nativeBuildInputs = with pkgs; [sassc]; + + patchPhase = '' + cp -f ${gtk3Colors} gtk/theme/Adwaita/_colors.scss + substituteAllInPlace gtk/theme/Adwaita/_colors.scss + ''; + + dontConfigure = true; + dontInstall = true; + + buildPhase = '' + sassc -a -M -t expanded gtk/theme/Adwaita/gtk-contained-dark.scss $out + # These lines contains includes of assets + sed -i -e '/-gtk-icon/d' $out; + ''; + } + // config.theme.colors); + gtk4NamedColors = with config.theme.colors; { # From the main CSS # ----------------- @@ -94,7 +120,7 @@ in { }; xdg.configFile = { - # "gtk-3.0/gtk.css".source = gtkCssFile; + "gtk-3.0/gtk.css".source = gtk3CssFile; "gtk-4.0/gtk.css".source = gtk4CssFile; }; }; -- cgit v1.2.3