Color scheme-aware text color on taskbar

Automatically uses text with dark color when theme prefers light color, or user uses light-style extension. Both light and dark color of text are user configurable. Resolves: #1978
home-sweet-gnome · Jan 2, 2025 · 682288a · 682288a
1 parent a6653f6
commit 682288a
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 2 deletions.
diff --git a/appIcons.js b/appIcons.js
@@ -252,7 +252,9 @@ export const TaskbarAppIcon = GObject.registerClass({
             SETTINGS.connect('changed::group-apps-label-font-size', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-label-font-weight', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-label-font-color', this._updateWindowTitleStyle.bind(this)),
+            SETTINGS.connect('changed::group-apps-label-font-color-on-light', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-label-font-color-minimized', this._updateWindowTitleStyle.bind(this)),
+            SETTINGS.connect('changed::group-apps-label-font-color-minimized-on-light', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-label-max-width', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-use-fixed-width', this._updateWindowTitleStyle.bind(this)),
             SETTINGS.connect('changed::group-apps-underline-unfocused', this._settingsChangeRefresh.bind(this))
@@ -538,14 +540,40 @@ export const TaskbarAppIcon = GObject.registerClass({
         this._displayProperIndicator();
     }
 
+    _colorStyleVariant() {
+        const {colorScheme} = St.Settings.get();
+        switch (Main.sessionMode.colorScheme) {
+            case 'force-dark':
+                return 'dark';
+            case 'force-light':
+                return 'light';
+            case 'prefer-dark':
+                return colorScheme === St.SystemColorScheme.PREFER_LIGHT
+                    ? 'light' : 'dark';
+            case 'prefer-light':
+                return colorScheme === St.SystemColorScheme.PREFER_DARK
+                    ? 'dark' : 'light';
+            default:
+                return '';
+        }
+    }
+
     _updateWindowTitleStyle() {
         if (this._windowTitle) {
             let useFixedWidth = SETTINGS.get_boolean('group-apps-use-fixed-width');
             let fontWeight = SETTINGS.get_string('group-apps-label-font-weight');
             let fontScale = DESKTOPSETTINGS.get_double('text-scaling-factor');
+            let colorStyleVariant = this._colorStyleVariant();
+            if (colorStyleVariant === 'dark') {
+                // settings without suffix is considered to have dark values
+                // to maintain compatibility before were color style-aware
+                colorStyleVariant = '';
+            } else {
+                colorStyleVariant = `-on-${colorStyleVariant}`;
+            }
             let fontColor = this.window.minimized ?
-                            SETTINGS.get_string('group-apps-label-font-color-minimized') :
-                            SETTINGS.get_string('group-apps-label-font-color');
+                            SETTINGS.get_string(`group-apps-label-font-color-minimized${colorStyleVariant}`) :
+                            SETTINGS.get_string(`group-apps-label-font-color${colorStyleVariant}`);
             let scaleFactor = Utils.getScaleFactor();
             let maxLabelWidth = SETTINGS.get_int('group-apps-label-max-width') * scaleFactor;
             let variableWidth = !useFixedWidth || this.dtpPanel.checkIfVertical() || this.dtpPanel.taskbar.fullScrollView;

diff --git a/media/sources/D2P_import settings/Artist_design b/media/sources/D2P_import settings/Artist_design
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=1.0
 leftbox-size=0
 show-showdesktop-button=true
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=true

diff --git a/media/sources/D2P_import settings/Fortnite_Brite gunner b/media/sources/D2P_import settings/Fortnite_Brite gunner
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=0.0
 leftbox-size=0
 show-showdesktop-button=true
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=true

diff --git a/media/sources/D2P_import settings/Galaxy_bizouneur b/media/sources/D2P_import settings/Galaxy_bizouneur
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=0.0
 leftbox-size=0
 show-showdesktop-button=true
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=true

diff --git a/media/sources/D2P_import settings/Ghibli_student b/media/sources/D2P_import settings/Ghibli_student
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=0.0
 leftbox-size=0
 show-showdesktop-button=false
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=false

diff --git a/media/sources/D2P_import settings/Mountain_intellihide b/media/sources/D2P_import settings/Mountain_intellihide
@@ -1,6 +1,8 @@
 [/]
 group-apps-label-font-color='#dddddd'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#dddddd'
+group-apps-label-font-color-minimized-on-light='#282828'
 tray-padding=-1
 trans-min-panel-opacity=0.32000000000000001
 enter-peek-mode-timeout=500

diff --git a/media/sources/D2P_import settings/Plants_Solitaire b/media/sources/D2P_import settings/Plants_Solitaire
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=0.0
 leftbox-size=0
 show-showdesktop-button=true
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=true

diff --git a/media/sources/D2P_import settings/Star Wars_gamer b/media/sources/D2P_import settings/Star Wars_gamer
@@ -29,7 +29,9 @@ trans-gradient-top-opacity=0.90000000000000002
 leftbox-size=0
 show-showdesktop-button=true
 group-apps-label-font-color='#ffffff'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#ffffff'
+group-apps-label-font-color-minimized-on-light='#282828'
 intellihide-behaviour='FOCUSED_WINDOWS'
 show-favorites=true
 group-apps=true

diff --git a/media/sources/D2P_import settings/Wolf_programmer b/media/sources/D2P_import settings/Wolf_programmer
@@ -1,6 +1,8 @@
 [/]
 group-apps-label-font-color='#dddddd'
+group-apps-label-font-color-on-light='#282828'
 group-apps-label-font-color-minimized='#dddddd'
+group-apps-label-font-color-minimized-on-light='#282828'
 tray-padding=-1
 trans-min-panel-opacity=0.32000000000000001
 enter-peek-mode-timeout=500

diff --git a/prefs.js b/prefs.js
@@ -1614,13 +1614,27 @@ const Preferences = class {
             this._settings.set_string('group-apps-label-font-color', hexString);
         });
 
+        this._builder.get_object('group_apps_label_font_color_on_light_colorbutton').connect('color-set',  (button) => {
+            let rgba = button.get_rgba();
+            let css = rgba.to_string();
+            let hexString = cssHexString(css);
+            this._settings.set_string('group-apps-label-font-color-on-light', hexString);
+        });
+
         this._builder.get_object('group_apps_label_font_color_minimized_colorbutton').connect('color-set',  (button) => {
             let rgba = button.get_rgba();
             let css = rgba.to_string();
             let hexString = cssHexString(css);
             this._settings.set_string('group-apps-label-font-color-minimized', hexString);
         });
 
+        this._builder.get_object('group_apps_label_font_color_minimized_on_light_colorbutton').connect('color-set',  (button) => {
+            let rgba = button.get_rgba();
+            let css = rgba.to_string();
+            let hexString = cssHexString(css);
+            this._settings.set_string('group-apps-label-font-color-minimized-on', hexString);
+        });
+
         this._settings.bind('group-apps-use-fixed-width',
                             this._builder.get_object('group_apps_use_fixed_width_switch'),
                             'active',
@@ -1653,11 +1667,21 @@ const Preferences = class {
                 rgba.parse(this._settings.get_string('group-apps-label-font-color'));
                 this._builder.get_object('group_apps_label_font_color_colorbutton').set_rgba(rgba);
 
+                this._settings.set_value('group-apps-label-font-color-on-light', this._settings.get_default_value('group-apps-label-font-color-on-light'));
+                let rgbaOnLight = new Gdk.RGBA();
+                rgbaOnLight.parse(this._settings.get_string('group-apps-label-font-color-on-light'));
+                this._builder.get_object('group_apps_label_font_color_on_light_colorbutton').set_rgba(rgbaOnLight);
+
                 this._settings.set_value('group-apps-label-font-color-minimized', this._settings.get_default_value('group-apps-label-font-color-minimized'));
                 let minimizedFontColor = new Gdk.RGBA();
                 minimizedFontColor.parse(this._settings.get_string('group-apps-label-font-color-minimized'));
                 this._builder.get_object('group_apps_label_font_color_minimized_colorbutton').set_rgba(minimizedFontColor);
 
+                this._settings.set_value('group-apps-label-font-color-minimized-on-light', this._settings.get_default_value('group-apps-label-font-color-minimized-on-light'));
+                let minimizedOnLightFontColor = new Gdk.RGBA();
+                minimizedOnLightFontColor.parse(this._settings.get_string('group-apps-label-font-color-minimized-on-light'));
+                this._builder.get_object('group_apps_label_font_color_minimized_on_light_colorbutton').set_rgba(minimizedOnLightFontColor);
+
                 this._settings.set_value('group-apps-label-max-width', this._settings.get_default_value('group-apps-label-max-width'));
                 this._builder.get_object('group_apps_label_max_width_spinbutton').set_value(this._settings.get_int('group-apps-label-max-width'));
 
@@ -1682,12 +1706,24 @@ const Preferences = class {
                 this._builder.get_object('group_apps_label_font_color_colorbutton').set_rgba(rgba);
             }).apply(this);
 
+            (function() {
+                let rgba = new Gdk.RGBA();
+                rgba.parse(this._settings.get_string('group-apps-label-font-color-on-light'));
+                this._builder.get_object('group_apps_label_font_color_on_light_colorbutton').set_rgba(rgba);
+            }).apply(this);
+
             (function() {
                 let rgba = new Gdk.RGBA();
                 rgba.parse(this._settings.get_string('group-apps-label-font-color-minimized'));
                 this._builder.get_object('group_apps_label_font_color_minimized_colorbutton').set_rgba(rgba);
             }).apply(this);
 
+            (function() {
+                let rgba = new Gdk.RGBA();
+                rgba.parse(this._settings.get_string('group-apps-label-font-color-minimized-on-light'));
+                this._builder.get_object('group_apps_label_font_color_minimized_on_light_colorbutton').set_rgba(rgba);
+            }).apply(this);
+
             this._builder.get_object('group_apps_label_max_width_spinbutton').set_value(this._settings.get_int('group-apps-label-max-width'));
             this._builder.get_object('group_apps_label_max_width_spinbutton').connect('value-changed', (widget) => {
                 this._settings.set_int('group-apps-label-max-width', widget.get_value());

diff --git a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
@@ -583,11 +583,21 @@
       <summary>Application title font color</summary>
       <description>When the applications are ungrouped, this defines the application titles font color.</description>
     </key>
+    <key type="s" name="group-apps-label-font-color-on-light">
+      <default>"#282828"</default>
+      <summary>Application title font color on light color scheme</summary>
+      <description>When the applications are ungrouped, this defines the application titles font color on light color scheme.</description>
+    </key>
     <key type="s" name="group-apps-label-font-color-minimized">
       <default>"#dddddd"</default>
       <summary>Minimized application title font color</summary>
       <description>When the applications are ungrouped, this defines the titles font color for minimized applications.</description>
     </key>
+    <key type="s" name="group-apps-label-font-color-minimized-on-light">
+      <default>"#282828"</default>
+      <summary>Minimized application title font color on light color scheme</summary>
+      <description>When the applications are ungrouped, this defines the titles font color for minimized applications on light color scheme.</description>
+    </key>
     <key type="i" name="group-apps-label-max-width">
       <default>160</default>
       <summary>Application title max width</summary>

diff --git a/ui/BoxGroupAppsOptions.ui b/ui/BoxGroupAppsOptions.ui
@@ -72,6 +72,18 @@
           </object>
         </child>
 
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Font color of the application titles on light color scheme</property>
+            <child>
+              <object class="GtkColorButton" id="group_apps_label_font_color_on_light_colorbutton">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
         <child>
           <object class="AdwActionRow">
             <property name="title" translatable="yes">Font color of the minimized application titles</property>
@@ -84,6 +96,18 @@
           </object>
         </child>
 
+        <child>
+          <object class="AdwActionRow">
+            <property name="title" translatable="yes">Font color of the minimized application titles on light color scheme</property>
+            <child>
+              <object class="GtkColorButton" id="group_apps_label_font_color_minimized_on_light_colorbutton">
+                <property name="receives_default">True</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+          </object>
+        </child>
+
       </object>
     </child>