Make the brightness for alternating rows a theme variable.

rpbouman · Feb 5, 2025 · 7fc06db · 7fc06db
1 parent 73e3a9f
commit 7fc06db
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/src/PivotTableUi/PivotTableUiHighlighting.css b/src/PivotTableUi/PivotTableUiHighlighting.css
@@ -9,7 +9,7 @@
         /* https://github.com/rpbouman/huey/issues/431: alternating row colors */
         > .pivotTableUiRow:nth-child(even){
           > .pivotTableUiCell {
-            filter: brightness(99%);
+            filter: brightness( var( --huey-alternating-rows-brightness ) );
           }
         }
 

diff --git a/src/SettingsDialog/SettingsDialog.js b/src/SettingsDialog/SettingsDialog.js
@@ -168,6 +168,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "rgb(255,255,255)",
               "--huey-medium-background-color": "rgb(245,245,245)",
               "--huey-dark-background-color": "rgb(210,210,210)",
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "99%",
               "--huey-light-border-color": "rgb(222,222,222)",
               "--huey-dark-border-color": "rgb(175,175,175)",
               "--huey-darkest-border-color": "rgb(100,100,100)",
@@ -187,6 +189,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "rgb(240,248,255)", // Alice Blue
               "--huey-medium-background-color": "rgb(224,255,255)", // Light Cyan
               "--huey-dark-background-color": "rgb(175,238,238)", // Pale Turquoise
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "99%",
               "--huey-light-border-color": "rgb(176,224,230)", // Powder Blue
               "--huey-dark-border-color": "rgb(135,206,250)", // Light Sky Blue
               "--huey-darkest-border-color": "rgb(30,144,255)",
@@ -206,6 +210,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "rgb(245,245,255)", // Lavender
               "--huey-medium-background-color": "rgb(230,230,250)", // Lavender Blue
               "--huey-dark-background-color": "rgb(173,216,230)", // Light Blue
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "99%",
               "--huey-light-border-color": "rgb(200,220,240)", // Light Sky Blue
               "--huey-dark-border-color": "rgb(135,206,235)", // Sky Blue
               "--huey-darkest-border-color": "rgb(70,130,180)",
@@ -225,6 +231,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "#F0E68C",
               "--huey-medium-background-color": "#A7D3A4",
               "--huey-dark-background-color": "#5B8266",
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "80%",
               "--huey-light-border-color": "#A5B479",
               "--huey-dark-border-color": "#334D56",
               "--huey-darkest-border-color": "#000000",
@@ -244,6 +252,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "#D5D5D5",
               "--huey-medium-background-color": "#D2B48C",
               "--huey-dark-background-color": "#008080",
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "80%",
               "--huey-light-border-color": "#8B4513",
               "--huey-dark-border-color": "#2F4F4F",
               "--huey-darkest-border-color": "black",
@@ -263,6 +273,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "rgb(182,187,229)",
               "--huey-medium-background-color": "rgb(108,115,183)",
               "--huey-dark-background-color": "rgb(67,71,119)",
+              "--huey-highlight-background-color": "rgb(232, 244, 248)",
+              "--huey-alternating-rows-brightness": "80%",
               "--huey-light-border-color": "rgb(99,46,64)",
               "--huey-dark-border-color": "rgb(42,34,55)",
               "--huey-darkest-border-color": "rgb(36,36,74)",
@@ -282,6 +294,8 @@ class Settings extends EventEmitter {
               "--huey-light-background-color": "rgb(30, 30, 30)",
               "--huey-medium-background-color": "rgb(50, 50, 50)",
               "--huey-dark-background-color": "rgb(110 110, 110)",
+              "--huey-highlight-background-color": "rgb(100, 100, 100)",
+              "--huey-alternating-rows-brightness": "80%",
               "--huey-light-border-color": "rgb(80, 80, 80)",
               "--huey-dark-border-color": "rgb(110, 110, 110)",
               "--huey-darkest-border-color": "rgb(220, 220, 220)",
@@ -301,6 +315,8 @@ class Settings extends EventEmitter {
           "--huey-light-background-color": "rgb(255,255,255)",
           "--huey-medium-background-color": "rgb(245,245,245)",
           "--huey-dark-background-color": "rgb(210,210,210)",
+          "--huey-highlight-background-color": "rgb(232, 244, 248)",
+          "--huey-alternating-rows-brightness": "99%",
           "--huey-light-border-color": "rgb(222,222,222)",
           "--huey-dark-border-color": "rgb(175,175,175)",
           "--huey-darkest-border-color": "rgb(100,100,100)",

diff --git a/src/Theme/General.css b/src/Theme/General.css
@@ -31,6 +31,8 @@ We keep this one around here for reference, but
   --huey-dark-background-color: rgb(210,210,210);
   --huey-highlight-background-color: rgb(232, 244, 248);
 
+  --huey-alternating-rows-brightness: 99%;
+
   /**
   * Huey border colors
   */