From 95c75c85c415a71a66ea2f4235ca477fd63fc4af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 20 Mar 2024 10:01:07 -0700 Subject: [PATCH 1/8] Theoretically load accent color from dbus --- lib/Init.vala | 17 ++++++++++++ lib/Styles/Index-dark.scss | 1 + lib/Styles/Index.scss | 1 + lib/Styles/_exported.scss | 8 ++++++ lib/Styles/_label.scss | 8 ++++++ lib/Widgets/Settings.vala | 53 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 88 insertions(+) create mode 100644 lib/Styles/_exported.scss diff --git a/lib/Init.vala b/lib/Init.vala index d6c29c825..cc711ecd6 100644 --- a/lib/Init.vala +++ b/lib/Init.vala @@ -7,6 +7,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? accent_provider = null; private static Gtk.CssProvider? app_provider = null; /* @@ -41,12 +42,28 @@ namespace Granite { set_provider_for_display (display, gtk_settings.gtk_application_prefer_dark_theme); }); + var granite_settings = Granite.Settings.get_default (); + granite_settings.notify["accent-color"].connect (() => { + set_accent_for_display (display, granite_settings.accent_color); + }); + set_provider_for_display (display, gtk_settings.gtk_application_prefer_dark_theme); + set_accent_for_display (display, granite_settings.accent_color); var icon_theme = Gtk.IconTheme.get_for_display (display); icon_theme.add_resource_path ("/io/elementary/granite"); } + private static void set_accent_for_display (Gdk.Display display, string accent_color) { + if (accent_provider == null) { + accent_provider = new Gtk.CssProvider (); + } + + Gtk.StyleContext.remove_provider_for_display (display, accent_provider); + accent_provider.load_from_string ("@define-color accent_color %s;".printf (accent_color)); + Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME); + } + 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; diff --git a/lib/Styles/Index-dark.scss b/lib/Styles/Index-dark.scss index f2440fde0..70ed8d00e 100644 --- a/lib/Styles/Index-dark.scss +++ b/lib/Styles/Index-dark.scss @@ -37,6 +37,7 @@ $fg-color: white; $highlight_color: rgba(white, 0.2); // Common styles +@import '_exported.scss'; @import '_label.scss'; @import '_osd.scss'; diff --git a/lib/Styles/Index.scss b/lib/Styles/Index.scss index 44353c92d..871121f02 100644 --- a/lib/Styles/Index.scss +++ b/lib/Styles/Index.scss @@ -37,6 +37,7 @@ $fg-color: $BLACK_500; $highlight_color: white; // Common styles +@import '_exported.scss'; @import '_label.scss'; @import '_osd.scss'; diff --git a/lib/Styles/_exported.scss b/lib/Styles/_exported.scss new file mode 100644 index 000000000..2749bfc61 --- /dev/null +++ b/lib/Styles/_exported.scss @@ -0,0 +1,8 @@ +// These are defined as GtkCSS variables, so are accessible and overridable +// inside of apps. While internal sass variables are considered private API, +// these exported GtkCSS variables should be considered public API. + +@define-color base_color #{"" + bg_color(1)}; +@define-color bg_color #{"" + bg_color(2)}; +@define-color fg_color #{"" + $fg-color}; +@define-color highlight_color #{"" + $highlight_color}; diff --git a/lib/Styles/_label.scss b/lib/Styles/_label.scss index 00f5ea103..b83a4032b 100644 --- a/lib/Styles/_label.scss +++ b/lib/Styles/_label.scss @@ -1,3 +1,11 @@ +.accent { + color: #{'mix(@accent_color, @fg_color, 0.27)'}; + + &:backdrop { + color: inherit; + } +} + .title-1 { font-size: 24pt; font-weight: 700; diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index 51e8c1fe5..307f24415 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -36,6 +36,23 @@ namespace Granite { LIGHT } + private string? _accent_color = null; + + /** + * The theme accent color chosen by the user + */ + public string accent_color { + get { + if (_accent_color == null) { + setup_accent_color (); + } + return (_accent_color); + } + private set { + _accent_color = value; + } + } + private ColorScheme? _prefers_color_scheme = null; /** @@ -96,6 +113,42 @@ namespace Granite { } } + private void setup_accent_color () { + try { + portal = Portal.Settings.get (); + + var variant = portal.read ( + "org.freedesktop.appearance", + "accent-color" + ).get_variant (); + + // When reading the variant it is itself packed into a variant + GLib.Variant color; + variant.get ("v", out color); + update_color (color); + + portal.setting_changed.connect ((scheme, key, val) => { + if (scheme == "org.freedesktop.appearance" && key == "accent-color") { + update_color (val); + } + }); + + return; + } catch (Error e) { + critical (e.message); + } + + // Set a default in case we can't get from system + accent_color = "#f37329"; + } + + private void update_color (GLib.Variant color) { + Gdk.RGBA rgba = {0, 0, 0, 1}; + color.get ("(ddd)", out rgba.red, out rgba.green, out rgba.blue); + + accent_color = rgba.to_string (); + } + private void setup_prefers_color_scheme () { try { portal = Portal.Settings.get (); From ba364a8335ae5965f42186268bc7e890debc7c64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 20 Mar 2024 10:04:40 -0700 Subject: [PATCH 2/8] Fix fallback --- lib/Widgets/Settings.vala | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index 307f24415..6cc684a5d 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -135,11 +135,11 @@ namespace Granite { return; } catch (Error e) { - critical (e.message); + debug (e.message); } // Set a default in case we can't get from system - accent_color = "#f37329"; + accent_color = "#3689e6"; } private void update_color (GLib.Variant color) { From cb4ec6e3963432b98351974f40bfe341d77a2fb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 20 Mar 2024 10:05:43 -0700 Subject: [PATCH 3/8] fix bad indentation --- lib/Widgets/Settings.vala | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index 6cc684a5d..e860b88a8 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -142,12 +142,12 @@ namespace Granite { accent_color = "#3689e6"; } - private void update_color (GLib.Variant color) { - Gdk.RGBA rgba = {0, 0, 0, 1}; - color.get ("(ddd)", out rgba.red, out rgba.green, out rgba.blue); + private void update_color (GLib.Variant color) { + Gdk.RGBA rgba = {0, 0, 0, 1}; + color.get ("(ddd)", out rgba.red, out rgba.green, out rgba.blue); - accent_color = rgba.to_string (); - } + accent_color = rgba.to_string (); + } private void setup_prefers_color_scheme () { try { From 4e728fdd22cc0b0c93ad1c1e14fa278a45551507 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 20 Mar 2024 11:07:38 -0700 Subject: [PATCH 4/8] convert double to float --- lib/Widgets/Settings.vala | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index e860b88a8..3cdb4d504 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -122,14 +122,11 @@ namespace Granite { "accent-color" ).get_variant (); - // When reading the variant it is itself packed into a variant - GLib.Variant color; - variant.get ("v", out color); - update_color (color); + update_color (variant); - portal.setting_changed.connect ((scheme, key, val) => { + portal.setting_changed.connect ((scheme, key, value) => { if (scheme == "org.freedesktop.appearance" && key == "accent-color") { - update_color (val); + update_color (value); } }); @@ -143,9 +140,10 @@ namespace Granite { } private void update_color (GLib.Variant color) { - Gdk.RGBA rgba = {0, 0, 0, 1}; - color.get ("(ddd)", out rgba.red, out rgba.green, out rgba.blue); + double red, green, blue; + color.get ("(ddd)", out red, out green, out blue); + Gdk.RGBA rgba = {(float) red, (float) green, (float) blue, 1}; accent_color = rgba.to_string (); } From b26c9cd3fffbd6844bed5bea322003f5b635ac7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 20 Mar 2024 12:04:38 -0700 Subject: [PATCH 5/8] Add since and bump GTK req --- lib/Widgets/Settings.vala | 2 ++ meson.build | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index 3cdb4d504..886e036db 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -40,7 +40,9 @@ namespace Granite { /** * The theme accent color chosen by the user + * @since 7.5.0 */ + [Version (since = "7.5.0")] public string accent_color { get { if (_accent_color == null) { diff --git a/meson.build b/meson.build index e5e5fd425..1058a89e7 100644 --- a/meson.build +++ b/meson.build @@ -49,7 +49,7 @@ libgranite_deps = [ gio_os_dep, dependency('glib-2.0', version: '>=' + glib_min_version), dependency('gobject-2.0', version: '>=' + glib_min_version), - dependency('gtk4', version: '>=4.4'), + dependency('gtk4', version: '>=4.12'), ] icons_dir = join_paths( From feaad3fa345d3bea70912e2302f72152f54877ac Mon Sep 17 00:00:00 2001 From: Ryo Nakano Date: Mon, 17 Jun 2024 03:06:51 +0900 Subject: [PATCH 6/8] Init: set accent color from portal feedback (#722) --- lib/Widgets/Settings.vala | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index 886e036db..eb2533a5b 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -124,29 +124,27 @@ namespace Granite { "accent-color" ).get_variant (); - update_color (variant); + accent_color = parse_color (variant); portal.setting_changed.connect ((scheme, key, value) => { if (scheme == "org.freedesktop.appearance" && key == "accent-color") { - update_color (value); + accent_color = parse_color (value); } }); - - return; } catch (Error e) { - debug (e.message); - } + warning (e.message); - // Set a default in case we can't get from system - accent_color = "#3689e6"; + // Set a default in case we can't get from system + accent_color = "#3689e6"; + } } - private void update_color (GLib.Variant color) { + private string parse_color (GLib.Variant color) { double red, green, blue; color.get ("(ddd)", out red, out green, out blue); Gdk.RGBA rgba = {(float) red, (float) green, (float) blue, 1}; - accent_color = rgba.to_string (); + return rgba.to_string (); } private void setup_prefers_color_scheme () { From 8d0a33f621e632a8ae58153cad5fd2fcfa6d0a67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Fri, 21 Jun 2024 14:23:16 -0700 Subject: [PATCH 7/8] Use RGBA --- demo/GraniteDemo.vala | 1 + lib/Init.vala | 6 +++--- lib/Widgets/Settings.vala | 15 ++++++++------- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/demo/GraniteDemo.vala b/demo/GraniteDemo.vala index 9e4d8d305..7abc01ef2 100644 --- a/demo/GraniteDemo.vala +++ b/demo/GraniteDemo.vala @@ -11,6 +11,7 @@ public class Granite.Demo : Gtk.Application { public override void startup () { Granite.init (); + base.startup (); } diff --git a/lib/Init.vala b/lib/Init.vala index ec821e25d..8cafe7c91 100644 --- a/lib/Init.vala +++ b/lib/Init.vala @@ -44,11 +44,11 @@ namespace Granite { var granite_settings = Granite.Settings.get_default (); granite_settings.notify["accent-color"].connect (() => { - set_accent_for_display (display, granite_settings.accent_color); + set_accent_for_display (display, granite_settings.accent_color.to_string ()); }); set_provider_for_display (display, gtk_settings.gtk_application_prefer_dark_theme); - set_accent_for_display (display, granite_settings.accent_color); + set_accent_for_display (display, granite_settings.accent_color.to_string ()); var icon_theme = Gtk.IconTheme.get_for_display (display); icon_theme.add_resource_path ("/io/elementary/granite"); @@ -61,7 +61,7 @@ namespace Granite { Gtk.StyleContext.remove_provider_for_display (display, accent_provider); accent_provider.load_from_string ("@define-color accent_color %s;".printf (accent_color)); - Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME); + Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); } private static void set_provider_for_display (Gdk.Display display, bool prefer_dark_style) { diff --git a/lib/Widgets/Settings.vala b/lib/Widgets/Settings.vala index eb2533a5b..78a271989 100644 --- a/lib/Widgets/Settings.vala +++ b/lib/Widgets/Settings.vala @@ -36,14 +36,14 @@ namespace Granite { LIGHT } - private string? _accent_color = null; + private Gdk.RGBA? _accent_color = null; /** * The theme accent color chosen by the user - * @since 7.5.0 + * @since 7.6.0 */ - [Version (since = "7.5.0")] - public string accent_color { + [Version (since = "7.6.0")] + public Gdk.RGBA accent_color { get { if (_accent_color == null) { setup_accent_color (); @@ -135,16 +135,17 @@ namespace Granite { warning (e.message); // Set a default in case we can't get from system - accent_color = "#3689e6"; + accent_color.parse ("#3689e6"); } } - private string parse_color (GLib.Variant color) { + private Gdk.RGBA parse_color (GLib.Variant color) { double red, green, blue; color.get ("(ddd)", out red, out green, out blue); Gdk.RGBA rgba = {(float) red, (float) green, (float) blue, 1}; - return rgba.to_string (); + + return rgba; } private void setup_prefers_color_scheme () { From a42d5cc02b2960ff455f80fb5e02ab03f88005cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Fri, 21 Jun 2024 14:29:19 -0700 Subject: [PATCH 8/8] priority Application - 1 --- demo/GraniteDemo.vala | 1 + lib/Init.vala | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/demo/GraniteDemo.vala b/demo/GraniteDemo.vala index 7abc01ef2..9d47d3087 100644 --- a/demo/GraniteDemo.vala +++ b/demo/GraniteDemo.vala @@ -96,6 +96,7 @@ public class Granite.Demo : Gtk.Application { }; var granite_settings = Granite.Settings.get_default (); + gtk_settings.gtk_theme_name = "io.elementary.stylesheet.blueberry"; gtk_settings.gtk_application_prefer_dark_theme = granite_settings.prefers_color_scheme == Granite.Settings.ColorScheme.DARK; window.child = paned; diff --git a/lib/Init.vala b/lib/Init.vala index 8cafe7c91..b4839adb9 100644 --- a/lib/Init.vala +++ b/lib/Init.vala @@ -61,7 +61,7 @@ namespace Granite { Gtk.StyleContext.remove_provider_for_display (display, accent_provider); accent_provider.load_from_string ("@define-color accent_color %s;".printf (accent_color)); - Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); + Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION - 1); } private static void set_provider_for_display (Gdk.Display display, bool prefer_dark_style) {