From 8379cba15d0a17ba5ae92f2713b487da3e5dbdac Mon Sep 17 00:00:00 2001
From: Mathias Helsengren <mhe@umbraco.dk>
Date: Thu, 27 Feb 2025 11:55:17 +0100
Subject: [PATCH] Changed so the the logviewer's date input is using the
 umb-input-date instead, gave the umb-input-date a color-scheme option, and
 added the color-scheme dark, for the darkmode css.

---
 .../src/css/dark.theme.css                    |  1 +
 .../input-date/input-date.element.ts          | 12 +++++++-
 .../log-viewer-date-range-selector.element.ts | 28 ++++---------------
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/css/dark.theme.css b/src/Umbraco.Web.UI.Client/src/css/dark.theme.css
index cb9d0183d8..7c2823052d 100644
--- a/src/Umbraco.Web.UI.Client/src/css/dark.theme.css
+++ b/src/Umbraco.Web.UI.Client/src/css/dark.theme.css
@@ -44,4 +44,5 @@
 	--uui-color-positive-emphasis: #347d39;
 	--uui-color-positive-standalone: #347d39;
 	--uui-color-positive-contrast: #eeeeef;
+	--uui-color-scheme: dark;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
index 8d68d78068..b78188b73b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-date/input-date.element.ts
@@ -1,4 +1,4 @@
-import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, css } from '@umbraco-cms/backoffice/external/lit';
 import { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
 
 export type InputDateType = 'date' | 'time' | 'datetime-local';
@@ -28,6 +28,16 @@ export class UmbInputDateElement extends UUIInputElement {
 		super();
 		this.type = 'date'; // Default to 'date'
 	}
+
+	// Adding styles override to add a darkmode version.
+	static override styles = [
+		...UUIInputElement.styles,
+		css`
+			input {
+				color-scheme: var(--uui-color-scheme, normal);
+			}
+		`,
+	];
 }
 
 export default UmbInputDateElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
index b6d36b6003..54bc10cf90 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/log-viewer-date-range-selector.element.ts
@@ -70,7 +70,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 		return html`
 			<div class="input-container">
 				<uui-label for="start-date">From:</uui-label>
-				<input
+				<umb-input-date
 					@click=${(e: Event) => {
 						(e.target as HTMLInputElement).showPicker();
 					}}
@@ -78,11 +78,11 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 					type="date"
 					label="From"
 					.max=${this.#logViewerContext?.today ?? ''}
-					.value=${this._startDate} />
+					.value=${this._startDate}></umb-input-date>
 			</div>
 			<div class="input-container">
 				<uui-label for="end-date">To: </uui-label>
-				<input
+				<umb-input-date
 					@click=${(e: Event) => {
 						(e.target as HTMLInputElement).showPicker();
 					}}
@@ -91,7 +91,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 					label="To"
 					.min=${this._startDate}
 					.max=${this.#logViewerContext?.today ?? ''}
-					.value=${this._endDate} />
+					.value=${this._endDate}></umb-input-date>
 			</div>
 		`;
 	}
@@ -104,30 +104,14 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 				flex-direction: column;
 				gap: var(--uui-size-space-3);
 			}
-
-			input {
-				font-family: inherit;
-				padding: var(--uui-size-1) var(--uui-size-space-3);
-				font-size: inherit;
-				color: inherit;
-				border-radius: 0;
-				box-sizing: border-box;
-				border: none;
-				background: none;
+			umb-input-date {
 				width: 100%;
-				outline: none;
-				position: relative;
-				border-bottom: 2px solid transparent;
-			}
-
-			/* find out better validation for that  */
-			input:out-of-range {
-				border-color: var(--uui-color-danger);
 			}
 
 			:host([horizontal]) .input-container {
 				display: flex;
 				align-items: baseline;
+				gap: var(--uui-size-space-3);
 			}
 		`,
 	];