Add option to color text only in the colored temperature stat tile. G…

…H-243

changelog.md

@@ -940,3 +940,4 @@ index 465d4ad..aa8bad6 100644
 
 - Fixed gauge label decoding. GH-271
 - Add Moon phases and planet name translations GH-264
+- Added option to only color the text in the colored temperatur stat tile GH-243

skins/weewx-wdc/includes/html-head.inc

@@ -90,6 +90,7 @@
     color_temperature_transparency: $DisplayOptions.get("outTemp_stat_tile_color_transparency", "0.5"),
     color_temperature_min: $DisplayOptions.get("outTemp_stat_tile_color_min", "-20"),
     color_temperature_max: $DisplayOptions.get("outTemp_stat_tile_color_max", "40"),
+    color_temperature_text_only: $to_int($to_bool($DisplayOptions.get("outTemp_stat_tile_color_text_only", "False"))),
   };
 </script>
 

skins/weewx-wdc/skin.conf

@@ -152,6 +152,7 @@ SKIN_VERSION = 3.5.1
     # Color the outTemp stat tile based on the temperature. Only available for alternative layout.
     outTemp_stat_tile_color = False
     outTemp_stat_tile_color_transparency = 0.35
+    outTemp_stat_tile_color_text_only = False
     outTemp_stat_tile_color_min = -20
     outTemp_stat_tile_color_max = 40
 

skins/weewx-wdc/src/js/colored-temperature.ts

@@ -2,6 +2,7 @@ const transperancy = (window as any).weewxWdcConfig
   .color_temperature_transparency;
 const min = (window as any).weewxWdcConfig.color_temperature_min;
 const max = (window as any).weewxWdcConfig.color_temperature_max;
+const textOnly = (window as any).weewxWdcConfig.color_temperature_text_only;
 
 // outTemp tile.
 const outTempTile = document.querySelector(
@@ -92,7 +93,13 @@ const setColor = (outTempTile: HTMLDivElement): void => {
   );
 
   const outTempColor = getTemperatureColorRGB(outTemp);
-  outTempTile.style.backgroundColor = outTempColor;
+
+  if (textOnly) {
+    (outTempTile.querySelector("span.raw") as HTMLSpanElement).style.color =
+      outTempColor;
+  } else {
+    outTempTile.style.backgroundColor = outTempColor;
+  }
 };
 
 // Set color for outTemp tile on load.