elementary · danirabbit · Aug 28, 2026
diff --git a/lib/StyleManager.vala b/lib/StyleManager.vala
@@ -11,11 +11,9 @@
 public class Granite.StyleManager : Object {
     private static Gtk.CssProvider? accent_provider = null;
     private static Gtk.CssProvider? base_provider = null;
-    private static Gtk.CssProvider? dark_provider = null;
     private static Gtk.CssProvider? app_provider = null;
 #if INCLUDE_GTK_STYLESHEETS
     private static Gtk.CssProvider? gtk_base_provider = null;
-    private static Gtk.CssProvider? gtk_dark_provider = null;
 #endif
     private static HashTable<Gdk.Display, StyleManager>? style_managers_by_displays;
 
@@ -95,57 +93,20 @@ public class Granite.StyleManager : Object {
             }
         }
 
-        if (Gtk.Settings.get_for_display (display).gtk_application_prefer_dark_theme) {
-            if (base_provider != null) {
-                Gtk.StyleContext.remove_provider_for_display (display, base_provider);
-            }
-
-#if INCLUDE_GTK_STYLESHEETS
-            if (gtk_base_provider != null) {
-                Gtk.StyleContext.remove_provider_for_display (display, gtk_base_provider);
-            }
-#endif
-
-            if (dark_provider == null) {
-                dark_provider = new Gtk.CssProvider ();
-                dark_provider.load_from_resource ("/io/elementary/granite/Granite-dark.css");
-            }
-
-#if INCLUDE_GTK_STYLESHEETS
-            if (gtk_dark_provider == null) {
-                gtk_dark_provider = new Gtk.CssProvider ();
-                gtk_dark_provider.load_from_resource ("/io/elementary/granite/Gtk-dark.css");
-            }
-
-            Gtk.StyleContext.add_provider_for_display (display, gtk_dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
-#endif
-            Gtk.StyleContext.add_provider_for_display (display, dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
-        } else {
-            if (dark_provider != null) {
-                Gtk.StyleContext.remove_provider_for_display (display, dark_provider);
-            }
-
-#if INCLUDE_GTK_STYLESHEETS
-            if (gtk_dark_provider != null) {
-                Gtk.StyleContext.remove_provider_for_display (display, gtk_dark_provider);
-            }
-#endif
-
-            if (base_provider == null) {
-                base_provider = new Gtk.CssProvider ();
-                base_provider.load_from_resource ("/io/elementary/granite/Granite.css");
-            }
+        if (base_provider == null) {
+            base_provider = new Gtk.CssProvider ();
+            base_provider.load_from_resource ("/io/elementary/granite/Granite.css");
+        }
 
 #if INCLUDE_GTK_STYLESHEETS
-            if (gtk_base_provider == null) {
-                gtk_base_provider = new Gtk.CssProvider ();
-                gtk_base_provider.load_from_resource ("/io/elementary/granite/Gtk.css");
-            }
+        if (gtk_base_provider == null) {
+            gtk_base_provider = new Gtk.CssProvider ();
+            gtk_base_provider.load_from_resource ("/io/elementary/granite/Gtk.css");
+        }
 
-            Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
+        Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
 #endif
-            Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
-        }
+        Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
     }
 
     private Gtk.CssProvider? init_provider_from_file (File file) {

diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss
@@ -2,7 +2,7 @@
 // simplified
 
 @function shadow($level) {
-    @if $color-scheme == "light" {
+    // @if $color-scheme == "light" {
         @if $level == 1 {
             @return
                 0 1px 3px rgba(black, 0.12),
@@ -22,27 +22,27 @@
                 0 15px 12px -10px rgba(black, 0.4),
                 0 8px 14px 4px rgba(black, 0.15);
         }
-    } @else if $color-scheme == "dark" {
-        @if $level == 1 {
-            @return
-                0 1px 3px rgba(black, 0.42),
-                0 1px 2px rgba(black, 0.44);
-        } @else if $level == 2 {
-            @return
-                0 3px 4px rgba(black, 0.25),
-                0 3px 3px -3px rgba(black, 0.45);
-        } @else if $level == 3 {
-            @return
-                0 3px 8px 2px rgba(black, 0.2),
-                0 5px 5px -3px rgba(black, 0.5),
-                0 8px 5px 1px rgba(black, 0.2);
-        } @else if $level == 4 {
-            @return
-                0 2px 4px 2px rgba(black, 0.2),
-                0 15px 12px -10px rgba(black, 0.5),
-                0 8px 14px 4px rgba(black, 0.25);
-        }
-    }
+    // } @else if $color-scheme == "dark" {
+    //     @if $level == 1 {
+    //         @return
+    //             0 1px 3px rgba(black, 0.42),
+    //             0 1px 2px rgba(black, 0.44);
+    //     } @else if $level == 2 {
+    //         @return
+    //             0 3px 4px rgba(black, 0.25),
+    //             0 3px 3px -3px rgba(black, 0.45);
+    //     } @else if $level == 3 {
+    //         @return
+    //             0 3px 8px 2px rgba(black, 0.2),
+    //             0 5px 5px -3px rgba(black, 0.5),
+    //             0 8px 5px 1px rgba(black, 0.2);
+    //     } @else if $level == 4 {
+    //         @return
+    //             0 2px 4px 2px rgba(black, 0.2),
+    //             0 15px 12px -10px rgba(black, 0.5),
+    //             0 8px 14px 4px rgba(black, 0.25);
+    //     }
+    // }
 }
 
 @function highlight($sides: "full") {

diff --git a/lib/Styles/Granite-dark.scss b/lib/Styles/Granite-dark.scss
diff --git a/lib/Styles/Granite.scss b/lib/Styles/Granite.scss
@@ -1,4 +1,3 @@
-$color-scheme: "light";
 // Common Styles
 @import 'Index.scss';
 

diff --git a/lib/Styles/Granite/Button.scss b/lib/Styles/Granite/Button.scss
@@ -5,7 +5,9 @@ button {
         color: white;
         text-shadow: none;
 
-        @if $color-scheme == "dark" {background-clip: padding-box;}
+        @media (prefers-color-scheme: dark) {
+            background-clip: padding-box;
+        }
 
         &:backdrop {
             background-color: inherit;
@@ -50,7 +52,7 @@ button {
         // This stacks with the other shadows,
         // so reduce it's alpha by the sum of other shadows
         $shadow-border-color: scale-color($border-color, $alpha: -50%);
-        @if $color-scheme == "dark" {
+        @media (prefers-color-scheme: dark) {
             $shadow-border-color: transparent
         }
 

diff --git a/lib/Styles/Gtk-dark.scss b/lib/Styles/Gtk-dark.scss
diff --git a/lib/Styles/Gtk.scss b/lib/Styles/Gtk.scss
@@ -1,4 +1,3 @@
-$color-scheme: "light";
 // Common Styles
 @import 'Index.scss';
 

diff --git a/lib/Styles/Gtk/Paned.scss b/lib/Styles/Gtk/Paned.scss
@@ -1,5 +1,5 @@
 $separator-highlight-color: rgba(white, 1);
-@if $color-scheme == "dark" {
+@media (prefers-color-scheme: dark) {
     $separator-highlight-color: rgba(white, 0.10);
 }
 

diff --git a/lib/Styles/Gtk/Separator.scss b/lib/Styles/Gtk/Separator.scss
@@ -1,5 +1,5 @@
 $separator-color: rgba(black, 0.15);
-@if $color-scheme == "dark" {
+@media (prefers-color-scheme: dark) {
     $separator-color: rgba(black, 0.35);
 }
 
@@ -8,4 +8,4 @@ separator {
     min-height: 1px;
     min-width: 1px;
 }
-    
+
diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss
@@ -1,56 +1,3 @@
 $color-scheme: "dark";
 
-// Constants and functions
-@import 'Common/Variables.scss';
 
-// Outset box shadow or border color on toplevel elements like windows, menus, popovers
-$toplevel-border-color: rgba(black, 0.75);
-
-@function bg-color($level) {
-    // Inputs
-    @if $level == 0 {
-        @return $BLACK_500;
-    // Views
-    } @else if $level == 1 {
-        @return mix($BLACK_500, $BLACK_600, $weight: 50%);
-    // Background
-    } @else if $level == 2 {
-        @return $BLACK_600;
-    // Sidebars and inline toolbars
-    } @else if $level == 3 {
-        @return mix($BLACK_600, $BLACK_700, $weight: 50%);
-    // Titlebars and toolbars
-    } @else if $level == 4 {
-        @return $BLACK_700;
-    }
-}
-
-// Outset box shadow or border color on inputs like buttons, entries, checkboxes
-$border-color: rgba(black, 0.3);
-
-// Text, images, and other foreground elements
-$fg-color: white;
-
-// Inset box shadows
-$highlight_color: rgba(white, 0.2);
-
-// Semantic colors
-$error-color: $STRAWBERRY_300;
-$success-color: $LIME_300;
-$warning-color: $BANANA_100;
-$warning-icon-color: $BANANA_500;
-
-// Common styles
-@import 'Common/Mixins.scss';
-@import '_exported.scss';
-@import '_label.scss';
-@import '_osd.scss';
-
-// Gtk Widgets
-// @import 'Gtk/Index.scss';
-
-// Granite widgets
-@import 'Granite/Index.scss';
-
-// Maps
-@import 'Shumate/Index.scss';
diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss
@@ -1,5 +1,3 @@
-$color-scheme: "light";
-
 // Constants and functions
 @import 'Common/Variables.scss';
 
@@ -54,3 +52,43 @@ $warning-icon-color: mix($BANANA_500, $BANANA_700, $weight: 50%);
 
 // Maps
 @import 'Shumate/Index.scss';
+
+
+// DARK STUFF
+
+// Outset box shadow or border color on toplevel elements like windows, menus, popovers
+$toplevel-border-color: rgba(black, 0.75);
+
+@function bg-color($level) {
+    // Inputs
+    @if $level == 0 {
+        @return $BLACK_500;
+    // Views
+    } @else if $level == 1 {
+        @return mix($BLACK_500, $BLACK_600, $weight: 50%);
+    // Background
+    } @else if $level == 2 {
+        @return $BLACK_600;
+    // Sidebars and inline toolbars
+    } @else if $level == 3 {
+        @return mix($BLACK_600, $BLACK_700, $weight: 50%);
+    // Titlebars and toolbars
+    } @else if $level == 4 {
+        @return $BLACK_700;
+    }
+}
+
+// Outset box shadow or border color on inputs like buttons, entries, checkboxes
+$border-color: rgba(black, 0.3);
+
+// Text, images, and other foreground elements
+$fg-color: white;
+
+// Inset box shadows
+$highlight_color: rgba(white, 0.2);
+
+// Semantic colors
+$error-color: $STRAWBERRY_300;
+$success-color: $LIME_300;
+$warning-color: $BANANA_100;
+$warning-icon-color: $BANANA_500;
diff --git a/lib/Styles/_exported.scss b/lib/Styles/_exported.scss
@@ -12,7 +12,7 @@
 @define-color selected_bg_color #{'alpha(@accent_color, 0.25)'};
 @define-color selected_fg_color #{'shade(@accent_color, 0.5)'};
 
-@if $color-scheme == "dark" {
+@media (prefers-color-scheme: dark) {
     @define-color selected_bg_color #{'alpha(shade(@accent_color, 0.85), 0.5)'};
     @define-color selected_fg_color #{'mix(shade(@accent_color, 1.1), white, 0.75)'};
 }
diff --git a/lib/Styles/meson.build b/lib/Styles/meson.build
@@ -16,20 +16,6 @@ gtk_stylesheet_deps = custom_target(
     install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
 )
 
-gtk_stylesheet_dark_deps = custom_target(
-    'Gtk-dark.scss',
-    input: 'Gtk-dark.scss',
-    output: 'gtk-dark.css',
-    command: [
-        sassc,
-        sassc_opts,
-        '@INPUT@',
-        '@OUTPUT@',
-    ],
-    install: get_option('gtk-stylesheets'),
-    install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
-)
-
 granite_stylesheet_deps = custom_target(
     'Granite.scss',
     input: 'Granite.scss',
@@ -44,20 +30,6 @@ granite_stylesheet_deps = custom_target(
     install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
 )
 
-granite_stylesheet_dark_deps = custom_target(
-    'Granite-dark.scss',
-    input: 'Granite-dark.scss',
-    output: 'granite-dark.css',
-    command: [
-        sassc,
-        sassc_opts,
-        '@INPUT@',
-        '@OUTPUT@',
-    ],
-    install: false,
-    install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
-)
-
 stylesheet_resource = gnome.compile_resources(
     'styles-resource',
     'styles.gresource.xml',
@@ -67,8 +39,6 @@ stylesheet_resource = gnome.compile_resources(
     ],
     dependencies: [
         gtk_stylesheet_deps,
-        gtk_stylesheet_dark_deps,
         granite_stylesheet_deps,
-        granite_stylesheet_dark_deps
     ]
 )
diff --git a/lib/Styles/styles.gresource.xml b/lib/Styles/styles.gresource.xml
@@ -1,9 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/granite">
-    <file alias="Granite-dark.css" compressed="true">granite-dark.css</file>
     <file alias="Granite.css" compressed="true">granite.css</file>
-    <file alias="Gtk-dark.css" compressed="true">gtk-dark.css</file>
     <file alias="Gtk.css" compressed="true">gtk.css</file>
   </gresource>