More dark mode fixes

getkirby · Dec 2, 2024 · 92522e9 · 92522e9
1 parent 79baa7b
commit 92522e9
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 23 deletions.
diff --git a/panel/src/components/Dialogs/ErrorDialog.vue b/panel/src/components/Dialogs/ErrorDialog.vue
@@ -55,10 +55,11 @@ export default {
 
 <style>
 .k-error-details {
-	background: var(--color-white);
+	background: var(--input-color-back);
 	display: block;
 	overflow: auto;
 	padding: 1rem;
+	border-radius: var(--rounded);
 	font-size: var(--text-sm);
 	line-height: 1.25em;
 	margin-top: 0.75rem;
@@ -79,7 +80,7 @@ export default {
 	white-space: pre-line;
 }
 .k-error-details li:not(:last-child) {
-	border-bottom: 1px solid var(--color-light);
+	border-bottom: 1px solid var(--color-border);
 	padding-bottom: 0.25rem;
 	margin-bottom: 0.25rem;
 }

diff --git a/panel/src/components/Dialogs/PageMoveDialog.vue b/panel/src/components/Dialogs/PageMoveDialog.vue
@@ -53,10 +53,9 @@ export default {
 	margin-bottom: var(--spacing-2);
 }
 .k-page-move-parent {
-	--tree-color-back: var(--color-white);
-	--tree-color-hover-back: var(--color-light);
+	--tree-color-back: var(--input-color-back);
 	padding: var(--spacing-3);
-	background: var(--color-white);
+	background: var(--tree-color-back);
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);
 }

diff --git a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
@@ -6,15 +6,15 @@
 			variant="filled"
 			@click="$refs.dropdown.toggle()"
 		>
-			<k-color-frame :color="value" ratio="1/1" />
+			<k-color-frame :color="valueAdapted" ratio="1/1" />
 		</k-button>
 		<k-dropdown-content
 			ref="dropdown"
 			align-x="end"
 			:options="[
 				{
 					text: $t('field.blocks.figure.back.plain'),
-					click: 'transparent'
+					click: 'var(--block-color-back)'
 				},
 				{
 					text: $t('field.blocks.figure.back.pattern.light'),
@@ -34,6 +34,15 @@
 export default {
 	props: {
 		value: String
+	},
+	computed: {
+		valueAdapted() {
+			if (this.value === "transparent") {
+				return "var(--block-color-back)";
+			}
+
+			return this.value;
+		}
 	}
 };
 </script>
@@ -44,10 +53,10 @@ export default {
 	--color-frame-size: 1.5rem;
 	--button-height: 1.5rem;
 	--button-padding: 0 0.125rem;
-	--button-color-back: var(--color-white);
+	--button-color-back: var(--block-color-back);
 	gap: 0.25rem;
 	box-shadow: var(--shadow-toolbar);
-	border: 1px solid var(--color-white);
+	border: 1px solid var(--button-color-back);
 }
 .k-block-background-dropdown .k-color-frame {
 	border-right: 1px solid var(--color-gray-300);

diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -44,7 +44,7 @@ export default {
 	extends: Block,
 	data() {
 		return {
-			back: this.onBack() ?? "var(--color-white)"
+			back: this.onBack() ?? "var(--block-color-back)"
 		};
 	},
 	computed: {

diff --git a/panel/src/components/Forms/Input/RangeInput.vue b/panel/src/components/Forms/Input/RangeInput.vue
@@ -100,7 +100,7 @@ export default {
 		position() {
 			return this.value || this.value === 0
 				? this.value
-				: this.default ?? this.baseline;
+				: (this.default ?? this.baseline);
 		}
 	},
 	watch: {
@@ -195,7 +195,10 @@ export default {
 }
 
 .k-range-input[data-disabled="true"] {
-	--range-tooltip-back: var(--color-gray-600);
+	--range-tooltip-back: light-dark(
+		var(--color-gray-600),
+		var(--color-gray-850)
+	);
 }
 
 /* Input context */

diff --git a/panel/src/components/Forms/Input/TogglesInput.vue b/panel/src/components/Forms/Input/TogglesInput.vue
@@ -133,7 +133,7 @@ export default {
 	margin-inline-start: var(--spacing-2);
 }
 .k-toggles-input input:focus:not(:checked) + label {
-	background: var(--color-blue-200);
+	background: light-dark(var(--color-blue-200), var(--color-blue-800));
 }
 
 .k-toggles-input input:checked + label {

diff --git a/panel/src/components/Forms/Layouts/LayoutSelector.vue b/panel/src/components/Forms/Layouts/LayoutSelector.vue
@@ -86,8 +86,11 @@ export default {
 	}
 }
 .k-layout-selector-option {
-	--color-border: hsla(var(--color-gray-hs), 0%, 6%);
-	--color-back: var(--color-white);
+	--color-border: light-dark(
+		hsla(var(--color-gray-hs), 0%, 6%),
+		hsla(var(--color-gray-hs), 60%, 10%)
+	);
+	--color-back: light-dark(var(--color-white), var(--color-gray-950));
 	border-radius: var(--rounded);
 }
 .k-layout-selector-option:focus-visible {
@@ -111,8 +114,8 @@ export default {
 	height: 100%;
 }
 .k-layout-selector-option:hover {
-	--color-border: var(--color-gray-500);
-	--color-back: var(--color-gray-100);
+	--color-border: light-dark(var(--color-gray-500), var(--color-gray-800));
+	--color-back: light-dark(var(--color-gray-100), var(--color-gray-900));
 }
 .k-layout-selector-option[aria-current="true"] {
 	--color-border: var(--color-focus);

diff --git a/panel/src/components/Layout/Table.vue b/panel/src/components/Layout/Table.vue
@@ -372,8 +372,11 @@ export default {
 	--table-cell-padding: var(--spacing-3);
 	--table-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--table-color-border: var(--panel-color-back);
-	--table-color-hover: light-dark(var(--color-gray-100), rgba(0,0,0, .1));
-	--table-color-th-back: light-dark(var(--color-gray-100), var(--color-gray-800));
+	--table-color-hover: light-dark(var(--color-gray-100), rgba(0, 0, 0, 0.1));
+	--table-color-th-back: light-dark(
+		var(--color-gray-100),
+		var(--color-gray-800)
+	);
 	--table-color-th-text: var(--color-text-dimmed);
 	--table-row-height: var(--input-height);
 }
@@ -475,7 +478,7 @@ export default {
 
 /* Sortable tables */
 .k-table-row-ghost {
-	background: var(--color-white);
+	background: var(--table-color-back);
 	outline: var(--outline);
 	border-radius: var(--rounded);
 	margin-bottom: 2px;

diff --git a/panel/src/components/Views/Installation/InstallationView.vue b/panel/src/components/Views/Installation/InstallationView.vue
@@ -180,8 +180,9 @@ export default {
 
 <style>
 .k-installation-dialog {
-	--dialog-color-back: var(--color-white);
-	--dialog-shadow: var(--shadow);
+	--dialog-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--dialog-shadow: light-dark(var(--shadow), none);
+
 	container-type: inline-size;
 }
 .k-installation-view .k-button {

diff --git a/panel/src/components/Views/PreviewView.vue b/panel/src/components/Views/PreviewView.vue
@@ -223,7 +223,7 @@ export default {
 	flex-grow: 1;
 	border-radius: var(--rounded-lg);
 	box-shadow: var(--shadow-xl);
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-950));
 }
 .k-preview-view-panel .k-empty {
 	flex-grow: 1;