Update dark mode theme

axonivy-market · Mar 6, 2024 · d6dcc92 · d6dcc92
1 parent 7a22a50
commit d6dcc92
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 36 deletions.
diff --git a/...connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java b/...connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java
@@ -37,8 +37,6 @@
 import com.axonivy.connector.openweather.util.Constants;
 import com.axonivy.connector.openweather.util.DateTimeFormatterUtilities;
 
-import ch.ivyteam.ivy.jsf.primefaces.theme.IvyFreyaTheme;
-
 @ManagedBean
 @ViewScoped
 public class ForecastWeatherBean implements Serializable {
@@ -78,11 +76,8 @@ public class ForecastWeatherBean implements Serializable {
 	private int currentChartWindowStartX;
 	private int currentChartWindowEndX;
 
-	private IvyFreyaTheme ivyFreyaThemeBean;
-
 	@PostConstruct
 	public void init() {
-		initRelatedBeans();
 		searchCityName = Constants.DEFAULT_SEARCH_CITY_NAME;
 		units = Constants.DEFAULT_UNITS;
 		typeOfDegree = Constants.DEFAULT_TYPE_OF_DEGREE;
@@ -91,12 +86,6 @@ public void init() {
 		search();
 	}
 
-	private void initRelatedBeans() {
-		FacesContext context = FacesContext.getCurrentInstance();
-		ivyFreyaThemeBean = context.getApplication().evaluateExpressionGet(context, "#{ivyFreyaTheme}",
-				IvyFreyaTheme.class);
-	}
-
 	public LocalDate getSelectedDate() {
 		return selectedDate;
 	}

diff --git a/...d/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml b/...d/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml
@@ -62,7 +62,7 @@
 							styleClass="p-text-center #{ivyFreyaTheme.getMode() == 'dark' ? 'weather-detail-container-dark-mode' : 'weather-detail-container-light-mode'}">
 							<p:panelGrid layout="grid" columns="2"
 								columnClasses="ui-g-6 p-py-3, ui-g-6 p-py-3">
-								<p:outputPanel id="city-name-panel" styleClass="p-text-left">
+								<p:outputPanel styleClass="p-text-left">
 									<i class="pi pi-map-marker" /> #{forecastWeatherBean.cityName}</p:outputPanel>
 
 								<p:outputPanel styleClass="p-text-right">#{forecastWeatherBean.time12HourName}</p:outputPanel>
@@ -161,9 +161,16 @@
 				</h:form>
 
 			</p:outputPanel>
+
+			<h:outputScript>
+				var fontColor = '#{ivyFreyaTheme.getMode()}' == 'dark' ? '#EAEBEC' : '#69707A';
+				var tempBackGroundColor = '#{ivyFreyaTheme.getMode()}' == 'dark' ? '#FF6347' : '#e8f0fe';
+				var tempBorderColor = '#{ivyFreyaTheme.getMode()}' == 'dark' ? '#FF6347' : '#1a73e8';
+			</h:outputScript>
 			<h:outputScript library="js" name="chartjs-config.js" />
 			<h:outputScript library="chartjs-plugin"
 				name="chartjs-plugin-datalabels.min.js" />
+
 		</ui:define>
 	</ui:composition>
 </h:body>

diff --git a/open-weather-connector-demo/webContent/resources/js/chartjs-config.js b/open-weather-connector-demo/webContent/resources/js/chartjs-config.js
@@ -35,26 +35,6 @@ document.getElementById('form:weather-chart-panel:temp-chart').addEventListener(
 	tempChart.update();
 });
 
-// Define a function to handle DOM changes
-function handleDOMChange(mutationsList) {
-	for (const mutation of mutationsList) {
-		if (mutation.type === 'childList') {
-			const element = mutation.target;
-			const currentColor = window.getComputedStyle(element).color;
-			console.log("Text content changed, current color:", currentColor);
-		}
-	}
-}
-
-// Create a new MutationObserver instance
-const observer = new MutationObserver(handleDOMChange);
-
-// Select the element to observe
-const targetElement = document.getElementById("form:city-name-panel");
-
-// Start observing the element for changes
-observer.observe(targetElement, { childList: true });
-
 function temperatureChartExtender() {
 	//Register plugin datalabels
 	jQuery.extend(true, this.cfg.config, {plugins: [ChartDataLabels, ClickPositionDetector]});
@@ -73,6 +53,9 @@ function temperatureChartExtender() {
 				max: 7,
 				grid: {
 					drawOnChartArea: false
+				},
+				ticks: {
+					color: fontColor,
 				}
 			},
 		},
@@ -86,7 +69,8 @@ function temperatureChartExtender() {
 				formatter: function(value, context) {
 					return value;
 				},
-				offset: 5
+				offset: 5,
+				color: fontColor
 			}
 		}
 	};
@@ -126,6 +110,9 @@ function precipitationChartExtender() {
 				max: 7,
 				grid: {
 					drawOnChartArea: false
+				},
+				ticks: {
+					color: fontColor,
 				}
 			},
 		},
@@ -140,7 +127,8 @@ function precipitationChartExtender() {
 				formatter: function(value, context) {
 					return value + '%';
 				},
-				offset: 2
+				offset: 2,
+				color: fontColor
 			}
 		}
 	};
@@ -152,8 +140,8 @@ function precipitationChartExtender() {
 			datasets: [
 			{
 				borderWidth: 2,
-				backgroundColor: '#e8f0fe',
-				borderColor: '#1a73e8',
+				backgroundColor: tempBackGroundColor,
+				borderColor: tempBorderColor,
 				barThickness: 80
 			}
 		]