diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss
index 39c751f5..1bf02331 100644
--- a/src/sass/_colors.scss
+++ b/src/sass/_colors.scss
@@ -147,8 +147,9 @@ $assets-color:                          $primary;
   $assets-color:                        if($variant == 'light', $green-dark, $green-light);
 }
 
-$frame:                                 if($variant == 'light', rgba($black, 0.12), rgba($black, 0.20));
+$frame:                                 if($variant == 'light', rgba($black, 0.12), rgba($black, 0.25));
 $border:                                if($variant == 'light', rgba($black, 0.12), rgba($white, 0.12));
+$shade:                                 if($variant == 'light', rgba($black, 0.08), rgba($white, 0.08));
 $window-border:                         if($variant == 'light', rgba($black, 0.12), rgba($black, 0.75));
 $solid-border:                          if($variant == 'light', mix(black, $base, 12%), mix(white, $base, 12%));
 $border-alt:                            rgba($black, 0.16); // darker border color for Chrome and Firefox
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index f1a48c00..fc302f87 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -290,6 +290,19 @@ entry {
 
     // &.search { border-radius: $circular-radius; }
 
+    > text {
+      > placeholder {
+        color: $text-disabled;
+      }
+
+      > block-cursor {
+        color: $fill;
+        background-color: $text;
+      }
+
+      > selection { @extend %selected_items_primary; }
+    }
+
     &.flat {
       &:focus-within, &:disabled, &:hover, & {
         min-height: 0;
@@ -301,7 +314,7 @@ entry {
       }
     }
 
-    image { // icons inside the entry
+    > image { // icons inside the entry
       color: $text-secondary;
 
       &:hover, &:active { color: $text; }
@@ -317,14 +330,10 @@ entry {
       }
     }
 
-    undershoot {
-      &.left { @include undershoot(left); }
-
-      &.right { @include undershoot(right); }
+    &.password image.caps-lock-indicator {
+      opacity: 0.35;
     }
 
-    > text > selection { @extend %selected_items_primary; }
-
     // entry error and warning style
     @each $e_type, $e_color in (error, $error),
                                (warning, $warning),
@@ -348,12 +357,16 @@ entry {
           outline: none;
         }
 
-        > text > selection {
-          background-color: rgba($e_color, 0.25);
-          color: $e_color;
+        > text {
+          > selection {
+            background-color: rgba($e_color, 0.25);
+            color: $e_color;
+          }
+
+          > cursor-handle > contents { background-color: currentColor; }
         }
 
-        image {
+        > image {
           color: rgba($e_color, 0.75);
 
           &:hover, &:active { color: $e_color; }
@@ -371,6 +384,10 @@ entry {
     background-color: transparent;
   }
 
+  .osd & > progress > trough > progress {
+    border-color: on($osd, fill);
+  }
+
   button.image-button {
     min-height: 24px;
     min-width: 24px;
@@ -1464,7 +1481,7 @@ searchbar > revealer > box {
   color: $titlebar-text-secondary;
   border: none;
 
-  &:hover, &:active, &:checked { color: $titlebar-text; }
+  &:hover, &:focus:not(:hover):not(:active), &:active, &:checked { color: $titlebar-text; }
 
   &:disabled { color: $titlebar-text-secondary-disabled; }
 
@@ -1492,14 +1509,29 @@ searchbar > revealer > box {
 
 %titlebar-entry {
   background-color: $titlebar-fill;
-  color: $titlebar-text;
+  color: $titlebar-text-secondary;
+
+  &:hover, &:focus-within {
+    color: $titlebar-text;
+  }
 
   &:disabled {
     background-color: $titlebar-fill;
     color: $titlebar-text-disabled;
   }
 
-  image {
+  > text {
+    > placeholder {
+      color: $titlebar-text-disabled;
+    }
+
+    > block-cursor {
+      color: $titlebar-fill;
+      background-color: $titlebar-text;
+    }
+  }
+
+  > image {
     color: $titlebar-text-secondary;
 
     &:hover, &:active { color: $titlebar-text; }
@@ -1510,7 +1542,7 @@ searchbar > revealer > box {
 
 headerbar {
   transition: background-color $duration $ease-out, color $duration $ease-out;
-  box-shadow: inset 0 -1px $divider;
+  box-shadow: inset 0 -1px $border;
   background-color: $titlebar;
   color: $titlebar-text;
   min-height: $large-size;
@@ -1522,6 +1554,7 @@ headerbar {
   &:backdrop {
     background-color: $titlebar-backdrop;
     color: $titlebar-text-secondary;
+    box-shadow: inset 0 -1px $border;
 
     &:disabled { color: $titlebar-text-secondary-disabled; }
   }
@@ -1574,6 +1607,7 @@ headerbar {
   // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
   entry,
   spinbutton,
+  splitbutton,
   button,
   menubutton,
   stackswitcher,
@@ -2199,7 +2233,7 @@ magnifier {
     box-shadow: none;
   }
 
-  &:checked:not(:active), &:selected:not(:active) {
+  &:selected:not(:active) {
     transition: $transition,
                 border-image $ripple-fade-in-duration $ease-out,
                 background-size 0ms,
@@ -2440,13 +2474,55 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
                               gtkalpha($primary, 0) 20px);
 }
 
+%tabbar_tab {
+  min-height: $small-size;
+  min-width: $small-size;
+  padding: $space-size / 2 $space-size;
+  border: none;
+  background-clip: padding-box;
+  font-weight: 500;
+  border-radius: $modal-radius;
+  @include button(flat-normal);
+  color: $titlebar-text-secondary;
+
+  &:hover:not(:selected) {
+    @include button(flat-hover);
+    box-shadow: none;
+    color: $titlebar-text;
+  }
+
+  &:disabled {
+    @include button(flat-disabled);
+    color: $titlebar-text-secondary-disabled;
+  }
+
+  &:active {
+    @include button(flat-active);
+    box-shadow: none;
+    color: $titlebar-text;
+  }
+
+  &:selected:not(:active) {
+    transition: $transition,
+                border-image $ripple-fade-in-duration $ease-out,
+                background-size 0ms,
+                background-image 0ms,
+                background-color 0ms;
+    background-color: if($topbar == 'light', $base, rgba(white, 0.15));
+    color: $titlebar-text;
+    box-shadow: 0 1px 3px rgba(black, 0.1);
+
+    &:disabled { color: $titlebar-text-disabled; }
+  }
+}
+
 tabbar {
   > revealer > box {
     box-shadow: none;
   }
 
   .box {
-    background-color: transparent;
+    background-color: $titlebar;
     background-image: none;
     padding: 0;
     margin: 0;
@@ -2456,8 +2532,8 @@ tabbar {
     box-shadow: none;
 
     &:backdrop {
-      background-color: transparent;
-      transition: none;
+      background-color: $titlebar-backdrop;
+      transition: background-color $duration $ease-out;
 
       > scrolledwindow,
       > .start-action,
@@ -2470,6 +2546,7 @@ tabbar {
 
   tabbox {
     padding: 0;
+    margin: 0;
     min-height: $medium-size;
 
     > background {
@@ -2487,11 +2564,12 @@ tabbar {
 
     > tabboxchild {
       padding: 0;
+      margin: 0;
     }
   }
 
   tab {
-    @extend %tabs_tab;
+    @extend %tabbar_tab;
     padding: $space-size;
     margin: $space-size 2px;
 
@@ -2608,6 +2686,15 @@ dnd {
       min-width: $small-size;
       min-height: $small-size;
       border-radius: $circular-radius;
+      color: $titlebar-text-secondary;
+
+      &:hover, &:active {
+        color: $titlebar-text;
+      }
+
+      &:disabled {
+        color: $titlebar-text-secondary-disabled;
+      }
     }
 
     indicator {
@@ -3514,6 +3601,12 @@ scrolledwindow {
     &:dir(ltr) { @include undershoot(right); }
     &:dir(rtl) { @include undershoot(left); }
   }
+
+  > undershoot {
+    background-image: none;
+    box-shadow: none;
+    border: none;
+  }
 }
 
 // vbox and hbox separators
@@ -3701,7 +3794,7 @@ row {
 
   &:selected {
     background-color: $overlay-selected;
-    color: inherit; // for overlays
+    color: $text;
     box-shadow: none;
 
     &:hover {
@@ -3716,15 +3809,11 @@ row {
       &:hover { background-color: $overlay-focus-hover; }
     }
 
-    image,
-    label { color: $text; }
-
     button image,
     button label { color: inherit; }
 
     &:disabled {
-      image,
-      label { color: $text-disabled; }
+      color: $text-disabled;
     }
   }
 }
@@ -3789,11 +3878,6 @@ row {
 
 // AdwEntryRow
 row.entry {
-  &:not(:selected).activatable.focused:hover,
-  &:not(:selected).activatable.focused:active {
-    background-color: transparent;
-  }
-
   .edit-icon, .indicator {
     min-width: 24px;
     min-height: 24px;
@@ -3815,6 +3899,49 @@ row.entry {
       font-family: monospace;
     }
   }
+}
+
+row.spin {
+  spinbutton {
+    background: none;
+    border-spacing: $space-size;
+    box-shadow: none;
+
+    &, &:focus {
+      outline: none;
+    }
+
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        @extend %button-basic;
+        @extend %circular-button;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 10px 2px;
+        border: none;
+      }
+    }
+  }
+
+  &:disabled spinbutton {
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        &:disabled {
+          filter: none;
+        }
+      }
+    }
+  }
+}
+
+row.entry,
+row.spin {
+  &:not(:selected).activatable.focused:hover,
+  &:not(:selected).activatable.focused:active {
+    background-color: transparent;
+  }
 
   @each $e_type, $e_color in (error,   $error),
                              (warning, $warning),
@@ -3827,6 +3954,15 @@ row.entry {
 
         > cursor-handle > contents { background-color: currentColor; }
       }
+
+      .dim-label, .subtitle {
+        opacity: 1;
+      }
+
+      .suggested-action {
+        background-color: $e_color;
+        color: on($e_color);
+      }
     }
   }
 }
@@ -4308,21 +4444,6 @@ filechooserbutton:drop(active) {
   border-style: none;
   background-color: $base-alt;
 
-  // &:not(separator) {
-  //   &:dir(ltr),
-  //   &.left,
-  //   &.left:dir(rtl) {
-  //     border-right: 1px solid $border;
-  //     border-left-style: none;
-  //   }
-
-  //   &:dir(rtl),
-  //   &.right {
-  //     border-left: 1px solid $border;
-  //     border-right-style: none;
-  //   }
-  // }
-
   listview.view,
   list {
     background-color: transparent;
@@ -4333,11 +4454,26 @@ filechooserbutton:drop(active) {
 }
 
 stacksidebar {
+  &.sidebar {
+    &:dir(ltr),
+    &.left,
+    &.left:dir(rtl) {
+      box-shadow: inset -1px 0 $border;
+    }
+
+    &:dir(rtl),
+    &.right,
+    &.right:dir(ltr) {
+      box-shadow: inset 1px 0 $border;
+    }
+  }
+
   + separator.vertical,
   separator.horizontal { @extend %hide_separators; }
 
+  .sidebar-pane &.sidebar,
   leaflet.unfolded > box > &.sidebar {
-    border: none;
+    box-shadow: none;
   }
 
   list {
@@ -4431,6 +4567,9 @@ placessidebar {
     }
 
     image.sidebar-icon {
+      color: inherit;
+      opacity: 0.75;
+
       &:dir(ltr) { padding-right: 8px; }
       &:dir(rtl) { padding-left: 8px; }
     }
diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss
index 71b7aa3c..188c8808 100644
--- a/src/sass/gtk/_drawing-4.0.scss
+++ b/src/sass/gtk/_drawing-4.0.scss
@@ -273,7 +273,7 @@
 }
 
 
-@mixin undershoot($p, $c: $frame, $neighbor: false) {
+@mixin undershoot($p, $c: $frame, $neighbor: false, $style: 'compact') {
 //
 // undershoot
 //
@@ -304,10 +304,15 @@
   } @else {
     @error "Unknown position #{$p}"
   }
-  
+
   #{$_selector} undershoot.#{$p} {
-    box-shadow: inset $_border_pos $border;
-    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px);
+    @if $style == 'compact' {
+      box-shadow: none;
+    } @else {
+      box-shadow: inset $_border_pos $shade;
+    }
+
+    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent $space-size);
   }
 }
 
diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss
index 36908c66..3814ca74 100644
--- a/src/sass/gtk/apps/_gnome-4.0.scss
+++ b/src/sass/gtk/apps/_gnome-4.0.scss
@@ -56,6 +56,10 @@
   background-color: $titlebar-fill;
   border-radius: $corner-radius;
   margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
 }
 
 #NautilusPathButton {
@@ -71,6 +75,10 @@
     }
   }
 
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
   &:first-child { margin-left: 0; }
 }
 
@@ -1437,12 +1445,17 @@ popover.background.global-search {
 }
 
 panelframeswitcher {
-  padding: $space-size / 2;
+  padding: $space-size;
+  min-height: $medium-size;
 }
 
 .frameheader.header {
-  min-height: $small-size;
-  background-color: $base-alt;
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
 
   > button {
     border: none;
@@ -1462,6 +1475,8 @@ panelframeswitcher {
       .end-action {
         padding: 0;
         border-left: 1px solid $border;
+
+        button { margin: $space-size; }
       }
 
       tabbox {
@@ -1532,6 +1547,23 @@ playlistview {
   }
 }
 
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
 //
 // dialogs
 //
diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss
index 2d1c09b9..4cfa14b1 100644
--- a/src/sass/gtk/apps/_libadwaita.scss
+++ b/src/sass/gtk/apps/_libadwaita.scss
@@ -380,12 +380,16 @@ toolbarview.undershoot-bottom scrolledwindow {
 // Sidebar
 .unfolded stacksidebar.sidebar { border: none; }
 
+$sidebar: if($topbar == 'dark' and $variant == 'light', $titlebar, $base-alt);
+$sidebar-backdrop: if($topbar == 'dark' and $variant == 'light', $titlebar-backdrop, $background);
+
 .sidebar-pane {
-  background-color: $base-alt;
-  color: $text;
+  background-color: $sidebar;
+  color: on($sidebar);
 
   &:backdrop {
-    background-color: $background;
+    color: on($sidebar, disabled);
+    background-color: $sidebar-backdrop;
     transition: background-color $duration $ease-out;
   }
 
@@ -395,6 +399,7 @@ toolbarview.undershoot-bottom scrolledwindow {
   }
 
   .toolbar,
+  .sidebar,
   .navigation-sidebar,
   searchbar > revealer > box {
     background-color: transparent;
@@ -402,23 +407,199 @@ toolbarview.undershoot-bottom scrolledwindow {
     border: none;
   }
 
+  @if $topbar == 'dark' and $variant == 'light' {
+    button:not(.suggested-action):not(.destructive-action) { @extend %titlebar-button; }
+
+    entry { @extend %titlebar-entry; }
+
+    .dim-label { color: on($sidebar, disabled); }
+  
+    .navigation-sidebar {
+      > row {
+        color: on($sidebar, secondary);
+  
+        &:hover, &:active, &:focus, &:selected {
+          color: on($sidebar);
+        }
+  
+        &:disabled {
+          color: on($sidebar, secondary-disabled);
+        }
+  
+        button { @extend %titlebar-button; }
+      }
+    }
+  
+    placessidebar {
+      background-color: transparent;
+
+      .navigation-sidebar {
+        > row {
+          color: on($sidebar, secondary);
+
+          image.sidebar-icon,
+          label.sidebar-label {
+            color: on($sidebar, secondary);
+          }
+
+          &:hover, &:active, &:focus, &:selected {
+            color: on($sidebar);
+
+            image.sidebar-icon,
+            label.sidebar-label {
+              color: on($sidebar);
+            }
+          }
+
+          &:disabled {
+            color: on($sidebar, secondary-disabled);
+
+            image.sidebar-icon,
+            label.sidebar-label {
+              color: on($sidebar, secondary-disabled);
+            }
+          }
+
+          button { @extend %titlebar-button; }
+        }
+      }
+    }
+  
+    scrollbar {
+      background-color: transparent;
+  
+      > range > trough {
+        > slider {
+          background-color: on($sidebar, disabled);
+    
+          &:hover { background-color: on($sidebar, secondary); }
+    
+          &:active { background-color: on($sidebar); }
+    
+          &:disabled { background-color: on($sidebar, secondary-disabled); }
+        }
+      }
+  
+      &.overlay-indicator {
+        &:not(.dragging):not(.hovering) {
+          > range > trough > slider {
+            border: none;
+          }
+        }
+  
+        &.dragging,
+        &.hovering {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
   banner > revealer > widget {
-    background-color: gtkmix($primary, $base-alt, 30%);
+    background-color: gtkmix($primary, $sidebar, 30%);
     color: $text;
 
     &:backdrop {
-      background-color: gtkmix($primary, $base-alt, 30%);
+      background-color: gtkmix($primary, $sidebar, 30%);
+    }
+  }
+}
+
+%content-button-reset {
+  color: $text-secondary;
+
+  &:hover, &:focus:not(:hover):not(:active), &:active, &:checked { color: $text; }
+
+  &:disabled { color: $text-secondary-disabled; }
+
+  &:checked {
+    &:disabled {
+      color: $text-disabled;
+    }
+  }
+
+  &:backdrop {
+    color: $text-disabled;
+
+    &:focus, &:hover, &:active { color: $text-secondary; }
+
+    &:disabled { color: $text-secondary-disabled; }
+
+    &:checked {
+      color: $text-secondary;
+
+      &:disabled { color: $text-secondary-disabled; }
     }
   }
 }
 
 .content-pane {
-  tabbar {
-    tab {
-      &:checked:not(:active), &:selected:not(:active) {
-        background-color: $overlay-selected;
-        color: $text;
-        box-shadow: none;
+  @if $topbar == 'dark' and $variant == 'light' {
+    headerbar {
+      color: $text;
+
+      .subtitle,
+      .dim-label {
+        color: $text-secondary;
+
+        &:backdrop { color: $text-disabled; }
+      }
+
+      @if $window_button == 'mac' {
+        button:not(.suggested-action):not(.destructive-action):not(.close):not(.minimize):not(.maximize) {
+          @extend %content-button-reset;
+        }
+
+        windowcontrols {
+          > button:not(.suggested-action):not(.destructive-action) {
+            &.minimize, &.maximize, &.close {
+              &:backdrop {
+                > image { background-color: $track; }
+
+                &:hover, &:active {
+                  color: $text-disabled;
+                }
+              }
+            }
+          }
+        }
+      } @else {
+        button:not(.suggested-action):not(.destructive-action) {
+          @extend %content-button-reset;
+        }
+      }
+
+      entry {
+        background-color: $fill;
+        color: $text-secondary;
+
+        &:hover, &:focus-within {
+          color: $text;
+        }
+
+        &:disabled {
+          background-color: $fill;
+          color: $text-disabled;
+        }
+
+        > text {
+          > placeholder {
+            color: $text-disabled;
+          }
+
+          > block-cursor {
+            color: $fill;
+            background-color: $text;
+          }
+        }
+
+        > image {
+          color: $text-secondary;
+
+          &:hover, &:active { color: $text; }
+
+          &:disabled { color: $text-disabled; }
+        }
       }
     }
   }
@@ -448,41 +629,6 @@ toolbarview.undershoot-bottom scrolledwindow {
 .sidebar-pane,
 .content-pane .sidebar-pane,
 .sidebar-pane .content-pane {
-  toolbarview.undershoot-top scrolledwindow {
-    @include undershoot(top);
-  }
-
-  toolbarview.undershoot-bottom scrolledwindow {
-    @include undershoot(bottom);
-  }
-
-  scrolledwindow {
-    &.undershoot-top {
-      @include undershoot(top);
-    }
-
-    &.undershoot-bottom {
-      @include undershoot(bottom)
-    }
-
-    &.undershoot-start {
-      &:dir(ltr) { @include undershoot(left); }
-      &:dir(rtl) { @include undershoot(right); }
-    }
-
-    &.undershoot-end {
-      &:dir(ltr) { @include undershoot(right); }
-      &:dir(rtl) { @include undershoot(left); }
-    }
-  }
-
-  flap,
-  leaflet,
-  navigation-view,
-  overlay-split-view {
-    @include transition-shadows($frame);
-  }
-
   &:dir(ltr), &.end:dir(rtl) {
     &, banner > revealer > widget {
       box-shadow: none;
@@ -498,19 +644,224 @@ toolbarview.undershoot-bottom scrolledwindow {
   }
 }
 
+.sidebar-pane,
+.content-pane,
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $style: 'border');
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $style: 'border');
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $style: 'border');
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $style: 'border');
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $style: 'border'); }
+      &:dir(rtl) { @include undershoot(right, $style: 'border'); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $style: 'border'); }
+      &:dir(rtl) { @include undershoot(left, $style: 'border'); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($frame);
+  }
+}
+
 .sidebar-pane,
 .content-pane {
-  headerbar {
+  headerbar, .top-bar {
     &, &:backdrop {
       background-color: transparent;
       box-shadow: none;
     }
   }
+
+  tabbar {
+    .box {
+      &, &:backdrop {
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    tab {
+      color: $text-secondary;
+
+      &:hover:not(:selected), &:active {
+        color: $text;
+      }
+
+      &:selected:not(:active) {
+        background-color: $overlay-selected;
+        color: $text;
+        box-shadow: none;
+      }
+
+      &:disabled {
+        color: $text-secondary-disabled;
+      }
+    }
+
+    button.image-button {
+      color: $text-secondary;
+
+      &:hover, &:active {
+        color: $text;
+      }
+
+      &:disabled {
+        color: $text-secondary-disabled;
+      }
+    }
+  }
 }
 
 // Gnome >= 45.0
 .top-bar {
+  box-shadow: inset 0 -1px $border;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
   .collapse-spacing {
     padding: 0;
   }
 }
+
+
+// ThemeSelector
+themeselector, // Gnome text editor
+panelthemeselector { // Gnome builder
+  margin: $space-size * 1.5;
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    background-clip: content-box;
+    border-radius: $circular-radius;
+    box-shadow: inset 0 0 0 1px $border;
+
+    &.follow:checked,
+    &.light:checked,
+    &.dark:checked {
+      box-shadow: inset 0 0 0 2px $primary;
+    }
+
+    &.follow {
+      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
+    }
+
+    &.light {
+      background-color: #ffffff;
+    }
+
+    &.dark {
+      background-color: #202020;
+    }
+
+    &.theme-selector radio {
+      -gtk-icon-source: none;
+      border: none;
+      background: none;
+      box-shadow: none;
+      min-height: 20px;
+      min-width: 20px;
+      padding: 0;
+
+      &:hover, &:active, &:checked {
+        background-color: transparent;
+      }
+
+      &:checked {
+        -gtk-icon-size: 20px;
+        -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/scalable/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/scalable/checkbox-checked-symbolic@2.svg")));
+        color: on($primary);
+        background-color: $primary;
+
+        &, &:hover, &:active {
+          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+        }
+      }
+    }
+  }
+}
+
+themeswitcher { // Gnome console
+  padding: $space-size;
+
+  .check {
+    min-height: 20px;
+    min-width: 20px;
+    background: none;
+    padding: 0;
+    margin: 0;
+    border-radius: $circular-radius;
+    color: on($primary);
+    background-color: $primary;
+
+    &, &:hover, &:active {
+      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+    }
+  }
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    background-clip: content-box;
+    border-radius: $circular-radius;
+    box-shadow: inset 0 0 0 1px $border;
+
+    &:checked {
+      box-shadow: inset 0 0 0 2px $primary;
+    }
+
+    radio {
+      &, &:hover, &:active, &:checked, &:checked:hover, &:checked:active {
+        background-color: transparent;
+        border: none;
+        background: none;
+        box-shadow: none;
+        color: transparent;
+        -gtk-icon-source: none;
+        -gtk-icon-size: 0;
+      }
+    }
+
+    &.system {
+      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
+    }
+
+    &.light {
+      color: gtkalpha(black, .8);
+      background-color: white;
+    }
+
+    &.dark {
+      color: white;
+      background-color: #1e1e1e;
+    }
+  }
+}