From de447719bc49c92bb8f1a04115e4533b2430a524 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Mon, 25 Mar 2024 13:06:47 -0400 Subject: [PATCH] Dark theme --- ...ight.scss => gnome-shell-dark-laptop.scss} | 3 +- data/theme/gnome-shell-dark.scss | 2 + data/theme/gnome-shell-high-contrast.scss | 33 ------------- data/theme/gnome-shell-sass/_drawing.scss | 6 +-- data/theme/gnome-shell-sass/_palette.scss | 10 ++-- .../widgets/_corner-ripple.scss | 2 +- .../gnome-shell-sass/widgets/_panel.scss | 49 ++++++++++++++----- 7 files changed, 50 insertions(+), 55 deletions(-) rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (83%) delete mode 100644 data/theme/gnome-shell-high-contrast.scss diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss similarity index 83% rename from data/theme/gnome-shell-light.scss rename to data/theme/gnome-shell-dark-laptop.scss index ae6fce7dd..e603503f6 100644 --- a/data/theme/gnome-shell-light.scss +++ b/data/theme/gnome-shell-dark-laptop.scss @@ -1,5 +1,6 @@ -$variant: 'light'; +$variant: 'dark'; +$laptop: true; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss index 8ee499912..294ac6463 100644 --- a/data/theme/gnome-shell-dark.scss +++ b/data/theme/gnome-shell-dark.scss @@ -1,5 +1,7 @@ $variant: 'dark'; +$contrast: 'normal'; +$laptop: false; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss deleted file mode 100644 index 00f247e73..000000000 --- a/data/theme/gnome-shell-high-contrast.scss +++ /dev/null @@ -1,33 +0,0 @@ -$variant: 'dark'; - -@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors -@import "gnome-shell-sass/_drawing"; -@import "gnome-shell-sass/_common"; -@import "gnome-shell-sass/_widgets"; - -.toggle-switch { width: 48px; } -.toggle-switch { - background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); - &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } -} - -//force opaque panel -#panel { - &.login-screen, - &.unlock-screen, - &:overview { - background-color: #000; - } - - .panel-button { - color: #fff !important; - } -} - -//thumbnail app icons no dropshadow and forced color -.window-picker .icon-dropshadow { - icon-shadow: none; - background-color: $osd_bg_color; - padding: $base_padding * 2; - border-radius: $modal_radius; -} diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 85f16fb3c..d9d6db986 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -373,11 +373,11 @@ // $child_class: class name of the child element // -@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") { +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) { transition-duration: 150ms; border: 3px solid transparent; - border-radius: 99px; + border-radius: $border_radius; font-weight: bold; background-color: transparent; @@ -419,7 +419,7 @@ #{$child_class} { transition-duration: 150ms; border: 3px solid transparent; - border-radius: 99px; + border-radius: $border_radius; } &:active, &:focus, &:checked { diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss index 78847d95a..8627513c6 100644 --- a/data/theme/gnome-shell-sass/_palette.scss +++ b/data/theme/gnome-shell-sass/_palette.scss @@ -39,8 +39,8 @@ $light_2: #f6f5f4; $light_3: #deddda; $light_4: #c0bfbc; $light_5: #9a9996; -$dark_1: #77767b; -$dark_2: #5e5c64; -$dark_3: #3d3846; -$dark_4: #241f31; -$dark_5: #000000; \ No newline at end of file +$dark_1: #777777; +$dark_2: #5e5e5e; +$dark_3: #3d3d3d; +$dark_4: #242424; +$dark_5: #000000; diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss index 9aff43174..1760edaee 100644 --- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss +++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss @@ -3,7 +3,7 @@ $ripple_size: 50px; .ripple-box { - background-color: rgba(255,255,255,0.2); + background-color: rgba(0,0,0,0); box-shadow: 0 0 2px 2px rgba(255,255,255,0.2); // plus + 2px for the border (box-shadow) width: $ripple_size + 2px; diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index f19c7c76e..1ad3a18d5 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -1,9 +1,9 @@ /* Top Bar */ // a.k.a. the panel -$privacy_indicator_color: $orange_3; +$privacy_indicator_color: $red_3; -$panel_bg_color: if($variant == 'light', $light_3, $dark_5); +$panel_bg_color: if($variant == 'light', $light_3, $dark_4); $panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); @@ -21,14 +21,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // panel menus .panel-button { - @include panel_button($panel_fg_color); - -natural-hpadding: $base_padding * 2; - -minimum-hpadding: $base_padding; + @include panel_button($bg: $panel_fg_color, $border_radius: 3px); + -natural-hpadding: 6px; + -minimum-hpadding: 4px; // status area icons .system-status-icon { icon-size: $base_icon_size; - padding: $base_padding - 1px; + padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px; margin: 0 $base_margin; } @@ -44,7 +44,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &#panelActivities { - -natural-hpadding: $base_padding * 2.5; + -natural-hpadding: 10px; + -minimum-hpadding: 8px; & StBoxLayout { spacing: 5px; @@ -67,6 +68,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration StIcon { icon-size: $base_icon_size; + + &:first-child { + margin-left: 3px; + } } } @@ -83,7 +88,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // The clock display needs to have the background on .clock because // we want to exclude the do-not-disturb indicator from the background // see _drawing.scss for override details - @include panel_button($highlighted_child: true, $child_class:".clock"); + @include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px); + -natural-hpadding: 0px; + -minimum-hpadding: 0px; + padding-left: 0px; + padding-right: 0px; .clock { // the highlighted child @@ -99,7 +108,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: none; .panel-button { - @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color); + @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px); &#panelActivities .workspace-dot { background-color: $panel_system_fg_color; @@ -121,14 +130,26 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } } - .panel-status-indicators-box, + .panel-status-indicators-box { + spacing: 2px; + padding-right: 2px; + padding-left: 3px; + } + .panel-status-menu-box { spacing: 2px; } // spacing between power icon and (optional) percentage label .power-status.panel-status-indicators-box { + padding-left: 0px; spacing: 0; + + @if $laptop { + margin-bottom: 2px; + } @else { + margin-left: 2px; + } } // important privacy related indicators @@ -151,7 +172,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration .clock-display-box { spacing: 2px; .clock { - padding-left: $base_padding * 2; - padding-right: $base_padding * 2; + padding-left: 8px; + padding-right: 8px; + } + + StIcon:last-child { + margin-right: 3px; } } -- 2.44.0