text and icon color contrast

idaho · Apr 2, 2024 · 9b8028c · 9b8028c
1 parent 0189bbf
commit 9b8028c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/src/cards/trash-card/items/card.ts b/src/cards/trash-card/items/card.ts
@@ -27,7 +27,7 @@ class ItemCard extends BaseItemElement {
     const { label } = item;
 
     const style = {
-      ...getColoredStyle(color_mode, item)
+      ...getColoredStyle(color_mode, item, this.hass.themes.darkMode)
     };
 
     const secondary = getDateString(item, hide_time_range ?? false, day_style, day_style_format, this.hass);

diff --git a/src/cards/trash-card/items/chip.ts b/src/cards/trash-card/items/chip.ts
@@ -24,7 +24,7 @@ class ItemChip extends BaseItemElement {
     const { color_mode, hide_time_range, day_style, day_style_format, with_label } = this.config;
 
     const style = {
-      ...getColoredStyle(color_mode, item),
+      ...getColoredStyle(color_mode, item, this.hass.themes.darkMode),
       // eslint-disable-next-line @typescript-eslint/naming-convention
       ...with_label ? { '--chip-height': 'calc(36px * 1.15)' } : {}
     };

diff --git a/src/cards/trash-card/items/icon.ts b/src/cards/trash-card/items/icon.ts
@@ -22,7 +22,7 @@ class IconCard extends BaseItemElement<{ nextEvent: boolean }> {
     const rtl = computeRTL(this.hass);
 
     const style = {
-      ...getColoredStyle([ 'icon', 'background' ], item),
+      ...getColoredStyle([ 'icon', 'background' ], item, this.hass.themes.darkMode, false),
       // eslint-disable-next-line @typescript-eslint/naming-convention
       '--trash-card-icon-size': `${this.config.icon_size ?? 40}px`
     };

diff --git a/src/utils/getColoredStyle.ts b/src/utils/getColoredStyle.ts
@@ -6,14 +6,20 @@ import type { TrashCardConfig } from '../cards/trash-card/trash-card-config';
 const isColorModesArray = (modes: TrashCardConfig['color_mode'] | TrashCardConfig['color_mode'][]): modes is TrashCardConfig['color_mode'][] =>
   Boolean(modes && Array.isArray(modes));
 
-const getColoredStyle = (modes: TrashCardConfig['color_mode'] | TrashCardConfig['color_mode'][], item: CalendarItem) => {
+const getColoredStyle = (modes: TrashCardConfig['color_mode'] | TrashCardConfig['color_mode'][], item: CalendarItem, darkMode = false, overrideIconColorContrast = true) => {
   const color = item.color ?? 'disabled';
 
   const colorModes: TrashCardConfig['color_mode'][] = isColorModesArray(modes) ? modes : [ modes ?? 'background' ];
 
   const style = {};
   const rgbColor = getRgbColor(color);
 
+  const override = colorModes.includes('background') && ((!darkMode && color === 'black') || (darkMode && color === 'white'));
+
+  const overrideColor = color === 'black' ?
+    `rgba(255, 255, 255, .7)` :
+    `rgba(0, 0, 0, .7)`;
+
   if (colorModes.includes('icon')) {
     style['--trash-card-icon-color'] = `rgba(${rgbColor})`;
   }
@@ -22,6 +28,17 @@ const getColoredStyle = (modes: TrashCardConfig['color_mode'] | TrashCardConfig[
     style['--trash-card-background'] = `rgba(${rgbColor}, .7)`;
   }
 
+  if (override) {
+    style['--text-color'] = overrideColor;
+    style['--card-primary-color'] = overrideColor;
+    style['--card-secondary-color'] = overrideColor;
+    style['--primary-text-color'] = overrideColor;
+  }
+
+  if (override && overrideIconColorContrast) {
+    style['--trash-card-icon-color'] = overrideColor;
+  }
+
   return style;
 };