[BasicUI] Adjust user-defined colors to theme for better contrast

Closes #1780 Colors are those defined by user through the labelcolor, valuecolor and iconcolor parameters. The aim is to provide a good contrast n both themes. For example white in light theme just leads to something not visible. So black is used instead. This behaviour is already implemented in the Android app with the same adjustments. Colors adjusted in light theme: yellow, pink, white, lime, aqua, silver and gold. Colors adjusted in dark theme: maroon, purple, green, navy, blue, black and gold. These color adjustments are controlled by a new Basic UI setting, enabled by default. By disabling it, no adjustment is performed and the old behaviour is restored. Signed-oof-by: Laurent Garnier <lg.hc@free.fr>
openhab · Apr 5, 2024 · eb18092 · eb18092
1 parent 730ab97
commit eb18092
Show file tree

Hide file tree

Showing 24 changed files with 203 additions and 116 deletions.
diff --git a/...b.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java b/...b.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/AbstractWidgetRenderer.java
@@ -72,9 +72,6 @@ public abstract class AbstractWidgetRenderer implements WidgetRenderer {
     private static final int DEFAULT_NB_COLUMNS_DESKTOP = 3;
     private static final int DEFAULT_NB_COLUMNS_TABLET = 2;
 
-    public static final String PRIMARY_COLOR = "#3f51b5";
-    public static final String SECONDARY_COLOR = "#ff4081";
-
     private final Logger logger = LoggerFactory.getLogger(AbstractWidgetRenderer.class);
 
     private final BundleContext bundleContext;
@@ -352,7 +349,6 @@ protected String escapeURL(@Nullable String string) {
      * @return The updated snippet
      */
     protected String processColor(Widget w, String originalSnippet) {
-        String style = "";
         String color = "";
         String snippet = originalSnippet;
 
@@ -366,41 +362,20 @@ protected String processColor(Widget w, String originalSnippet) {
             }
         }
 
-        color = itemUIRegistry.getLabelColor(w);
-        color = convertSpecialColors(color, itemState);
-
-        if (color != null) {
-            style = "style=\"color:" + color + "\"";
-        }
-        snippet = snippet.replace("%labelstyle%", style);
+        color = convertSpecialColors(itemUIRegistry.getLabelColor(w), itemState);
+        snippet = snippet.replace("%label_color%", color != null ? color : "");
 
-        style = "";
-        color = itemUIRegistry.getValueColor(w);
-        color = convertSpecialColors(color, itemState);
+        color = convertSpecialColors(itemUIRegistry.getValueColor(w), itemState);
+        snippet = snippet.replace("%value_color%", color != null ? color : "");
 
-        if (color != null) {
-            style = "style=\"color:" + color + "\"";
-        }
-        snippet = snippet.replace("%valuestyle%", style);
-
-        style = "";
-        color = itemUIRegistry.getIconColor(w);
-        color = convertSpecialColors(color, itemState);
-
-        if (color != null) {
-            style = "style=\"color:" + color + "\"";
-        }
-        snippet = snippet.replace("%iconstyle%", style);
+        color = convertSpecialColors(itemUIRegistry.getIconColor(w), itemState);
+        snippet = snippet.replace("%icon_color%", color != null ? color : "");
 
         return snippet;
     }
 
     private @Nullable String convertSpecialColors(@Nullable String color, @Nullable State itemState) {
-        if ("primary".equals(color)) {
-            return PRIMARY_COLOR;
-        } else if ("secondary".equals(color)) {
-            return SECONDARY_COLOR;
-        } else if ("itemValue".equals(color)) {
+        if ("itemValue".equals(color)) {
             return getRGBHexCodeFromItemState(itemState);
         }
         return color;

diff --git a/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/InputRenderer.java b/...rg.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/InputRenderer.java
@@ -136,11 +136,8 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         String prefix = getPrefix(w);
         boolean hasUnit = item instanceof NumberItem && (((NumberItem) item).getDimension() != null);
         String postfix = hasUnit ? "" : getPostfix(w);
-        String prefixSnippet = !prefix.isBlank()
-                ? "<span %valuestyle% class=\"mdl-form__input-prefix\">" + prefix + "</span>"
-                : "";
-        String postfixSnippet = !postfix.isBlank()
-                ? "<span %valuestyle% class=\"mdl-form__input-postfix\">" + postfix + "</span>"
+        String prefixSnippet = !prefix.isBlank() ? "<span class=\"mdl-form__input-prefix\">" + prefix + "</span>" : "";
+        String postfixSnippet = !postfix.isBlank() ? "<span class=\"mdl-form__input-postfix\">" + postfix + "</span>"
                 : "";
         snippet = snippet.replace("%prefix_snippet%", prefixSnippet);
         snippet = snippet.replace("%postfix_snippet%", postfixSnippet);
@@ -185,7 +182,7 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
             if (numberItem.getDimension() != null) {
                 unit = getUnit(w, numberItem);
                 if ("number".equals(inputHint)) {
-                    unitSnippet = "<span %valuestyle% class=\"mdl-form__input-unit\">" + unit + "</span>";
+                    unitSnippet = "<span class=\"mdl-form__input-unit\">" + unit + "</span>";
                 }
             }
         }

diff --git a/...org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java b/...org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java
@@ -113,8 +113,6 @@ public StringBuilder processPage(String id, String sitemap, String label, EList<
         snippet = snippet.replace("%icon_type%", ICON_TYPE);
         snippet = snippet.replace("%inline%", config.isInlineSvgEnabled() ? "true" : "false");
         snippet = snippet.replace("%sitemapquery%", String.format("?sitemap=%s", sitemap));
-        snippet = snippet.replace("%primarycolor%", PRIMARY_COLOR);
-        snippet = snippet.replace("%secondarycolor%", SECONDARY_COLOR);
 
         String[] parts = snippet.split("%children%");
 
@@ -300,6 +298,10 @@ public CharSequence renderSettings() throws RenderException {
                 localizeText("@text/ui.config.basic.biggerFontSize.description"), "biggerFontSize",
                 "openhab.ui.basic:biggerFontSize", "enabled", "disabled", false, sb);
 
+        renderSwitchSetting(localizeText("@text/ui.config.basic.adjustedColors.label"),
+                localizeText("@text/ui.config.basic.adjustedColors.description"), "adjustedColors",
+                "openhab.ui.basic:adjustedColors", "enabled", "disabled", true, sb);
+
         buttons = new StringBuilder();
         buildButton("1", "1", buttons);
         buildButton("2", "", buttons);

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties b/bundles/org.openhab.ui.basic/src/main/resources/OH-INF/i18n/basic.properties
@@ -1,3 +1,5 @@
+ui.config.basic.adjustedColors.label = Adjusted User Colors
+ui.config.basic.adjustedColors.description = Automatically adjusts user-defined colors (label, value, icon) to the current theme for better contrast.
 ui.config.basic.biggerFontSize.label = Bigger Font Size
 ui.config.basic.biggerFontSize.description = Displays texts in UI with a bigger font size than the default.
 ui.config.basic.capitalizeValues.label = Capitalize Values

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttongrid.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttongrid.html
@@ -6,6 +6,8 @@
 		data-ignore-state="true"
 		data-widget-id="%widget_id%"
 		data-header-row="%header_row%"
+		data-label-color="%label_color%"
+		data-icon-color="%icon_color%"
 	>
 		%buttons%
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/buttons.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
-	<span %valuestyle% class="mdl-form__value mdl-form__value--group">
+	<span class="mdl-form__value mdl-form__value--group">
 		%value%
 	</span>
 	<div
@@ -15,6 +15,9 @@
 		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		%buttons%
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/chart.html
@@ -1,8 +1,8 @@
 <div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
 	<div class="mdl-form__header">
@@ -44,6 +44,8 @@
 		data-ignore-refresh="%ignore_refresh%"
 		data-header-row="%header_row%"
 		data-legend="%legend%"
+		data-label-color="%label_color%"
+		data-icon-color="%icon_color%"
 	>
 		<img src="%url%" />
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/colorpicker.html
@@ -1,8 +1,8 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
 	<div
@@ -12,6 +12,8 @@
 		data-value="%state%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-icon-color="%icon_color%"
 	>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__colorpicker--up">
 			<!-- keyboard_arrow_up -->

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/group.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
-	<div %valuestyle% class="mdl-form__value">%value%</div>
+	<div class="mdl-form__value">%value%</div>
 	<div
 		class="mdl-form__control mdl-form__group"
 		data-control-type="group"
@@ -14,6 +14,9 @@
 		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		<!-- chevron_right -->
 		<i class="material-icons">&#xE5CC;</i>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/header_row.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/header_row.html
@@ -1,8 +1,8 @@
 <div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
 </div>
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/image.html
@@ -1,8 +1,8 @@
 <div class="mdl-form__row mdl-form__row--header mdl-cell mdl-cell--12-col %header_visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
 	<div class="mdl-form__header">
@@ -24,6 +24,8 @@
 		data-valid-url="%valid_url%"
 		data-ignore-refresh="%ignore_refresh%"
 		data-header-row="%header_row%"
+		data-label-color="%label_color%"
+		data-icon-color="%icon_color%"
 	>
 		<img src="%url%" />
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/input.html
@@ -1,8 +1,8 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
 	<div
@@ -20,9 +20,12 @@
 			data-item-state="%item_state%"
 			data-item-unit="%item_unit%"
 			for="oh-input-%item%"
+			data-label-color="%label_color%"
+			data-value-color="%value_color%"
+			data-icon-color="%icon_color%"
 		>
 			<input
-				%valuestyle% type="%input_type%" %input_pattern%
+				type="%input_type%" %input_pattern%
 				autocomplete="off"
 				step="any"
 				id="oh-input-%item%"

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/main.html
@@ -68,7 +68,7 @@
 			</div>
 		</script>
 	</head>
-	<body class="mdl-color-text--grey-700" data-sitemap="%sitemap%" data-page-id="%id%" data-icon-type="%icon_type%" data-inline-svg="%inline%" data-primary-color="%primarycolor%" data-secondary-color="%secondarycolor%">
+	<body class="mdl-color-text--grey-700" data-sitemap="%sitemap%" data-page-id="%id%" data-icon-type="%icon_type%" data-inline-svg="%inline%">
 	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
 		<header class="mdl-layout__header mdl-layout__header--scroll navigation navigation-home">
 			<div class="mdl-layout__header-row">

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/mapview.html
@@ -7,6 +7,8 @@
 		data-map-url="%map_url%"
 		data-map-zoom="%map_zoom%"
 		data-header-row="%header_row%"
+		data-label-color="%label_color%"
+		data-icon-color="%icon_color%"
 	>
 		<iframe src="%url%" height="%height%"></iframe>
 	</div>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/rollerblind.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
-	<span %valuestyle% class="mdl-form__value mdl-form__value--rollerblind">
+	<span class="mdl-form__value mdl-form__value--rollerblind">
 		%value%
 	</span>
 	<div
@@ -15,6 +15,9 @@
 		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__rollerblind--up">
 			<!-- keyboard_arrow_up -->

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/selection.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet mdl-form__link %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label_header%
 	</span>
-	<span %valuestyle% class="mdl-form__value">
+	<span class="mdl-form__value">
         %value_header%
     </span>
 	<div
@@ -16,6 +16,9 @@
 		data-value-map="%value_map%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		<!-- arrow_drop_down -->
 		<i class="material-icons">&#xE5C5;</i>

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/setpoint.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
-	<span %valuestyle% class="mdl-form__value mdl-form__value--setpoint">%value%</span>
+	<span class="mdl-form__value mdl-form__value--setpoint">%value%</span>
 	<div 
 		class="mdl-form__control mdl-form__setpoint" 
 		data-control-type="setpoint" 
@@ -18,6 +18,9 @@
 		data-unit="%unit%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect mdl-form__setpoint--up">
 			<!-- keyboard_arrow_up -->

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
@@ -1,11 +1,11 @@
 <div class="mdl-form__row mdl-cell mdl-cell--%cells%-col mdl-cell--%cells_tablet%-col-tablet %visibility_class%">
-	<span %iconstyle% class="mdl-form__icon">
+	<span class="mdl-form__icon">
 		%icon_snippet%
 	</span>
-	<span %labelstyle% class="mdl-form__label">
+	<span class="mdl-form__label">
 		%label%
 	</span>
-	<span %valuestyle% class="mdl-form__value mdl-form__value--slider">
+	<span class="mdl-form__value mdl-form__value--slider">
 		%value%
 	</span>
 	<span
@@ -16,6 +16,9 @@
 		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 		data-icon-with-state="%icon_with_state%"
+		data-label-color="%label_color%"
+		data-value-color="%value_color%"
+		data-icon-color="%icon_color%"
 	>
 		<input
 			data-freq="%frequency%"