Add dark theme

open-weather-connector-demo/cms/cms_en.yaml

@@ -6,8 +6,10 @@ Dialogs:
           demo:
             ui:
               ForecastWeatherDemo:
+                CelsiusNotation: °C
                 CityNameLabel: City name
                 CountryCodeLabel: Country code
+                FahrenheitNotation: °F
                 Header: Find Weather Forecasts in Any City
                 HumidityLabel: Humidity
                 PrecipitationLabel: Precipitation

open-weather-connector-demo/src/com/axonivy/connector/openweather/managedbean/ForecastWeatherBean.java

@@ -37,6 +37,8 @@
 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 {
@@ -76,8 +78,11 @@ 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;
@@ -86,6 +91,12 @@ public void init() {
 		search();
 	}
 
+	private void initRelatedBeans() {
+		FacesContext context = FacesContext.getCurrentInstance();
+		ivyFreyaThemeBean = context.getApplication().evaluateExpressionGet(context, "#{ivyFreyaTheme}",
+				IvyFreyaTheme.class);
+	}
+
 	public LocalDate getSelectedDate() {
 		return selectedDate;
 	}

open-weather-connector-demo/src_hd/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/ForecastWeatherDemo.xhtml

@@ -59,10 +59,10 @@
 					<p:panelGrid layout="grid" columns="2"
 						columnClasses="ui-g-3 p-p-0, ui-g-9 p-py-0">
 						<p:outputPanel id="forecast-panel"
-							styleClass="p-text-center weather-detail-container">
+							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 styleClass="p-text-left ">
+								<p:outputPanel id="city-name-panel" styleClass="p-text-left">
 									<i class="pi pi-map-marker" /> #{forecastWeatherBean.cityName}</p:outputPanel>
 
 								<p:outputPanel styleClass="p-text-right">#{forecastWeatherBean.time12HourName}</p:outputPanel>
@@ -83,15 +83,15 @@
 										disabled="#{forecastWeatherBean.typeOfDegree == 'CELSIUS'}">
 										<p:ajax
 											update=":form:forecast-panel :form:forecast-btn-panel :form:property-panel"
-											oncomplete="updateChartWithNewData()" />°C</h:commandLink>
+											oncomplete="updateChartWithNewData()" />#{ivy.cms.co('/Dialogs/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/CelsiusNotation')}</h:commandLink>
 									|
 									<h:commandLink
 										styleClass="type-of-degree #{forecastWeatherBean.typeOfDegree == 'FAHRENHEIT' ? 'type-of-degree-selected' : ''}"
 										action="#{forecastWeatherBean.setTypeOfDegree('FAHRENHEIT')}"
 										disabled="#{forecastWeatherBean.typeOfDegree == 'FAHRENHEIT'}">
 										<p:ajax
 											update=":form:forecast-panel :form:forecast-btn-panel :form:property-panel"
-											oncomplete="updateChartWithNewData()" />°F</h:commandLink>
+											oncomplete="updateChartWithNewData()" />#{ivy.cms.co('/Dialogs/com/axonivy/connector/openweather/demo/ui/ForecastWeatherDemo/FahrenheitNotation')}</h:commandLink>
 								</div>
 							</div>
 							<div>#{forecastWeatherBean.currentWeatherDetail}</div>
@@ -134,7 +134,8 @@
 									value="#{forecastWeatherBean.dailyForecastDisplayInfos}"
 									var="dailyForecastDisplayInfo" varStatus="status">
 									<h:commandLink
-										styleClass="weather-date-btn #{status.index == forecastWeatherBean.selectedDateIndex ? 'weather-date-selected' : ''}"
+										styleClass="weather-date-btn #{status.index == forecastWeatherBean.selectedDateIndex ? ivyFreyaTheme.getMode() == 'dark' ? 
+											'weather-date-selected-dark-mode' : 'weather-date-selected-light-mode' : ''}"
 										action="#{forecastWeatherBean.setSelectedDateIndex(status.index)}">
 										<p:ajax
 											update=":form:forecast-panel :form:forecast-btn-panel :form:property-panel"

open-weather-connector-demo/webContent/layouts/frame-10.xhtml

@@ -40,19 +40,13 @@ and refence it below in the head part.
 	<ui:include src="/layouts/includes/progress-loader.xhtml" />
 	<div id="content" class="container frame">
 		<ui:insert name="content">
-      		default content
-    	</ui:insert>
+			default content
+		</ui:insert>
 	</div>
 
 	<ui:insert name="exception">
 		<ui:include src="/layouts/includes/exception.xhtml" />
 	</ui:insert>
 
-	<!-- optional Portal parameters:
-  <script>
-    window.
-  </script>
-  -->
-
 </h:body>
 </html>

open-weather-connector-demo/webContent/layouts/styles/forecastweather.css

@@ -2,7 +2,7 @@
 	min-width: 1000px;
 }
 
-.weather-detail-container {
+.weather-detail-container-light-mode {
 	background-image: url("#{resource['images/background/white.jpg']}");
 	background-size: cover;
 	background-repeat: no-repeat;
@@ -11,6 +11,15 @@
 	background-size: cover;
 }
 
+.weather-detail-container-dark-mode {
+	background-image: url("#{resource['images/background/orange.jpg']}");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-clip: content-box;
+	background-size: cover;
+}
+
 .weather-condition-img-container {
 	height: 160px
 }
@@ -98,10 +107,14 @@
 	color: inherit;
 }
 
-.weather-date-selected {
+.weather-date-selected-light-mode {
 	background-color: #f8f9fa;
 }
 
+.weather-date-selected-dark-mode {
+	background-color: #4c505a;
+}
+
 .weather-chart {
 	display: flex;
 	flex-direction: column;

open-weather-connector-demo/webContent/resources/js/chartjs-config.js

@@ -25,6 +25,36 @@ const ClickPositionDetector = {
 	}
 };
 
+document.getElementById('form:weather-chart-panel:temp-chart').addEventListener('click', function() {
+	console.log("abc");
+	var tempChart = PF('tempChartWidgetVar').chart;
+	tempChart.options.scales.x.ticks.color = '#EAEBEC';
+	tempChart.data.datasets[0].backgroundColor = '#EAEBEC';
+	tempChart.data.datasets[0].borderColor = 'red';
+	tempChart.options.plugins.datalabels.color = '#EAEBEC';
+	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]});
@@ -136,7 +166,6 @@ function precipitationChartExtender() {
 function panChartByCurrentValue() {
 	var currentChartWindowStartX = parseInt(document.getElementById('form:currentChartWindowStartX').value);
 	var currentChartWindowEndX = parseInt(document.getElementById('form:currentChartWindowEndX').value);
-	console.log(typeof(currentChartWindowEndX));
 
 	panChart(currentChartWindowStartX, currentChartWindowEndX);
 }
@@ -174,7 +203,7 @@ function updateChartWithNewData() {
 
 	var tempChart = PF('tempChartWidgetVar').chart;
 	var temperatureData = tempChart.data.datasets[0].data;
-
+	
 	data = temperatureData.map(function(value, index) {
 
 		if (index < newTemperatureData.length) {