Allow customization of foreground colors

.gitignore

@@ -6,3 +6,4 @@ cypress/videos/
 cypress/screenshots/
 .nyc_output/
 coverage/
+stats.html

README.md

@@ -122,7 +122,19 @@ label_spacing: |
 ## Color Options
 
 `colors` is specified as an object containing one or more of the keys listed below and values that are valid CSS
-colors. Invalid color values will be discarded and will trigger a warning.
+colors or objects of foreground and/or background valid CSS colors. Invalid color values will be discarded and will
+trigger a warning.
+
+### Color value format
+
+Colors may be specified as a valid CSS color string or as an object with one or more of the following fields, each
+containing a valid CSS color string:
+
+- `foreground`: The color of the condition label text or icon
+- `background`: The color of the bar background during that span
+
+If color is specified as a plain string, it will be used for background. Foreground color defaults to the primary text
+color in your Home Assistant theme.
 
 Some conditions will default to whatever the value is of some other condition. For example, `fog` will default to
 whatever `cloudy` is.
@@ -152,6 +164,9 @@ colors:
   sunny: '#bbccee' # note that hex colors must be quoted
   snowy-rainy: rgba(255, 255, 255, 0.8) # rgba works (and hsla too)
   exceptional: red # as do valid CSS color names
+  windy:
+    background: lightgray
+    foreground: '#000'
 ```
 
 ### Wind Options

cypress/e2e/config.cy.ts

@@ -98,8 +98,22 @@ describe('Config', () => {
         partlycloudy: 'rgb(0, 255, 0, 0, 0)', // too many params
         sunny: 'foo(240, 100%, 50%)', // wrong function
         "clear-night": 'blahblah', // invalid color name
-        // @ts-expect-error This is a test, so we're intentionally passing the wrong thing
-        foobar: 'rgb(0, 255, 0)' // invalid condition
+        foobar: 'rgb(0, 255, 0)', // invalid condition
+        windy: {}, // empty object
+        rainy: {
+          // @ts-expect-error This is a test, so we're intentionally passing the wrong thing
+          blah: 'blue'
+        },
+        fog: {
+          background: 'blahblah' // invalid color name
+        },
+        exceptional: {
+          foreground: '#12345678' // too many digits
+        },
+        hail: {
+          background: 'foo(240, 100%, 50%)', // wrong function
+          foreground: 'rgb(0, 255, 0, 0)' // too many params
+        }
       }
     });
     cy.get('hui-warning')
@@ -108,11 +122,16 @@ describe('Config', () => {
       .should('have.length', 1)
       .its(0)
       .its('textContent')
-      .should('contain', 'cloudy: #FF000011')
-      .and('contain', 'partlycloudy: rgb(0, 255, 0, 0, 0)')
-      .and('contain', 'sunny: foo(240, 100%, 50%)')
-      .and('contain', 'clear-night: blahblah')
-      .and('contain', 'foobar: rgb(0, 255, 0)');
+      .should('contain', 'cloudy: "#FF000011"')
+      .and('contain', 'partlycloudy: "rgb(0, 255, 0, 0, 0)"')
+      .and('contain', 'sunny: "foo(240, 100%, 50%)"')
+      .and('contain', 'clear-night: "blahblah"')
+      .and('contain', 'foobar: "rgb(0, 255, 0)"')
+      .and('contain', 'windy: {}')
+      .and('contain', 'rainy: {\n  "blah": "blue"\n}')
+      .and('contain', 'fog: {\n  "background": "blahblah"\n}')
+      .and('contain', 'exceptional: {\n  "foreground": "#12345678"\n}')
+      .and('contain', 'hail: {\n  "background": "foo(240, 100%, 50%)",\n  "foreground": "rgb(0, 255, 0, 0)"\n}');
   });
   describe('Templates', () => {
     it('supports templated name', () => {

cypress/e2e/weather-bar.cy.ts

@@ -89,6 +89,39 @@ describe('Weather bar', () => {
         expect(cs.backgroundColor).to.eq(expectedCustomColors[i]);
       });
   });
+
+  const expectedCustomObjectColors = [
+    { bg: 'rgb(18, 52, 86)', fg: 'rgb(0, 0, 0)' },
+    { bg: 'rgb(179, 219, 255)', fg: 'rgb(123, 45, 6)' },
+    { bg: 'rgb(0, 255, 0)', fg: 'rgb(255, 0, 255)' },
+    { bg: 'rgb(50, 205, 50)', fg: 'rgb(0, 0, 0)' }
+  ];
+
+  it('uses custom colors when specified as color objects', () => {
+    cy.configure({
+      colors: {
+        cloudy: {
+          background: '#123456'
+        },
+        partlycloudy: {
+          foreground: 'rgb(123, 45, 6)'
+        },
+        sunny: {
+          background: 'hsl(120, 100%, 50%)',
+          foreground: 'magenta'
+        },
+        "clear-night": 'limegreen'
+      }
+    });
+    cy.get('weather-bar')
+      .shadow()
+      .find('div.bar > div')
+      .each((el, i) => {
+        const cs = window.getComputedStyle(el.get(0));
+        expect(cs.backgroundColor).to.eq(expectedCustomObjectColors[i].bg);
+        expect(cs.color).to.eq(expectedCustomObjectColors[i].fg);
+      });
+  });
   describe('Labels', () => {
     it('shows text descriptions on condition blocks', () => {
       cy.get('weather-bar')