Styles: add dark variant (#688)

elementary · Mar 19, 2024 · f0c97cc · f0c97cc
1 parent a31c964
commit f0c97cc
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 55 deletions.
diff --git a/lib/Init.vala b/lib/Init.vala
@@ -6,6 +6,7 @@
 namespace Granite {
     private static bool initialized = false;
     private static Gtk.CssProvider? base_provider = null;
+    private static Gtk.CssProvider? dark_provider = null;
     private static Gtk.CssProvider? app_provider = null;
 
     /*
@@ -35,11 +36,18 @@ namespace Granite {
     }
 
     private static void register_display (Gdk.Display display) {
-        if (base_provider == null) {
-            base_provider = new Gtk.CssProvider ();
-            base_provider.load_from_resource ("/io/elementary/granite/Granite.css");
-        }
+        var gtk_settings = Gtk.Settings.get_for_display (display);
+        gtk_settings.notify["gtk-application-prefer-dark-theme"].connect (() => {
+            set_provider_for_display (display, gtk_settings.gtk_application_prefer_dark_theme);
+        });
+
+        set_provider_for_display (display, gtk_settings.gtk_application_prefer_dark_theme);
 
+        var icon_theme = Gtk.IconTheme.get_for_display (display);
+        icon_theme.add_resource_path ("/io/elementary/granite");
+    }
+
+    private static void set_provider_for_display (Gdk.Display display, bool prefer_dark_style) {
         if (app_provider == null) {
             var base_path = Application.get_default ().resource_base_path;
             if (base_path != null) {
@@ -48,16 +56,35 @@ namespace Granite {
 
                 app_provider = init_provider_from_file (base_file.get_child ("Application.css"));
             }
+
+            if (app_provider != null) {
+                Gtk.StyleContext.add_provider_for_display (display, app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+            }
         }
 
-        Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
+        if (prefer_dark_style) {
+            if (base_provider != null) {
+                Gtk.StyleContext.remove_provider_for_display (display, base_provider);
+            }
+
+            if (dark_provider == null) {
+                dark_provider = new Gtk.CssProvider ();
+                dark_provider.load_from_resource ("/io/elementary/granite/Granite-dark.css");
+            }
 
-        if (app_provider != null) {
-            Gtk.StyleContext.add_provider_for_display (display, app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
-        }
+            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);
+            }
 
-        var icon_theme = Gtk.IconTheme.get_for_display (display);
-        icon_theme.add_resource_path ("/io/elementary/granite");
+            if (base_provider == null) {
+                base_provider = new Gtk.CssProvider ();
+                base_provider.load_from_resource ("/io/elementary/granite/Granite.css");
+            }
+
+            Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
+        }
     }
 
     private static Gtk.CssProvider? init_provider_from_file (File file) {

diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss
@@ -0,0 +1,47 @@
+$color-scheme: "dark";
+
+// Constants and functions
+@import '_palette.scss';
+@import '_common.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 mix($BLACK_300, $BLACK_500, $weight: 50%);
+    // Views
+    } @else if $level == 1 {
+        @return mix($BLACK_300, $BLACK_500, $weight: 25%);
+    // Background
+    } @else if $level == 2 {
+        @return $BLACK_500;
+    // Sidebars and inline toolbars
+    } @else if $level == 3 {
+        @return mix($BLACK_500, $BLACK_700, $weight: 90%);
+    // Titlebars and toolbars
+    } @else if $level == 4 {
+        @return mix($BLACK_500, $BLACK_700, $weight: 45%);
+    }
+}
+
+// Text, images, and other foreground elements
+$fg-color: white;
+
+// Common styles
+@import '_label.scss';
+@import '_osd.scss';
+
+// Gtk Widgets
+@import 'Gtk/Button.scss';
+@import 'Gtk/HeaderBar.scss';
+@import 'Gtk/Window.scss';
+
+// Granite widgets
+@import 'Granite/Dialog.scss';
+@import 'Granite/Header.scss';
+@import 'Granite/MessageDialog.scss';
+@import 'Granite/OverlayBar.scss';
+@import 'Granite/Placeholder.scss';
+@import 'Granite/Toast.scss';
diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss
@@ -1,6 +1,35 @@
-// Class constants and common styles
+$color-scheme: "light";
+
+// Constants and functions
 @import '_palette.scss';
 @import '_common.scss';
+
+// Outset box shadow or border color on toplevel elements like windows, menus, popovers
+$toplevel-border-color: rgba(black, 0.2);
+
+@function bg-color($level) {
+    // Inputs
+    @if $level == 0 {
+        @return $SILVER_100;
+    // Views
+    } @else if $level == 1 {
+        @return white;
+    // Background
+    } @else if $level == 2 {
+        @return $SILVER_100;
+    // Sidebars and inline toolbars
+    } @else if $level == 3 {
+        @return mix($SILVER_100, $SILVER_300, $weight: 75%);
+    // Titlebars and toolbars
+    } @else if $level == 4 {
+        @return mix($SILVER_100, $SILVER_300, $weight: 30%);
+    }
+}
+
+// Text, images, and other foreground elements
+$fg-color: $BLACK_500;
+
+// Common styles
 @import '_label.scss';
 @import '_osd.scss';
 

diff --git a/lib/Styles/_common.scss b/lib/Styles/_common.scss
@@ -16,51 +16,48 @@
     }
 }
 
-@function bg-color($level) {
-    // Inputs
-    @if $level == 0 {
-        @return $SILVER_100;
-    // Views
-    } @else if $level == 1 {
-        @return white;
-    // Background
-    } @else if $level == 2 {
-        @return $SILVER_100;
-    // Sidebars and inline toolbars
-    } @else if $level == 3 {
-        @return mix($SILVER_100, $SILVER_300, $weight: 75%);
-    // Titlebars and toolbars
-    } @else if $level == 4 {
-        @return $titlebar-color;
-    }
-}
-
 @function shadow($level) {
-    @if $level == 1 {
-        @return
-            0 1px 3px rgba(black, 0.12),
-            0 1px 2px rgba(black, 0.24);
-    } @else if $level == 2 {
-        @return
-            0 3px 4px rgba(black, 0.15),
-            0 3px 3px -3px rgba(black, 0.35);
-    } @else if $level == 3 {
-        @return
-            0 3px 8px 2px rgba(black, 0.1),
-            0 5px 5px -3px rgba(black, 0.4),
-            0 8px 5px 1px rgba(black, 0.1);
-    } @else if $level == 4 {
-        @return
-            0 2px 4px 2px rgba(black, 0.1),
-            0 15px 12px -10px rgba(black, 0.4),
-            0 8px 14px 4px rgba(black, 0.15);
+    @if $color-scheme == "light" {
+        @if $level == 1 {
+            @return
+                0 1px 3px rgba(black, 0.12),
+                0 1px 2px rgba(black, 0.24);
+        } @else if $level == 2 {
+            @return
+                0 3px 4px rgba(black, 0.15),
+                0 3px 3px -3px rgba(black, 0.35);
+        } @else if $level == 3 {
+            @return
+                0 3px 8px 2px rgba(black, 0.1),
+                0 5px 5px -3px rgba(black, 0.4),
+                0 8px 5px 1px rgba(black, 0.1);
+        } @else if $level == 4 {
+            @return
+                0 2px 4px 2px rgba(black, 0.1),
+                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);
+        }
     }
 }
 
 $window_radius: 9px;
-
-// Outset box shadow or border color on toplevel elements like windows, menus, popovers
-$toplevel-border-color: rgba(black, 0.2);
-
-// Text, images, and other foreground elements
-$fg-color: $BLACK_500;
diff --git a/lib/Styles/meson.build b/lib/Styles/meson.build
@@ -16,12 +16,29 @@ stylesheet_deps = custom_target(
     install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
 )
 
+stylesheet_dark_deps = custom_target(
+    'Granite-dark.scss',
+    input: 'Index-dark.scss',
+    output: 'gtk-dark.css',
+    command: [
+        sassc,
+        sassc_opts,
+        '@INPUT@',
+        '@OUTPUT@',
+    ],
+    install: true,
+    install_dir: get_option('datadir') / 'themes' / 'Granite' / 'gtk-4.0'
+)
+
 stylesheet_resource = gnome.compile_resources(
     'styles-resource',
     'styles.gresource.xml',
     source_dir: [
         meson.current_build_dir(),
         meson.current_source_dir(),
     ],
-    dependencies: stylesheet_deps
+    dependencies: [
+        stylesheet_deps,
+        stylesheet_dark_deps
+    ]
 )
diff --git a/lib/Styles/styles.gresource.xml b/lib/Styles/styles.gresource.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/io/elementary/granite">
+    <file alias="Granite-dark.css" compressed="true">gtk-dark.css</file>
     <file alias="Granite.css" compressed="true">gtk.css</file>
   </gresource>
 </gresources>