266 lines
8.5 KiB
Diff
266 lines
8.5 KiB
Diff
|
From de447719bc49c92bb8f1a04115e4533b2430a524 Mon Sep 17 00:00:00 2001
|
||
|
|
From: Kevin MacMartin <prurigro@gmail.com>
|
||
|
|
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
|
||
|
|
|