Gray headerbar & titlebars in GNOME Shell

[jbicha]

• Bluebird 1.3
• Ubuntu 18.10 running their slightly customized default GNOME Shell
• GNOME 3.30

I believe it is intended for the titlebar and headerbars to be blue instead of gray.

Headerbar

Titlebar

[ddelabru]

I think all that needs to be done for this is to create a simple GNOME Shell theme. Bluebird currently doesn't have a GNOME Shell theme at all, but Greybird's GNOME Shell theme is only 9 lines long, so it doesn't look too terribly daunting. It may be a couple weeks before I have the chance to focus on this becuase of certain academic/work commitments; I'll want to set up a little VM for it since GNOME isn't my primary desktop environment.

[jbicha]

My GNOME Shell theme is "Yaru" which is the default for Ubuntu 18.10 but I am not talking about the GNOME Shell theme here at all.

I suspect the only reason the titlebars look blue for you is because your xfwm theme is set to Bluebird. And I suspect that you can reproduce my issue in any desktop other than Xfce.

Yaru's titlebars are very dark gray. I think the current Bluebird titlebars are the same as Greybird's.

[danielecolangelo]

The background color is defined here https://github.com/shimmerproject/Bluebird/blob/master/gtk-3.0/_colors.scss#L22

But header bars contain other elements (as labels and buttons) and probably you need to redefine each one of them.

[ddelabru]

Thanks, @danielecolangelo! Looks like we can change the headerbar background color with one line (probably $headerbar_color: $mb_bg_color or $headerbar_color: #4e7aa9) and then just find where in the other CSS files this variable is used in order to fix the foreground color, but I'd also like to get the buttons looking right and actually test it in GNOME Shell before I merge. I'll start tweaking stuff in a branch, though.

[ddelabru]

I thought that I would have to be using GNOME Shell to see the effects of what I'm doing, but it turns out that if I use, say, Evince in XFCE, the headerbar styling is used to draw the top of the window, not the xfwm theme. This will also affect how certain other things are themed, that I had grown used to being gray, e.g. the navbar in Thunar. So I'll be playing around with it.

[ddelabru]

Things are still excessively busy around here but I have been trying my hand at this again and I've got the beginnings of something decent; here are Google Chrome and evince with blue headerbars for reference; this time I've done it without affecting other widgets like the Thunar navbar I mentioned before. As you can see, though, I've yet to make it use the Bluebird window buttons that are in the xfwm and metacity themes. Once I've done that and made some color tweaks I'll make a PR for it so folks will have a chance to review what I've changed.

[jsane-h8ms]

Here is my promised patch for flat button cleanup.

---
gtk-3.0/_common.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/gtk-3.0/_common.scss b/gtk-3.0/_common.scss
index bf824b8..29e6916 100644
--- a/gtk-3.0/_common.scss
+++ b/gtk-3.0/_common.scss
@@ -462,7 +462,6 @@ button {
       // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
       // in this case the duration is increased.
       transition: none;
-      padding: 5px 6px;

       &:hover {
         transition: $button_transition;
@@ -1248,6 +1247,10 @@ combobox {
   -GtkWidget-window-dragging: true;
   padding: 4px;
   background-color: $bg_color;
+
+  button.flat {
+    padding: 5px 6px;
+  }
 }

 toolbar {
@@ -1256,7 +1259,7 @@ toolbar {

   box-shadow: none;
   border-bottom:1px solid $borders_color;
-  padding: 4px 3px 3px 4px;
+  padding: 2px 3px 1px 4px;

   // on OSD
   .osd & { background-color: transparent; }
-- 
2.17.1

I also played around with the toolbars for a few minutes, @ddelabru you are much further it seems. If you have any use for it...

---
 gtk-3.0/_colors.scss | 3 ++-
 gtk-3.0/_common.scss | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/gtk-3.0/_colors.scss b/gtk-3.0/_colors.scss
index 447f983..d4b3980 100644
--- a/gtk-3.0/_colors.scss
+++ b/gtk-3.0/_colors.scss
@@ -19,7 +19,8 @@ $link_color: if($variant == 'light', #2d71b8, lighten(#2d71b8,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, 35%);
-$headerbar_color: if($variant == 'light', $bg_color, darken($bg_color, 3%));
+$toolbar_color: if($variant == 'light', $bg_color, darken($bg_color, 3%));
+$headerbar_color: $mb_bg_color;
 // $menu_color: if($variant == 'light', #dcdcdc, darken(#dcdcdc, 20%));
 $menu_color: if($variant == 'light', lighten($bg_color, 18%), mix($bg_color, $base_color, 20%));
 $popover_bg_color: lighten($bg_color, 18%);
diff --git a/gtk-3.0/_common.scss b/gtk-3.0/_common.scss
index 29e6916..5b93c44 100644
--- a/gtk-3.0/_common.scss
+++ b/gtk-3.0/_common.scss
@@ -1255,7 +1255,7 @@ combobox {

 toolbar {
   @extend %toolbar;
-  @include headerbar_fill;
+  @include headerbar_fill($toolbar_color);

   box-shadow: none;
   border-bottom:1px solid $borders_color;
@@ -4275,6 +4275,11 @@ button.titlebutton {
     background-position: center;
     background-repeat: no-repeat;

+    &:hover {
+      box-shadow: none;
+      border-color: transparent;
+    }
+
     // fade the png buttons out on unfocused windows
     &:backdrop { opacity: 0.5; }
   }
-- 
2.17.1

[mabequinho]

That would be great today since applications like thunderbird and firefox use csd with gtk colors.