Unify tag row default color styles and use CSS variables

Author: lainsce

data/style.css

@@ -13,6 +13,7 @@
     --purple: #ba68c8;
     --pink: #f06292;
     --brown: #bcaaa4;
+    --default: #e3e2e8;
 
     --app-bg: #f9f5f4;
     --dialog-bg: #f5f1f0;
@@ -477,6 +478,16 @@ popover flowbox button.flat,
 }
 
 /* --- Tag Row Color Classes --- */
+.tag-row-default:selected {
+    background: alpha(var(--default), 0.2);
+}
+.tag-row-default:hover {
+    background: alpha(var(--default), 0.14);
+}
+.tag-row-default:active {
+    background: alpha(var(--default), 0.16);
+}
+
 .tag-row-red:selected {
     background: alpha(var(--red), 0.15);
 }
@@ -597,17 +608,6 @@ popover flowbox button.flat,
     background: alpha(var(--brown), 0.14);
 }
 
-/* Default fallback */
-.tag-row-default:selected {
-    background: #f3f2f8;
-}
-.tag-row-default:hover {
-    background: #f3f2f8;
-}
-.tag-row-default:active {
-    background: #f3f2f8;
-}
-
 /* --- Tag Chip Styles --- */
 .tag-chip {
     padding: 2px 10px;

data/style_dark.css

@@ -13,6 +13,7 @@
     --purple: #ab47bc; /* saturated purple */
     --pink: #ec407a; /* lively pink */
     --brown: #a1887f; /* muted brown for dark mode */
+    --default: #333238;
 
     /* Dark surfaces & text */
     --app-bg: #121315;
@@ -178,6 +179,16 @@ window,
 }
 
 /* --- Tag Row Color Classes --- */
+.tag-row-default:selected {
+    background: alpha(var(--default), 0.2);
+}
+.tag-row-default:hover {
+    background: alpha(var(--default), 0.14);
+}
+.tag-row-default:active {
+    background: alpha(var(--default), 0.16);
+}
+
 .tag-row-red:selected {
     background: alpha(var(--red), 0.15);
 }
@@ -297,14 +308,3 @@ window,
 .tag-row-brown:active {
     background: alpha(var(--brown), 0.14);
 }
-
-/* Default fallback */
-.tag-row-default:selected {
-    background: alpha(var(--text-secondary), 0.15);
-}
-.tag-row-default:hover {
-    background: alpha(var(--text-secondary), 0.08);
-}
-.tag-row-default:active {
-    background: alpha(var(--text-secondary), 0.14);
-}

src/Application.vala

@@ -84,6 +84,8 @@ namespace Notejot {
 
             // React to dark-mode changes
             this.app_css_provider = new Gtk.CssProvider ();
+            Gtk.StyleContext.add_provider_for_display (Gdk.Display.get_default (), app_css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+            load_theme_css ();
             var gsettings = Gtk.Settings.get_default ();
             if (gsettings != null) {
                 gsettings.notify["gtk-application-prefer-dark-theme"].connect (() => {