From dcb4ee739e32b2b9f3b08128106338c56c50f9e5 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Thu, 28 Nov 2024 18:02:56 +0100
Subject: [PATCH 01/19] First tests to create a theme without overwriting
 colors

---
 panel/src/components/Collection/Item.vue      |  3 +-
 panel/src/components/Dialogs/Dialog.vue       |  2 +-
 panel/src/components/Drawers/Drawer.vue       |  2 +-
 .../src/components/Drawers/Elements/Body.vue  |  2 +-
 .../components/Dropdowns/DropdownContent.vue  |  4 --
 panel/src/components/Forms/Blocks/Block.vue   |  4 +-
 .../components/Forms/Blocks/BlockOptions.vue  |  2 +-
 panel/src/components/Forms/Blocks/Blocks.vue  |  6 ++-
 .../Elements/BlockBackgroundDropdown.vue      |  2 +-
 .../Forms/Blocks/Elements/BlockFigure.vue     |  2 +-
 .../components/Forms/Blocks/Types/Code.vue    |  4 --
 .../components/Forms/Blocks/Types/Gallery.vue |  2 +-
 .../components/Forms/Blocks/Types/Image.vue   |  2 +-
 .../Forms/Blocks/Types/Markdown.vue           |  2 +-
 panel/src/components/Forms/Input.vue          |  4 +-
 .../components/Forms/Input/ChoiceInput.vue    |  2 +-
 .../components/Forms/Input/TogglesInput.vue   |  2 +-
 panel/src/components/Forms/Layouts/Layout.vue |  2 +-
 .../Forms/Previews/BubblesFieldPreview.vue    |  2 +-
 .../src/components/Forms/Toolbar/Toolbar.vue  |  2 +-
 panel/src/components/Layout/Box.vue           |  2 +-
 panel/src/components/Layout/Bubble.vue        |  2 +-
 .../components/Layout/Frame/ColorFrame.vue    |  4 --
 panel/src/components/Layout/Header.vue        |  2 +-
 panel/src/components/Layout/Overlay.vue       |  4 --
 panel/src/components/Layout/Stat.vue          |  8 ++--
 panel/src/components/Layout/Table.vue         | 12 ++----
 panel/src/components/Navigation/Button.vue    |  8 +---
 .../src/components/Navigation/ButtonGroup.vue |  5 ++-
 panel/src/components/Text/Code.vue            |  5 ---
 panel/src/components/Text/Text.vue            |  2 +-
 panel/src/components/View/Activation.vue      |  3 --
 panel/src/components/View/Menu.vue            |  9 ++---
 panel/src/components/View/Panel.vue           |  3 +-
 .../components/Views/Files/FilePreview.vue    | 11 ++---
 .../Views/Files/FilePreviewDetails.vue        |  5 +--
 .../Views/Files/FilePreviewFrame.vue          |  3 --
 panel/src/components/Views/Files/FileView.vue |  1 +
 .../components/Views/Users/UserProfile.vue    |  2 +-
 panel/src/styles/config/colors.css            | 40 +++++++++----------
 panel/src/styles/config/pattern.css           | 15 -------
 panel/src/styles/reset/choice.css             |  4 +-
 panel/src/styles/utilities/theme.css          | 13 ++++--
 43 files changed, 86 insertions(+), 130 deletions(-)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index af6e957c87..4ae3425864 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -140,13 +140,14 @@ export default {
 :root {
 	--item-button-height: var(--height-md);
 	--item-button-width: var(--height-md);
+	--item-color-back: light-dark(var(--color-white), var(--color-gray-950));
 	--item-height: auto;
 	--item-height-cardlet: calc(var(--height-md) * 3);
 }
 
 .k-item {
 	position: relative;
-	background: var(--color-white);
+	background: var(--item-color-back);
 	box-shadow: var(--shadow);
 	border-radius: var(--rounded);
 	min-height: var(--item-height);
diff --git a/panel/src/components/Dialogs/Dialog.vue b/panel/src/components/Dialogs/Dialog.vue
index ab94a49d4d..4eb339646f 100644
--- a/panel/src/components/Dialogs/Dialog.vue
+++ b/panel/src/components/Dialogs/Dialog.vue
@@ -50,7 +50,7 @@ export default {
 
 <style>
 :root {
-	--dialog-color-back: var(--color-light);
+	--dialog-color-back: var(--panel-color-back);
 	--dialog-color-text: currentColor;
 	--dialog-margin: var(--spacing-6);
 	--dialog-padding: var(--spacing-6);
diff --git a/panel/src/components/Drawers/Drawer.vue b/panel/src/components/Drawers/Drawer.vue
index 4f01adbfc3..f5fed04604 100644
--- a/panel/src/components/Drawers/Drawer.vue
+++ b/panel/src/components/Drawers/Drawer.vue
@@ -61,7 +61,7 @@ export default {
 <style>
 :root {
 	--drawer-body-padding: 1.5rem;
-	--drawer-color-back: var(--color-light);
+	--drawer-color-back: var(--panel-color-back);
 	--drawer-header-height: 2.5rem;
 	--drawer-header-padding: 1rem;
 	--drawer-shadow: var(--shadow-xl);
diff --git a/panel/src/components/Drawers/Elements/Body.vue b/panel/src/components/Drawers/Elements/Body.vue
index 2153282230..1541898fc4 100644
--- a/panel/src/components/Drawers/Elements/Body.vue
+++ b/panel/src/components/Drawers/Elements/Body.vue
@@ -16,7 +16,7 @@ export default {};
 .k-drawer-body {
 	padding: var(--drawer-body-padding);
 	flex-grow: 1;
-	background: var(--color-light);
+	background: var(--drawer-color-back);
 }
 /* Sticky elements inside drawer */
 /** TODO: .k-drawer-body .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */
diff --git a/panel/src/components/Dropdowns/DropdownContent.vue b/panel/src/components/Dropdowns/DropdownContent.vue
index 229ffcb5af..5665202d27 100644
--- a/panel/src/components/Dropdowns/DropdownContent.vue
+++ b/panel/src/components/Dropdowns/DropdownContent.vue
@@ -352,10 +352,6 @@ export default {
 	--dropdown-shadow: var(--shadow-xl);
 }
 
-.k-panel[data-theme="dark"] {
-	--dropdown-color-hr: hsla(0, 0%, var(--color-l-max), 0.1);
-}
-
 .k-dropdown-content {
 	--dropdown-x: 0;
 	--dropdown-y: 0;
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
index 44e37044b2..11daefecf1 100644
--- a/panel/src/components/Forms/Blocks/Block.vue
+++ b/panel/src/components/Forms/Blocks/Block.vue
@@ -362,7 +362,7 @@ export default {
 .k-block-container {
 	position: relative;
 	padding: var(--spacing-3);
-	background: var(--color-white);
+	background: var(--block-color-back);
 	border-radius: var(--rounded);
 }
 .k-block-container:not(:last-of-type) {
@@ -403,7 +403,7 @@ export default {
 	display: inline-grid;
 }
 .k-block-container[data-disabled="true"] {
-	background: var(--color-light);
+	background: var(--panel-color-back);
 }
 
 /* Collapse long blocks while dragging */
diff --git a/panel/src/components/Forms/Blocks/BlockOptions.vue b/panel/src/components/Forms/Blocks/BlockOptions.vue
index d34601fa9a..f7d090dcee 100644
--- a/panel/src/components/Forms/Blocks/BlockOptions.vue
+++ b/panel/src/components/Forms/Blocks/BlockOptions.vue
@@ -207,7 +207,7 @@ export default {
 	box-shadow: var(--shadow-toolbar);
 }
 .k-block-options > .k-button:not(:last-of-type) {
-	border-inline-end: 1px solid var(--color-light);
+	border-inline-end: 1px solid var(--panel-color-back);
 }
 .k-block-options .k-dropdown-content {
 	margin-top: 0.5rem;
diff --git a/panel/src/components/Forms/Blocks/Blocks.vue b/panel/src/components/Forms/Blocks/Blocks.vue
index cccdf8c123..ce5a3151f4 100644
--- a/panel/src/components/Forms/Blocks/Blocks.vue
+++ b/panel/src/components/Forms/Blocks/Blocks.vue
@@ -721,11 +721,15 @@ export default {
 </script>
 
 <style>
+:root {
+	--block-color-back: var(--item-color-back);
+}
+
 .k-blocks {
 	border-radius: var(--rounded);
 }
 .k-blocks:not([data-empty="true"], [data-disabled="true"]) {
-	background: var(--color-white);
+	background: var(--block-color-back);
 	box-shadow: var(--shadow);
 }
 .k-blocks[data-disabled="true"]:not([data-empty="true"]) {
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
index 65a17ec6ce..87f65346d4 100644
--- a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
+++ b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
@@ -14,7 +14,7 @@
 			:options="[
 				{
 					text: $t('field.blocks.figure.back.plain'),
-					click: 'var(--color-white)'
+					click: 'transparent'
 				},
 				{
 					text: $t('field.blocks.figure.back.pattern.light'),
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
index 6a7dc01301..e35483fcd3 100644
--- a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
+++ b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -73,7 +73,7 @@ export default {
 	--button-width: 100%;
 	--button-height: 6rem;
 	--button-color-text: var(--color-text-dimmed);
-	--button-color-back: var(--color-light);
+	--button-color-back: var(--panel-color-back);
 }
 
 .k-block-figure-empty,
diff --git a/panel/src/components/Forms/Blocks/Types/Code.vue b/panel/src/components/Forms/Blocks/Types/Code.vue
index 9579246809..606adae318 100644
--- a/panel/src/components/Forms/Blocks/Types/Code.vue
+++ b/panel/src/components/Forms/Blocks/Types/Code.vue
@@ -63,10 +63,6 @@ export default {
 	--input-padding: var(--spacing-3);
 	--input-padding-multiline: var(--input-padding);
 }
-.k-panel[data-theme="dark"] .k-block-type-code-editor .k-input {
-	--input-color-back: var(--color-light);
-	--input-color-text: var(--color-text);
-}
 
 .k-block-type-code-editor .k-input[data-type="textarea"] {
 	white-space: pre-wrap;
diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
index c676528e8d..071b0265cd 100644
--- a/panel/src/components/Forms/Blocks/Types/Gallery.vue
+++ b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -107,6 +107,6 @@ export default {
 	background: var(--color-gray-250);
 }
 .k-block-type-gallery-placeholder {
-	background: var(--color-light);
+	background: var(--panel-color-back);
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/Types/Image.vue b/panel/src/components/Forms/Blocks/Types/Image.vue
index a5f419bf85..e152d09443 100644
--- a/panel/src/components/Forms/Blocks/Types/Image.vue
+++ b/panel/src/components/Forms/Blocks/Types/Image.vue
@@ -40,7 +40,7 @@ export default {
 	extends: Block,
 	data() {
 		return {
-			back: this.onBack() ?? "var(--color-white)"
+			back: this.onBack() ?? "transparent"
 		};
 	},
 	computed: {
diff --git a/panel/src/components/Forms/Blocks/Types/Markdown.vue b/panel/src/components/Forms/Blocks/Types/Markdown.vue
index aea08fae58..248e322eec 100644
--- a/panel/src/components/Forms/Blocks/Types/Markdown.vue
+++ b/panel/src/components/Forms/Blocks/Types/Markdown.vue
@@ -36,7 +36,7 @@ export default {
 
 <style>
 .k-block-type-markdown-input {
-	--input-color-back: var(--color-light);
+	--input-color-back: var(--panel-color-back);
 	--input-color-border: none;
 	--input-outline-focus: none;
 	--input-padding-multiline: var(--spacing-3);
diff --git a/panel/src/components/Forms/Input.vue b/panel/src/components/Forms/Input.vue
index ad7bfd6106..a6b4f2f6ec 100644
--- a/panel/src/components/Forms/Input.vue
+++ b/panel/src/components/Forms/Input.vue
@@ -107,7 +107,7 @@ export default {
 
 <style>
 :root {
-	--input-color-back: var(--color-white);
+	--input-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--input-color-border: var(--color-border);
 	--input-color-description: var(--color-text-dimmed);
 	--input-color-icon: currentColor;
@@ -194,7 +194,7 @@ export default {
 
 /* Disabled state */
 .k-input[data-disabled="true"] {
-	--input-color-back: var(--color-light);
+	--input-color-back: var(--panel-color-back);
 	--input-color-icon: var(--color-gray-600);
 	pointer-events: none;
 }
diff --git a/panel/src/components/Forms/Input/ChoiceInput.vue b/panel/src/components/Forms/Input/ChoiceInput.vue
index 996d9419df..c3b6990e44 100644
--- a/panel/src/components/Forms/Input/ChoiceInput.vue
+++ b/panel/src/components/Forms/Input/ChoiceInput.vue
@@ -103,7 +103,7 @@ export default {
 
 :where(.k-checkboxes-field, .k-radio-field)
 	.k-choice-input:not([aria-disabled="true"]) {
-	background: var(--input-color-back);
+	background: var(--item-color-back);
 	box-shadow: var(--shadow);
 }
 
diff --git a/panel/src/components/Forms/Input/TogglesInput.vue b/panel/src/components/Forms/Input/TogglesInput.vue
index 97fce4d67a..5e1ec9f41c 100644
--- a/panel/src/components/Forms/Input/TogglesInput.vue
+++ b/panel/src/components/Forms/Input/TogglesInput.vue
@@ -128,7 +128,7 @@ export default {
 /** TODO: .k-toggles-input li:has(input[disabled]) label */
 .k-toggles-input li[data-disabled="true"] label {
 	color: var(--color-text-dimmed);
-	background: var(--color-light);
+	background: var(--panel-color-back);
 }
 .k-toggles-input .k-icon + .k-toggles-text {
 	margin-inline-start: var(--spacing-2);
diff --git a/panel/src/components/Forms/Layouts/Layout.vue b/panel/src/components/Forms/Layouts/Layout.vue
index 457114b26c..f530d41cb5 100644
--- a/panel/src/components/Forms/Layouts/Layout.vue
+++ b/panel/src/components/Forms/Layouts/Layout.vue
@@ -210,7 +210,7 @@ export default {
 	padding-bottom: var(--spacing-2);
 	font-size: var(--text-sm);
 	background: var(--color-gray-100);
-	border-inline-start: 1px solid var(--color-light);
+	border-inline-start: 1px solid var(--panel-color-back);
 	color: var(--color-gray-500);
 }
 .k-layout-toolbar:hover {
diff --git a/panel/src/components/Forms/Previews/BubblesFieldPreview.vue b/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
index 47a3dd5f1c..531e70ca3f 100644
--- a/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
@@ -61,7 +61,7 @@ export default {
 
 <style>
 .k-bubbles-field-preview {
-	--bubble-back: var(--color-light);
+	--bubble-back: var(--panel-color-back);
 	--bubble-text: var(--color-black);
 
 	padding: 0.375rem var(--table-cell-padding);
diff --git a/panel/src/components/Forms/Toolbar/Toolbar.vue b/panel/src/components/Forms/Toolbar/Toolbar.vue
index 7c807e50e8..0e2a980bc2 100644
--- a/panel/src/components/Forms/Toolbar/Toolbar.vue
+++ b/panel/src/components/Forms/Toolbar/Toolbar.vue
@@ -136,7 +136,7 @@ export default {
 
 :where(.k-textarea-input, .k-writer-input):not(:focus-within) {
 	--toolbar-text: var(--color-gray-400);
-	--toolbar-border: var(--color-light);
+	--toolbar-border: var(--panel-color-back);
 }
 /** TODO: .k-toolbar:not([data-inline="true"]):has(~ :focus-within) */
 :where(.k-textarea-input, .k-writer-input):focus-within
diff --git a/panel/src/components/Layout/Box.vue b/panel/src/components/Layout/Box.vue
index 1fef28e853..f8eefb0a7f 100644
--- a/panel/src/components/Layout/Box.vue
+++ b/panel/src/components/Layout/Box.vue
@@ -105,7 +105,7 @@ export default {
 /* Themes */
 .k-box[data-theme] {
 	--box-color-back: var(--theme-color-back);
-	--box-color-text: var(--theme-color-text);
+	--box-color-text: var(--theme-color-text-highlight);
 	--box-color-icon: var(--theme-color-700);
 	min-height: var(--box-height);
 	line-height: 1.25;
diff --git a/panel/src/components/Layout/Bubble.vue b/panel/src/components/Layout/Bubble.vue
index 0743cf1e84..78f472fbf9 100644
--- a/panel/src/components/Layout/Bubble.vue
+++ b/panel/src/components/Layout/Bubble.vue
@@ -87,7 +87,7 @@ export default {
 <style>
 :root {
 	--bubble-size: 1.525rem;
-	--bubble-back: var(--color-light);
+	--bubble-back: var(--panel-color-back);
 	--bubble-rounded: var(--rounded-sm);
 	--bubble-text: var(--color-black);
 }
diff --git a/panel/src/components/Layout/Frame/ColorFrame.vue b/panel/src/components/Layout/Frame/ColorFrame.vue
index 31d77b6d38..c526aa41f8 100644
--- a/panel/src/components/Layout/Frame/ColorFrame.vue
+++ b/panel/src/components/Layout/Frame/ColorFrame.vue
@@ -54,8 +54,4 @@ export default {
 	background: var(--color-frame-back);
 	content: "";
 }
-
-.k-panel[data-theme="dark"] {
-	--color-frame-pattern: var(--pattern-dark);
-}
 </style>
diff --git a/panel/src/components/Layout/Header.vue b/panel/src/components/Layout/Header.vue
index 0007354ba0..81c22b032a 100644
--- a/panel/src/components/Layout/Header.vue
+++ b/panel/src/components/Layout/Header.vue
@@ -60,7 +60,7 @@ export default {
 
 <style>
 :root {
-	--header-color-back: var(--color-light);
+	--header-color-back: var(--panel-color-back);
 	--header-padding-block: var(--spacing-4);
 	--header-sticky-offset: var(--scroll-top);
 }
diff --git a/panel/src/components/Layout/Overlay.vue b/panel/src/components/Layout/Overlay.vue
index e365795c87..1c58cd6c82 100644
--- a/panel/src/components/Layout/Overlay.vue
+++ b/panel/src/components/Layout/Overlay.vue
@@ -142,10 +142,6 @@ export default {
 	--overlay-color-back-dimmed: rgba(0, 0, 0, 0.2);
 }
 
-.k-panel[data-theme="dark"] {
-	--overlay-color-back-dimmed: rgba(0, 0, 0, 0.8);
-}
-
 .k-overlay[open] {
 	position: fixed;
 	overscroll-behavior: contain;
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index 5ce7c1afd2..df424656a1 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -82,22 +82,24 @@ export default {
 
 <style>
 :root {
-	--stat-value-text-size: var(--text-2xl);
+	--stat-color-back: var(--item-color-back);
+	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
 	--stat-info-text-color: var(--color-text-dimmed);
+	--stat-value-text-size: var(--text-2xl);
 }
 
 .k-stat {
 	display: flex;
 	flex-direction: column;
 	padding: var(--spacing-3) var(--spacing-6);
-	background: var(--color-white);
+	background: var(--stat-color-back);
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);
 	line-height: var(--leading-normal);
 }
 .k-stat.k-link:hover {
 	cursor: pointer;
-	background: var(--color-gray-100);
+	background: var(--stat-color-hover-back);
 }
 .k-stat :where(dt, dd) {
 	display: block;
diff --git a/panel/src/components/Layout/Table.vue b/panel/src/components/Layout/Table.vue
index 8be8248428..ed0f397887 100644
--- a/panel/src/components/Layout/Table.vue
+++ b/panel/src/components/Layout/Table.vue
@@ -370,18 +370,14 @@ export default {
 <style>
 :root {
 	--table-cell-padding: var(--spacing-3);
-	--table-color-back: var(--color-white);
-	--table-color-border: var(--color-light);
-	--table-color-hover: var(--color-gray-100);
-	--table-color-th-back: var(--color-gray-100);
+	--table-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--table-color-border: var(--panel-color-back);
+	--table-color-hover: light-dark(var(--color-gray-100), var(--color-gray-1000));
+	--table-color-th-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
 	--table-color-th-text: var(--color-text-dimmed);
 	--table-row-height: var(--input-height);
 }
 
-.k-panel[data-theme="dark"] {
-	--table-color-border: var(--color-border);
-}
-
 /* Table Layout */
 .k-table {
 	position: relative;
diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index 67751f81a7..d9a971fd8e 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -305,15 +305,11 @@ export default {
 
 /** Filled Buttons **/
 .k-button:where([data-variant="filled"]) {
-	--button-color-back: var(--color-gray-300);
+	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
 }
 .k-button:where([data-variant="filled"]):not([aria-disabled="true"]):hover {
 	filter: brightness(97%);
 }
-.k-panel[data-theme="dark"]
-	.k-button:where([data-variant="filled"]):not([aria-disabled="true"]):hover {
-	filter: brightness(87%);
-}
 
 .k-button:where([data-variant="filled"][data-theme]) {
 	--button-color-icon: var(--theme-color-700);
@@ -324,7 +320,7 @@ export default {
 		var(--theme-color-hs),
 		57%
 	); /* slightly improve the contrast */
-	--button-color-back: var(--color-gray-300);
+	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
 }
 
 /** Icon Buttons **/
diff --git a/panel/src/components/Navigation/ButtonGroup.vue b/panel/src/components/Navigation/ButtonGroup.vue
index d8a47ec7d6..2db276e43c 100644
--- a/panel/src/components/Navigation/ButtonGroup.vue
+++ b/panel/src/components/Navigation/ButtonGroup.vue
@@ -84,11 +84,14 @@ export default {
 	border-end-end-radius: 0;
 }
 
+.k-button-group[data-layout="collapsed"] > .k-button:not([data-theme]) {
+	--theme-color-500: var(--panel-color-back);
+}
 .k-button-group[data-layout="collapsed"]
 	> .k-button[data-variant="filled"]:not(:first-child) {
 	border-start-start-radius: 0;
 	border-end-start-radius: 0;
-	border-left: 1px solid var(--theme-color-500, var(--color-gray-400));
+	border-left: 1px solid var(--theme-color-500);
 }
 
 .k-button-group[data-layout="collapsed"]
diff --git a/panel/src/components/Text/Code.vue b/panel/src/components/Text/Code.vue
index 736e85f2c8..3ed12c153c 100644
--- a/panel/src/components/Text/Code.vue
+++ b/panel/src/components/Text/Code.vue
@@ -44,11 +44,6 @@ export default {
 	--code-padding: var(--spacing-3);
 }
 
-.k-panel[data-theme="dark"] {
-	--code-color-back: var(--color-gray-100);
-	--code-color-text: var(--color-text);
-}
-
 code {
 	font-family: var(--code-font-family);
 	font-size: var(--code-font-size);
diff --git a/panel/src/components/Text/Text.vue b/panel/src/components/Text/Text.vue
index 23cb68e265..304233e38a 100644
--- a/panel/src/components/Text/Text.vue
+++ b/panel/src/components/Text/Text.vue
@@ -49,7 +49,7 @@ export default {
 :root {
 	--text-font-size: 1em;
 	--text-line-height: 1.5;
-	--link-color: var(--color-blue-800);
+	--link-color: light-dark(var(--color-blue-800), var(--color-blue-600));
 	--link-underline-offset: 2px;
 }
 
diff --git a/panel/src/components/View/Activation.vue b/panel/src/components/View/Activation.vue
index b5b001d3f0..bdb49f06b5 100644
--- a/panel/src/components/View/Activation.vue
+++ b/panel/src/components/View/Activation.vue
@@ -58,9 +58,6 @@ export default {
 	text-underline-offset: 2px;
 	border-radius: var(--rounded-sm);
 }
-.k-panel[data-theme="dark"] .k-activation p :where(button, a) {
-	color: var(--color-pink-600);
-}
 
 /* Hide Button */
 .k-activation-toggle {
diff --git a/panel/src/components/View/Menu.vue b/panel/src/components/View/Menu.vue
index 6bb958af9c..021235a33a 100644
--- a/panel/src/components/View/Menu.vue
+++ b/panel/src/components/View/Menu.vue
@@ -98,8 +98,8 @@ export default {
 :root {
 	--menu-button-height: var(--height);
 	--menu-button-width: 100%;
-	--menu-color-back: var(--color-gray-250);
-	--menu-color-border: var(--color-gray-300);
+	--menu-color-back: light-dark(var(--color-gray-250), var(--color-gray-950));
+	--menu-color-border: light-dark(var(--color-gray-300), var(--color-gray-850));
 	--menu-display: none;
 	--menu-display-backdrop: block;
 	--menu-padding: var(--spacing-3);
@@ -171,12 +171,9 @@ export default {
 	flex-shrink: 0;
 }
 .k-panel-menu-button[aria-current="true"] {
-	--button-color-back: var(--color-white);
+	--button-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	box-shadow: var(--shadow);
 }
-.k-panel[data-theme="dark"] .k-panel-menu-button[aria-current="true"] {
-	--button-color-back: var(--color-gray-400);
-}
 
 /* Outline should not vanish behind other buttons */
 .k-panel-menu-button:focus {
diff --git a/panel/src/components/View/Panel.vue b/panel/src/components/View/Panel.vue
index ec5eaeeac3..6807cd71c2 100644
--- a/panel/src/components/View/Panel.vue
+++ b/panel/src/components/View/Panel.vue
@@ -62,13 +62,14 @@ export default {};
 
 <style>
 :root {
+	--panel-color-back: light-dark(var(--color-gray-200), var(--color-gray-900));
 	--scroll-top: 0rem;
 }
 
 html {
 	overflow-x: hidden;
 	overflow-y: scroll;
-	background: var(--color-light);
+	background: var(--panel-color-back);
 	color: var(--color-text);
 }
 
diff --git a/panel/src/components/Views/Files/FilePreview.vue b/panel/src/components/Views/Files/FilePreview.vue
index 581b612181..5736c7e43b 100644
--- a/panel/src/components/Views/Files/FilePreview.vue
+++ b/panel/src/components/Views/Files/FilePreview.vue
@@ -36,19 +36,14 @@ export default {
 </script>
 <style>
 :root {
-	--file-preview-back: var(--color-gray-900);
-	--file-preview-text: hsla(0, 100%, var(--color-l-max), 0.75);
-}
-
-.k-panel[data-theme="dark"] {
-	--file-preview-back: var(--color-gray-100);
-	--file-preview-text: hsla(0, 100%, var(--color-l-min), 0.75);
+	--file-preview-color-back: light-dark(var(--color-gray-900), var(--color-gray-950));
+	--file-preview-color-text: hsla(0, 100%, var(--color-l-max), 0.75);
 }
 
 .k-file-preview {
 	display: grid;
 	align-items: stretch;
-	background: var(--file-preview-back);
+	background: var(--file-preview-color-back);
 	border-radius: var(--rounded-lg);
 	margin-bottom: var(--spacing-12);
 	overflow: hidden;
diff --git a/panel/src/components/Views/Files/FilePreviewDetails.vue b/panel/src/components/Views/Files/FilePreviewDetails.vue
index 9dbff0ba89..27e9836445 100644
--- a/panel/src/components/Views/Files/FilePreviewDetails.vue
+++ b/panel/src/components/Views/Files/FilePreviewDetails.vue
@@ -48,21 +48,18 @@ export default {
 	align-self: center;
 	padding: var(--spacing-6);
 	line-height: 1.5em;
-	padding: var(--spacing-6);
 }
 .k-file-preview-details dt {
 	font-size: var(--text-sm);
-	font-weight: 500;
 	font-weight: var(--font-semi);
 	color: var(--color-gray-500);
 	margin-bottom: var(--spacing-1);
 }
 .k-file-preview-details :where(dd, a) {
-	font-size: var(--text-xs);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: var(--file-preview-text);
+	color: var(--file-preview-color-text);
 	font-size: var(--text-sm);
 }
 </style>
diff --git a/panel/src/components/Views/Files/FilePreviewFrame.vue b/panel/src/components/Views/Files/FilePreviewFrame.vue
index e081439c98..451d050684 100644
--- a/panel/src/components/Views/Files/FilePreviewFrame.vue
+++ b/panel/src/components/Views/Files/FilePreviewFrame.vue
@@ -62,7 +62,4 @@ export default {
 .k-button.k-file-preview-frame-dropdown-toggle {
 	--button-color-icon: var(--color-gray-500);
 }
-.k-panel[data-theme="dark"] .k-button.k-file-preview-frame-dropdown-toggle {
-	--button-color-icon: var(--color-gray-700);
-}
 </style>
diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
index 2d0eaa404b..6aea0e57d3 100644
--- a/panel/src/components/Views/Files/FileView.vue
+++ b/panel/src/components/Views/Files/FileView.vue
@@ -87,6 +87,7 @@ export default {
 <style>
 .k-file-view-header {
 	margin-bottom: 0;
+	border-bottom: 0;
 }
 
 /** TODO: .k-file-view:has(.k-tabs) .k-file-preview  */
diff --git a/panel/src/components/Views/Users/UserProfile.vue b/panel/src/components/Views/Users/UserProfile.vue
index 2d2c780a6b..a913cfda23 100644
--- a/panel/src/components/Views/Users/UserProfile.vue
+++ b/panel/src/components/Views/Users/UserProfile.vue
@@ -55,7 +55,7 @@ export default {
 .k-user-profile {
 	--button-height: auto;
 	padding: var(--spacing-2);
-	background: var(--color-white);
+	background: var(--item-color-back);
 	border-radius: var(--rounded-lg);
 	display: flex;
 	align-items: center;
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 378199fac3..145f5502d1 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -3,13 +3,18 @@
 	--color-l-max: 100%;
 	--color-l-100: 98%;
 	--color-l-200: 94%;
+	--color-l-250: 91%;
 	--color-l-300: 88%;
 	--color-l-400: 80%;
 	--color-l-500: 70%;
 	--color-l-600: 60%;
 	--color-l-700: 45%;
+	--color-l-750: 40%;
 	--color-l-800: 30%;
+	--color-l-850: 21%;
 	--color-l-900: 15%;
+	--color-l-950: 11%;
+	--color-l-1000: 9%;
 	--color-l-min: 0%;
 
 	/* Colors */
@@ -221,39 +226,48 @@
 
 	--color-gray-l-100: calc(var(--color-l-100) + var(--color-gray-boost));
 	--color-gray-l-200: calc(var(--color-l-200) + var(--color-gray-boost));
+	--color-gray-l-250: calc(var(--color-l-250) + var(--color-gray-boost));
 	--color-gray-l-300: calc(var(--color-l-300) + var(--color-gray-boost));
 	--color-gray-l-400: calc(var(--color-l-400) + var(--color-gray-boost));
 	--color-gray-l-500: calc(var(--color-l-500) + var(--color-gray-boost));
 	--color-gray-l-600: calc(var(--color-l-600) + var(--color-gray-boost));
 	--color-gray-l-700: calc(var(--color-l-700) + var(--color-gray-boost));
+	--color-gray-l-750: calc(var(--color-l-750) + var(--color-gray-boost));
 	--color-gray-l-800: calc(var(--color-l-800) + var(--color-gray-boost));
+	--color-gray-l-850: calc(var(--color-l-850) + var(--color-gray-boost));
 	--color-gray-l-900: calc(var(--color-l-900) + var(--color-gray-boost));
+	--color-gray-l-950: calc(var(--color-l-950) + var(--color-gray-boost));
+	--color-gray-l-1000: calc(var(--color-l-1000) + var(--color-gray-boost));
 
 	--color-gray-100: hsl(var(--color-gray-hs), var(--color-gray-l-100));
 	--color-gray-200: hsl(var(--color-gray-hs), var(--color-gray-l-200));
-	--color-gray-250: #e8e8e8;
+	--color-gray-250: hsl(var(--color-gray-hs), var(--color-gray-l-250));
 	--color-gray-300: hsl(var(--color-gray-hs), var(--color-gray-l-300));
 	--color-gray-400: hsl(var(--color-gray-hs), var(--color-gray-l-400));
 	--color-gray-500: hsl(var(--color-gray-hs), var(--color-gray-l-500));
 	--color-gray-600: hsl(var(--color-gray-hs), var(--color-gray-l-600));
 	--color-gray-700: hsl(var(--color-gray-hs), var(--color-gray-l-700));
+	--color-gray-750: hsl(var(--color-gray-hs), var(--color-gray-l-750));
 	--color-gray-800: hsl(var(--color-gray-hs), var(--color-gray-l-800));
+	--color-gray-850: hsl(var(--color-gray-hs), var(--color-gray-l-850));
 	--color-gray-900: hsl(var(--color-gray-hs), var(--color-gray-l-900));
+	--color-gray-950: hsl(var(--color-gray-hs), var(--color-gray-l-950));
+	--color-gray-1000: hsl(var(--color-gray-hs), var(--color-gray-l-1000));
 
 	/** Shortcuts **/
 	--color-black: hsl(0, 0%, var(--color-l-min));
-	--color-border: var(--color-gray-300);
-	--color-border-dimmed: hsla(0, 0%, var(--color-l-min), 0.1);
+	--color-border: light-dark(var(--color-gray-300), var(--color-gray-800));
+	--color-border-dimmed: light-dark(hsla(0, 0%, var(--color-l-min), 0.1), var(--color-gray-850));
 	--color-dark: var(--color-gray-900);
 	--color-focus: var(--color-blue-600);
 	--color-light: var(--color-gray-200);
-	--color-text: var(--color-black);
-	--color-text-dimmed: var(--color-gray-700);
+	--color-text: light-dark(var(--color-black), var(--color-white));
+	--color-text-dimmed: light-dark(var(--color-gray-700), var(--color-gray-500));
 	--color-white: hsl(0, 0%, var(--color-l-max));
 
 	/** @deprecated */
 	--color-backdrop: rgba(0, 0, 0, 0.6);
-	--color-background: var(--color-light);
+	--color-background: var(--panel-color-back);
 	--color-gray: var(--color-gray-600);
 	--color-red: var(--color-red-600);
 	--color-orange: var(--color-orange-600);
@@ -276,19 +290,5 @@
 }
 
 :root:has(.k-panel[data-theme="dark"]) {
-	--color-l-max: 0%;
-	--color-l-100: 3%;
-	--color-l-200: 10%;
-	--color-l-300: 17%;
-	--color-l-400: 25%;
-	--color-l-500: 36%;
-	--color-l-600: 52%;
-	--color-l-700: 62%;
-	--color-l-800: 70%;
-	--color-l-900: 80%;
-	--color-l-min: 97%;
-
-	--color-gray-250: #0f0f0f;
-
 	color-scheme: dark;
 }
diff --git a/panel/src/styles/config/pattern.css b/panel/src/styles/config/pattern.css
index a6f29e9cbf..1551d3b54e 100644
--- a/panel/src/styles/config/pattern.css
+++ b/panel/src/styles/config/pattern.css
@@ -16,18 +16,3 @@
 	--pattern: var(--pattern-dark);
 }
 
-.k-panel[data-theme="dark"] {
-	--pattern-light: repeating-conic-gradient(
-			hsl(0, 0%, 90%) 0% 25%,
-			hsl(0, 0%, 80%) 0% 50%
-		)
-		50% / var(--pattern-size) var(--pattern-size);
-
-	--pattern-dark: repeating-conic-gradient(
-			hsla(0, 0%, 9%) 0% 25%,
-			hsl(0, 0%, 16%) 0% 50%
-		)
-		50% / var(--pattern-size) var(--pattern-size);
-
-	--pattern: var(--pattern-dark);
-}
diff --git a/panel/src/styles/reset/choice.css b/panel/src/styles/reset/choice.css
index bd0a4b6bd0..9e4d6f259a 100644
--- a/panel/src/styles/reset/choice.css
+++ b/panel/src/styles/reset/choice.css
@@ -1,6 +1,6 @@
 :root {
-	--choice-color-back: var(--color-white);
-	--choice-color-border: var(--color-gray-500);
+	--choice-color-back: light-dark(var(--color-white), var(--color-gray-850));
+	--choice-color-border: light-dark(var(--color-gray-500), var(--color-black));
 	--choice-color-checked: var(--color-black);
 	--choice-color-disabled: var(--color-gray-400);
 	--choice-color-icon: var(--color-light);
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index fcd4a8f1bf..0ef4f2e4bd 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -24,12 +24,13 @@
 	--theme-color-800: hsl(var(--theme-color-hs), var(--theme-color-l-800));
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
-	--theme-color-text: var(--theme-color-900);
+	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-300));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
 		calc(var(--theme-color-s) - 60%),
 		50%
 	);
+	--theme-color-text-highlight: var(--theme-color-900);
 	--theme-color-back: var(--theme-color-400);
 	--theme-color-hover: var(--theme-color-500);
 	--theme-color-icon: var(--theme-color-600);
@@ -100,9 +101,10 @@
 
 [data-theme^="white"],
 [data-theme^="text"] {
-	--theme-color-back: var(--color-white);
+	--theme-color-back: light-dark(var(--color-white), var(--color-gray-950));
 	--theme-color-icon: var(--color-gray-800);
 	--theme-color-text: var(--color-text);
+	--theme-color-text-highlight: var(--theme-color-text);
 	--color-h: var(--color-black);
 }
 
@@ -114,6 +116,7 @@
 	--theme-color-back: var(--color-gray-800);
 	--theme-color-icon: var(--color-gray-500);
 	--theme-color-text: var(--color-gray-200);
+	--theme-color-text-highlight: var(--theme-color-text);
 }
 
 [data-theme="code"] {
@@ -121,15 +124,17 @@
 	--theme-color-hover: var(--color-black);
 	--theme-color-icon: var(--code-color-icon);
 	--theme-color-text: var(--code-color-text);
+	--theme-color-text-highlight: var(--theme-color-text);
 	font-family: var(--code-font-family);
 	font-size: var(--code-font-size);
 }
 
 [data-theme="empty"] {
-	--theme-color-back: var(--color-light);
-	--theme-color-border: var(--color-gray-400);
+	--theme-color-back: var(--panel-color-back);
+	--theme-color-border: light-dark(var(--color-gray-400), var(--color-border));
 	--theme-color-icon: var(--color-gray-600);
 	--theme-color-text: var(--color-text-dimmed);
+	--theme-color-text-highlight: var(--theme-color-text);
 	border: 1px dashed var(--theme-color-border);
 }
 

From c952d721f2850466c89563877d75c5bcca0f6d30 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Thu, 28 Nov 2024 22:12:22 +0100
Subject: [PATCH 02/19] Additional dark mode changes

---
 panel/src/components/Collection/Item.vue                   | 2 +-
 panel/src/components/Dialogs/Elements/Search.vue           | 2 +-
 panel/src/components/Drawers/Elements/Header.vue           | 2 +-
 panel/src/components/Forms/Blocks/Block.vue                | 2 +-
 panel/src/components/Forms/Blocks/BlockSelector.vue        | 2 +-
 panel/src/components/Forms/Blocks/Elements/BlockFigure.vue | 2 +-
 panel/src/components/Forms/Previews/UrlFieldPreview.vue    | 2 +-
 panel/src/components/Layout/Stat.vue                       | 2 +-
 panel/src/components/Layout/Table.vue                      | 6 +++---
 panel/src/components/Navigation/Button.vue                 | 2 ++
 panel/src/components/Navigation/ButtonGroup.vue            | 4 ++--
 panel/src/components/Navigation/Tag.vue                    | 2 +-
 panel/src/components/Text/Label.vue                        | 2 +-
 panel/src/components/Text/Text.vue                         | 4 ++++
 panel/src/components/Views/Login/LoginView.vue             | 4 ++--
 panel/src/components/Views/PreviewView.vue                 | 2 +-
 panel/src/styles/config/shadow.css                         | 6 +++++-
 panel/src/styles/utilities/theme.css                       | 7 ++++---
 18 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index 4ae3425864..4835b21d8c 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -140,7 +140,7 @@ export default {
 :root {
 	--item-button-height: var(--height-md);
 	--item-button-width: var(--height-md);
-	--item-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--item-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--item-height: auto;
 	--item-height-cardlet: calc(var(--height-md) * 3);
 }
diff --git a/panel/src/components/Dialogs/Elements/Search.vue b/panel/src/components/Dialogs/Elements/Search.vue
index f55c23b235..c5993d09ec 100644
--- a/panel/src/components/Dialogs/Elements/Search.vue
+++ b/panel/src/components/Dialogs/Elements/Search.vue
@@ -37,6 +37,6 @@ export default {
 .k-dialog-search {
 	margin-bottom: 0.75rem;
 	--input-color-border: transparent;
-	--input-color-back: var(--color-gray-300);
+	--input-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
 }
 </style>
diff --git a/panel/src/components/Drawers/Elements/Header.vue b/panel/src/components/Drawers/Elements/Header.vue
index 97cdd858d8..8d57627a57 100644
--- a/panel/src/components/Drawers/Elements/Header.vue
+++ b/panel/src/components/Drawers/Elements/Header.vue
@@ -68,7 +68,7 @@ export default {
 	align-items: center;
 	line-height: 1;
 	justify-content: space-between;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-850));
 	font-size: var(--text-sm);
 }
 
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
index 11daefecf1..f3bdb36b2f 100644
--- a/panel/src/components/Forms/Blocks/Block.vue
+++ b/panel/src/components/Forms/Blocks/Block.vue
@@ -366,7 +366,7 @@ export default {
 	border-radius: var(--rounded);
 }
 .k-block-container:not(:last-of-type) {
-	border-bottom: 1px dashed var(--color-border-dimmed);
+	border-bottom: 1px dashed var(--panel-color-back);
 }
 .k-block-container:focus {
 	outline: 0;
diff --git a/panel/src/components/Forms/Blocks/BlockSelector.vue b/panel/src/components/Forms/Blocks/BlockSelector.vue
index b42cc5c0e7..40bc8cd8ce 100644
--- a/panel/src/components/Forms/Blocks/BlockSelector.vue
+++ b/panel/src/components/Forms/Blocks/BlockSelector.vue
@@ -157,7 +157,7 @@ export default {
 }
 .k-block-types .k-button {
 	--button-color-icon: var(--color-text);
-	--button-color-back: var(--color-white);
+	--button-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--button-padding: var(--spacing-3);
 	width: 100%;
 	justify-content: start;
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
index e35483fcd3..c67b912b7e 100644
--- a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
+++ b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -52,7 +52,7 @@ export default {
 
 <style>
 .k-block-figure:not([data-empty="true"]) {
-	--block-figure-back: var(--color-white);
+	--block-figure-back: var(--block-color-back);
 	background: var(--block-figure-back);
 }
 .k-block-figure-container:not([data-disabled="true"]) {
diff --git a/panel/src/components/Forms/Previews/UrlFieldPreview.vue b/panel/src/components/Forms/Previews/UrlFieldPreview.vue
index 92a6a64a16..08ac43b65a 100644
--- a/panel/src/components/Forms/Previews/UrlFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/UrlFieldPreview.vue
@@ -60,6 +60,6 @@ export default {
 	text-underline-offset: var(--link-underline-offset);
 }
 .k-url-field-preview a:hover {
-	color: var(--color-black);
+	color: var(--link-color-hover);
 }
 </style>
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index df424656a1..cd21873b96 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -83,7 +83,7 @@ export default {
 <style>
 :root {
 	--stat-color-back: var(--item-color-back);
-	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
+	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-850));
 	--stat-info-text-color: var(--color-text-dimmed);
 	--stat-value-text-size: var(--text-2xl);
 }
diff --git a/panel/src/components/Layout/Table.vue b/panel/src/components/Layout/Table.vue
index ed0f397887..44cde91f1d 100644
--- a/panel/src/components/Layout/Table.vue
+++ b/panel/src/components/Layout/Table.vue
@@ -370,10 +370,10 @@ export default {
 <style>
 :root {
 	--table-cell-padding: var(--spacing-3);
-	--table-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--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), var(--color-gray-1000));
-	--table-color-th-back: light-dark(var(--color-gray-100), var(--color-gray-1000));
+	--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-th-text: var(--color-text-dimmed);
 	--table-row-height: var(--input-height);
 }
diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index d9a971fd8e..2cd4a34eb8 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -314,6 +314,7 @@ export default {
 .k-button:where([data-variant="filled"][data-theme]) {
 	--button-color-icon: var(--theme-color-700);
 	--button-color-back: var(--theme-color-back);
+	--button-color-text: var(--theme-color-text-highlight);
 }
 .k-button:where([data-theme$="-icon"][data-variant="filled"]) {
 	--button-color-icon: hsl(
@@ -321,6 +322,7 @@ export default {
 		57%
 	); /* slightly improve the contrast */
 	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--button-color-text: currentColor;
 }
 
 /** Icon Buttons **/
diff --git a/panel/src/components/Navigation/ButtonGroup.vue b/panel/src/components/Navigation/ButtonGroup.vue
index 2db276e43c..82a9fc7e2c 100644
--- a/panel/src/components/Navigation/ButtonGroup.vue
+++ b/panel/src/components/Navigation/ButtonGroup.vue
@@ -85,13 +85,13 @@ export default {
 }
 
 .k-button-group[data-layout="collapsed"] > .k-button:not([data-theme]) {
-	--theme-color-500: var(--panel-color-back);
+	--theme-color-border: var(--panel-color-back);
 }
 .k-button-group[data-layout="collapsed"]
 	> .k-button[data-variant="filled"]:not(:first-child) {
 	border-start-start-radius: 0;
 	border-end-start-radius: 0;
-	border-left: 1px solid var(--theme-color-500);
+	border-left: 1px solid var(--theme-color-border);
 }
 
 .k-button-group[data-layout="collapsed"]
diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index b2da0fe058..f1bd24e333 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -116,7 +116,7 @@ export default {
 
 <style>
 :root {
-	--tag-color-back: var(--color-black);
+	--tag-color-back: var(--color-gray-950);
 	--tag-color-text: var(--color-white);
 	--tag-color-toggle: currentColor;
 	--tag-color-disabled-back: var(--color-gray-600);
diff --git a/panel/src/components/Text/Label.vue b/panel/src/components/Text/Label.vue
index 42b71f6ec4..a0ce6bdb3c 100644
--- a/panel/src/components/Text/Label.vue
+++ b/panel/src/components/Text/Label.vue
@@ -106,7 +106,7 @@ export default {
 
 .k-label abbr.k-label-invalid {
 	display: none;
-	color: var(--color-red-700);
+	color: light-dark(var(--color-red-700), var(--color-red-600));
 }
 
 /** Tracking invalid via CSS */
diff --git a/panel/src/components/Text/Text.vue b/panel/src/components/Text/Text.vue
index 304233e38a..a4ded50481 100644
--- a/panel/src/components/Text/Text.vue
+++ b/panel/src/components/Text/Text.vue
@@ -50,6 +50,7 @@ export default {
 	--text-font-size: 1em;
 	--text-line-height: 1.5;
 	--link-color: light-dark(var(--color-blue-800), var(--color-blue-600));
+	--link-color-hover: light-dark(var(--color-black), var(--color-white));
 	--link-underline-offset: 2px;
 }
 
@@ -114,6 +115,9 @@ export default {
 	border-radius: var(--rounded-xs);
 	outline-offset: 2px;
 }
+.k-text :where(.k-link, a):hover {
+	color: var(--link-color-hover);
+}
 
 /* Lists */
 .k-text ol,
diff --git a/panel/src/components/Views/Login/LoginView.vue b/panel/src/components/Views/Login/LoginView.vue
index 511bc00495..b6eca78134 100644
--- a/panel/src/components/Views/Login/LoginView.vue
+++ b/panel/src/components/Views/Login/LoginView.vue
@@ -91,8 +91,8 @@ export default {
 
 <style>
 .k-login {
-	--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;
 }
diff --git a/panel/src/components/Views/PreviewView.vue b/panel/src/components/Views/PreviewView.vue
index 27df5f55aa..386142d2ef 100644
--- a/panel/src/components/Views/PreviewView.vue
+++ b/panel/src/components/Views/PreviewView.vue
@@ -209,7 +209,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	padding: var(--spacing-6);
-	background: var(--color-gray-200);
+	background: var(--panel-color-back);
 }
 .k-preview-view-panel header {
 	container-type: inline-size;
diff --git a/panel/src/styles/config/shadow.css b/panel/src/styles/config/shadow.css
index aa0c19f173..93e6a310ca 100644
--- a/panel/src/styles/config/shadow.css
+++ b/panel/src/styles/config/shadow.css
@@ -1,5 +1,5 @@
 :root {
-	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
+	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
 		0 2px 4px -1px rgba(0, 0, 0, 0.05);
 	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -21,3 +21,7 @@
 	--shadow-dropdown: var(--shadow-lg);
 	--shadow-item: var(--shadow-sm);
 }
+
+:root:has(.k-panel[data-theme="dark"]) {
+	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
+}
\ No newline at end of file
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 0ef4f2e4bd..42b17c58c4 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -24,6 +24,7 @@
 	--theme-color-800: hsl(var(--theme-color-hs), var(--theme-color-l-800));
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
+	--theme-color-border: light-dark(var(--theme-color-500), var(--theme-color-600));
 	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-300));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
@@ -31,9 +32,9 @@
 		50%
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
-	--theme-color-back: var(--theme-color-400);
+	--theme-color-back: var(--theme-color-500);
 	--theme-color-hover: var(--theme-color-500);
-	--theme-color-icon: var(--theme-color-600);
+	--theme-color-icon: light-dark(var(--theme-color-700), var(--theme-color-600));
 }
 
 /* Color themes */
@@ -101,7 +102,7 @@
 
 [data-theme^="white"],
 [data-theme^="text"] {
-	--theme-color-back: light-dark(var(--color-white), var(--color-gray-950));
+	--theme-color-back: light-dark(var(--color-white), var(--color-gray-850));
 	--theme-color-icon: var(--color-gray-800);
 	--theme-color-text: var(--color-text);
 	--theme-color-text-highlight: var(--theme-color-text);

From 089f79b1a054616d43e3aa9f3bbafdd00812f200 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Thu, 28 Nov 2024 22:37:32 +0100
Subject: [PATCH 03/19] Tweak the l values

---
 panel/src/styles/config/colors.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 145f5502d1..afbcc19ec7 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -291,4 +291,21 @@
 
 :root:has(.k-panel[data-theme="dark"]) {
 	color-scheme: dark;
+
+	--color-l-max: 100%;
+	--color-l-100: 98%;
+	--color-l-200: 94%;
+	--color-l-250: 90%;
+	--color-l-300: 85%;
+	--color-l-400: 75%;
+	--color-l-500: 65%;
+	--color-l-600: 50%;
+	--color-l-700: 40%;
+	--color-l-750: 35%;
+	--color-l-800: 25%;
+	--color-l-850: 18%;
+	--color-l-900: 13%;
+	--color-l-950: 8%;
+	--color-l-1000: 5%;
+	--color-l-min: 0%;
 }

From 72c4ce1411121e0795708c4b78fc35b499b62d3a Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Thu, 28 Nov 2024 22:37:44 +0100
Subject: [PATCH 04/19] Fix the layout field

---
 panel/src/components/Forms/Layouts/Layout.vue       | 12 +++++-------
 panel/src/components/Forms/Layouts/LayoutColumn.vue |  4 +---
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/panel/src/components/Forms/Layouts/Layout.vue b/panel/src/components/Forms/Layouts/Layout.vue
index f530d41cb5..5f205a7b20 100644
--- a/panel/src/components/Forms/Layouts/Layout.vue
+++ b/panel/src/components/Forms/Layouts/Layout.vue
@@ -182,17 +182,15 @@ export default {
 .k-layout {
 	--layout-border-color: var(--color-gray-300);
 	--layout-toolbar-width: 2rem;
-
 	position: relative;
 	padding-inline-end: var(--layout-toolbar-width);
-	background: #fff;
 	box-shadow: var(--shadow);
 }
 [data-disabled="true"] .k-layout {
 	padding-inline-end: 0;
 }
 .k-layout:not(:last-of-type) {
-	margin-bottom: 1px;
+	margin-bottom: var(--spacing-2);
 }
 .k-layout:focus {
 	outline: 0;
@@ -209,12 +207,13 @@ export default {
 	justify-content: space-between;
 	padding-bottom: var(--spacing-2);
 	font-size: var(--text-sm);
-	background: var(--color-gray-100);
+	background: light-dark(var(--color-gray-100), var(--color-gray-850));
 	border-inline-start: 1px solid var(--panel-color-back);
 	color: var(--color-gray-500);
+	border-radius: var(--rounded);
 }
 .k-layout-toolbar:hover {
-	color: var(--color-black);
+	color: light-dark(var(--color-black), var(--color-white));
 }
 .k-layout-toolbar-button {
 	width: var(--layout-toolbar-width);
@@ -224,8 +223,7 @@ export default {
 /** Columns **/
 .k-layout-columns.k-grid {
 	grid-gap: 1px;
-	background: var(--layout-border-color);
-	background: var(--color-gray-300);
+	background: var(--panel-color-back);
 }
 .k-layout:not(:first-child) .k-layout-columns.k-grid {
 	border-top: 0;
diff --git a/panel/src/components/Forms/Layouts/LayoutColumn.vue b/panel/src/components/Forms/Layouts/LayoutColumn.vue
index 476cdf9510..3a99952bbd 100644
--- a/panel/src/components/Forms/Layouts/LayoutColumn.vue
+++ b/panel/src/components/Forms/Layouts/LayoutColumn.vue
@@ -61,18 +61,16 @@ export default {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
-	background: var(--color-white);
 	min-height: 6rem;
 }
 .k-layout-column:focus {
 	outline: 0;
 }
 .k-layout-column > .k-blocks {
-	background: none;
 	box-shadow: none;
 	padding: 0;
 	height: 100%;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-850));
 	min-height: 4rem;
 }
 .k-layout-column > .k-blocks[data-empty="true"] {

From 0945cb83fd0eb759657a1d84ed498d1cc8ee5a48 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 09:27:21 +0100
Subject: [PATCH 05/19] Adjusted dropdowns, shadows and block toolbar

---
 .../components/Dropdowns/DropdownContent.vue  |  6 ++---
 panel/src/components/Forms/Blocks/Block.vue   |  2 +-
 .../components/Forms/Blocks/BlockOptions.vue  |  6 ++---
 .../src/components/Forms/Toolbar/Toolbar.vue  |  4 +--
 panel/src/styles/config/shadow.css            | 26 +++++++++++++------
 5 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/panel/src/components/Dropdowns/DropdownContent.vue b/panel/src/components/Dropdowns/DropdownContent.vue
index 5665202d27..6d503216b9 100644
--- a/panel/src/components/Dropdowns/DropdownContent.vue
+++ b/panel/src/components/Dropdowns/DropdownContent.vue
@@ -343,9 +343,9 @@ export default {
 
 <style>
 :root {
-	--dropdown-color-bg: var(--color-black);
+	--dropdown-color-bg: var(--color-gray-950);
 	--dropdown-color-current: var(--color-blue-500);
-	--dropdown-color-hr: hsla(0, 0%, var(--color-l-max), 0.25);
+	--dropdown-color-hr: var(--color-gray-850);
 	--dropdown-color-text: var(--color-white);
 	--dropdown-padding: var(--spacing-2);
 	--dropdown-rounded: var(--rounded);
@@ -391,7 +391,7 @@ export default {
 .k-dropdown-content[data-theme="light"] {
 	--dropdown-color-bg: var(--color-white);
 	--dropdown-color-current: var(--color-blue-800);
-	--dropdown-color-hr: var(--color-border-dimmed);
+	--dropdown-color-hr: var(--color-gray-250);
 	--dropdown-color-text: var(--color-black);
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
index f3bdb36b2f..d3e95fd133 100644
--- a/panel/src/components/Forms/Blocks/Block.vue
+++ b/panel/src/components/Forms/Blocks/Block.vue
@@ -418,6 +418,6 @@ export default {
 	content: "";
 	height: 2rem;
 	width: 100%;
-	background: linear-gradient(to top, var(--color-white), transparent);
+	background: linear-gradient(to top, var(--block-color-back), transparent);
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/BlockOptions.vue b/panel/src/components/Forms/Blocks/BlockOptions.vue
index f7d090dcee..aefd6dc11e 100644
--- a/panel/src/components/Forms/Blocks/BlockOptions.vue
+++ b/panel/src/components/Forms/Blocks/BlockOptions.vue
@@ -203,11 +203,11 @@ export default {
 <style>
 .k-block-options {
 	--toolbar-size: 30px;
-
-	box-shadow: var(--shadow-toolbar);
+	border: 1px solid light-dark(var(--color-border), var(--color-gray-900));
+	box-shadow: var(--shadow-xl);
 }
 .k-block-options > .k-button:not(:last-of-type) {
-	border-inline-end: 1px solid var(--panel-color-back);
+	border-inline-end: 1px solid var(--toolbar-border);
 }
 .k-block-options .k-dropdown-content {
 	margin-top: 0.5rem;
diff --git a/panel/src/components/Forms/Toolbar/Toolbar.vue b/panel/src/components/Forms/Toolbar/Toolbar.vue
index 0e2a980bc2..ca2a7af104 100644
--- a/panel/src/components/Forms/Toolbar/Toolbar.vue
+++ b/panel/src/components/Forms/Toolbar/Toolbar.vue
@@ -81,8 +81,8 @@ export default {
 <style>
 :root {
 	--toolbar-size: var(--height);
-	--toolbar-text: var(--color-black);
-	--toolbar-back: var(--color-white);
+	--toolbar-text: light-dark(var(--color-black), var(--color-white));
+	--toolbar-back: light-dark(var(--color-white), var(--color-gray-850));
 	--toolbar-hover: hsla(0, 0%, var(--color-l-min), 0.4);
 	--toolbar-border: hsla(0, 100%, var(--color-l-min), 0.1);
 	--toolbar-current: var(--color-focus);
diff --git a/panel/src/styles/config/shadow.css b/panel/src/styles/config/shadow.css
index 93e6a310ca..b1f5a2c2ce 100644
--- a/panel/src/styles/config/shadow.css
+++ b/panel/src/styles/config/shadow.css
@@ -1,11 +1,16 @@
 :root {
-	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.025);
-	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-		0 2px 4px -1px rgba(0, 0, 0, 0.05);
-	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
-		0 4px 6px -2px rgba(0, 0, 0, 0.05);
-	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-		0 10px 10px -5px rgba(0, 0, 0, 0.05);
+	--shadow-sm:
+			0 1px 3px 0 rgba(0, 0, 0, 0.1),
+			0 1px 2px 0 rgba(0, 0, 0, 0.025);
+	--shadow-md:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.05);
+	--shadow-lg:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--shadow-xl:
+			0 20px 25px -5px rgba(0, 0, 0, 0.1),
+			0 10px 10px -5px rgba(0, 0, 0, 0.05);
 
 	--shadow: var(--shadow-sm);
 	--shadow-toolbar: rgba(0, 0, 0, 0.1) -2px 0 5px, var(--shadow),
@@ -23,5 +28,10 @@
 }
 
 :root:has(.k-panel[data-theme="dark"]) {
-	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.125);
+	--shadow-sm:
+			0 1px 3px 0 rgba(0, 0, 0, 0.2),
+			0 1px 2px 0 rgba(0, 0, 0, 0.125);
+	--shadow-xl:
+			0 20px 25px -5px rgba(0, 0, 0, 0.4),
+			0 10px 10px -5px rgba(0, 0, 0, 0.35);
 }
\ No newline at end of file

From 1f288b005f3b4b124e0c7e389ba669ac4bb53cf5 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Fri, 29 Nov 2024 11:17:45 +0100
Subject: [PATCH 06/19] Polyfill for `light-dark()`

---
 panel/package-lock.json | 129 ++++++++++++++++++++++++++++++++++++++++
 panel/package.json      |   1 +
 panel/vite.config.mjs   |   6 ++
 3 files changed, 136 insertions(+)

diff --git a/panel/package-lock.json b/panel/package-lock.json
index d91253e7a7..a6f2f07de4 100644
--- a/panel/package-lock.json
+++ b/panel/package-lock.json
@@ -21,6 +21,7 @@
 				"vue": "^2.7.16"
 			},
 			"devDependencies": {
+				"@csstools/postcss-light-dark-function": "^2.0.7",
 				"@vitejs/plugin-vue2": "^2.3.1",
 				"eslint": "^9.15.0",
 				"eslint-config-prettier": "^9.1.0",
@@ -84,6 +85,127 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@csstools/css-parser-algorithms": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz",
+			"integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-tokenizer": "^3.0.3"
+			}
+		},
+		"node_modules/@csstools/css-tokenizer": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz",
+			"integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@csstools/postcss-light-dark-function": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.7.tgz",
+			"integrity": "sha512-ZZ0rwlanYKOHekyIPaU+sVm3BEHCe+Ha0/px+bmHe62n0Uc1lL34vbwrLYn6ote8PHlsqzKeTQdIejQCJ05tfw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"dependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.4",
+				"@csstools/css-tokenizer": "^3.0.3",
+				"@csstools/postcss-progressive-custom-properties": "^4.0.0",
+				"@csstools/utilities": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
+		"node_modules/@csstools/postcss-progressive-custom-properties": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.0.0.tgz",
+			"integrity": "sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
+		"node_modules/@csstools/utilities": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-2.0.0.tgz",
+			"integrity": "sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -3401,6 +3523,13 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/panel/package.json b/panel/package.json
index f2f34f9a7d..21c981d67d 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -26,6 +26,7 @@
 		"vue": "^2.7.16"
 	},
 	"devDependencies": {
+		"@csstools/postcss-light-dark-function": "^2.0.7",
 		"@vitejs/plugin-vue2": "^2.3.1",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",
diff --git a/panel/vite.config.mjs b/panel/vite.config.mjs
index 6655305e57..f09023dba2 100644
--- a/panel/vite.config.mjs
+++ b/panel/vite.config.mjs
@@ -6,6 +6,7 @@ import vue from "@vitejs/plugin-vue2";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 import externalize from "rollup-plugin-external-globals";
 import kirby from "./scripts/vite-kirby.mjs";
+import postcssLightDarkFunction from "@csstools/postcss-light-dark-function";
 
 /**
  * Returns all aliases used in the project
@@ -122,6 +123,11 @@ export default defineConfig(({ mode }) => {
 				}
 			}
 		},
+		css: {
+			postcss: {
+				plugins: [postcssLightDarkFunction()]
+			}
+		},
 		optimizeDeps: {
 			entries: "src/**/*.{js,vue}",
 			exclude: ["vitest", "vue"],

From cb005e6fbc94d14f4ee6f104be9cae028df9d02c Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 09:41:15 +0100
Subject: [PATCH 07/19] Fix sort handle

---
 panel/src/components/Collection/Item.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index 4835b21d8c..73b27faef6 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -253,6 +253,7 @@ export default {
 .k-item:is([data-layout="cardlets"], [data-layout="cards"]) .k-sort-button {
 	top: var(--spacing-2);
 	inset-inline-start: var(--spacing-2);
+	color: var(--color-black);
 	background: hsla(0, 0%, var(--color-l-max), 50%);
 	backdrop-filter: blur(5px);
 	box-shadow: 0 2px 5px hsla(0, 0%, 0%, 20%);

From 2dca5079d2dc6670ddb03ba1236815d2fc81a3e1 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 09:41:22 +0100
Subject: [PATCH 08/19] Fix kbd

---
 panel/src/styles/reset.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/styles/reset.css b/panel/src/styles/reset.css
index 72320b82a2..50595f99fd 100644
--- a/panel/src/styles/reset.css
+++ b/panel/src/styles/reset.css
@@ -207,6 +207,6 @@ body {
 	display: inline-block;
 	padding-inline: var(--spacing-2);
 	border-radius: var(--rounded);
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-black));
 	box-shadow: var(--shadow);
 }

From 4c2dfb786902aff361759779cff073542b2fbf2c Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 09:41:33 +0100
Subject: [PATCH 09/19] Stronger themed text colors

---
 panel/src/styles/utilities/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 42b17c58c4..ccdd7ef8ba 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -25,7 +25,7 @@
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
 	--theme-color-border: light-dark(var(--theme-color-500), var(--theme-color-600));
-	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-300));
+	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-400));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
 		calc(var(--theme-color-s) - 60%),

From 61123e2d3b8e87dcd31f2b2248ad4ef9c9321ab6 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 09:41:40 +0100
Subject: [PATCH 10/19] Fixed colors in system view

---
 panel/src/components/Views/System/SystemSecurity.vue | 2 +-
 panel/src/components/Views/System/SystemView.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/components/Views/System/SystemSecurity.vue b/panel/src/components/Views/System/SystemSecurity.vue
index 112ace8aaa..90486478b1 100644
--- a/panel/src/components/Views/System/SystemSecurity.vue
+++ b/panel/src/components/Views/System/SystemSecurity.vue
@@ -15,7 +15,7 @@
 				issues.map((issue) => ({
 					// give each message an image prop unless it already has one
 					image: {
-						back: 'var(--color-red-200)',
+						back: 'light-dark(var(--color-red-200), transparent)',
 						icon: issue.icon ?? 'alert',
 						color: 'var(--color-red)'
 					},
diff --git a/panel/src/components/Views/System/SystemView.vue b/panel/src/components/Views/System/SystemView.vue
index 0859b91603..7dd40a07c8 100644
--- a/panel/src/components/Views/System/SystemView.vue
+++ b/panel/src/components/Views/System/SystemView.vue
@@ -85,6 +85,6 @@ export default {
 
 <style>
 .k-system-info .k-stat-label {
-	color: var(--theme, var(--color-black));
+	color: var(--theme-color-text, currentColor);
 }
 </style>

From 36a55003d89ac26f1909c3c3f5e191c371e3bcb6 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 11:24:15 +0100
Subject: [PATCH 11/19] Various additional fixes

---
 .../lab/components/browsers/browser/index.vue |  6 -----
 .../components/Forms/Blocks/Types/Fields.vue  |  2 +-
 .../components/Forms/Blocks/Types/Gallery.vue |  2 +-
 .../components/Forms/Blocks/Types/Quote.vue   |  2 +-
 .../components/Forms/Blocks/Types/Table.vue   |  2 +-
 panel/src/components/Forms/Counter.vue        | 10 +++----
 .../src/components/Forms/Field/LinkField.vue  | 11 ++++----
 .../src/components/Forms/Input/RangeInput.vue |  1 -
 .../components/Forms/Input/TogglesInput.vue   |  5 ++--
 .../Forms/Previews/LinkFieldPreview.vue       |  4 +--
 panel/src/components/Lab/DocsTypes.vue        | 26 +++++++++----------
 panel/src/components/Lab/Example.vue          |  4 +--
 .../components/Layout/Frame/ColorFrame.vue    |  3 +++
 panel/src/components/Layout/Stat.vue          |  2 +-
 panel/src/components/Misc/Progress.vue        |  2 +-
 panel/src/components/Navigation/Browser.vue   | 24 ++++++++++++-----
 panel/src/components/Navigation/Button.vue    |  6 ++---
 .../src/components/Navigation/FileBrowser.vue | 10 ++++---
 panel/src/components/Navigation/Tree.vue      | 23 +++++++++-------
 panel/src/components/Text/Code.vue            |  2 +-
 panel/src/components/Text/Highlight.vue       | 16 ++++++------
 panel/src/components/Text/Label.vue           |  4 +--
 panel/src/components/Text/Text.vue            |  2 +-
 panel/src/components/Uploads/UploadItem.vue   | 19 +++++++-------
 panel/src/styles/reset/range.css              |  2 +-
 panel/src/styles/utilities/theme.css          |  4 ++-
 src/Panel/Lab/Docs.php                        |  2 +-
 src/Panel/Lab/Example.php                     |  2 +-
 28 files changed, 108 insertions(+), 90 deletions(-)

diff --git a/panel/lab/components/browsers/browser/index.vue b/panel/lab/components/browsers/browser/index.vue
index 216d7851ec..caa9e9f415 100644
--- a/panel/lab/components/browsers/browser/index.vue
+++ b/panel/lab/components/browsers/browser/index.vue
@@ -32,10 +32,4 @@ export default {
 .k-lab-example .k-headline {
 	margin-bottom: 0.5rem;
 }
-.k-lab-example .k-browser {
-	border: 1px solid var(--color-border);
-	background: var(--color-white);
-	border-radius: var(--rounded);
-	padding: var(--spacing-2);
-}
 </style>
diff --git a/panel/src/components/Forms/Blocks/Types/Fields.vue b/panel/src/components/Forms/Blocks/Types/Fields.vue
index 6f17e0c007..5bdce1167e 100644
--- a/panel/src/components/Forms/Blocks/Types/Fields.vue
+++ b/panel/src/components/Forms/Blocks/Types/Fields.vue
@@ -102,7 +102,7 @@ export default {
 }
 
 .k-block-type-fields-form {
-	background-color: var(--color-gray-200);
+	background-color: var(--panel-color-back);
 	padding: var(--spacing-6) var(--spacing-6) var(--spacing-8);
 	border-radius: var(--rounded-sm);
 	container: column / inline-size;
diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
index 071b0265cd..eb00a53518 100644
--- a/panel/src/components/Forms/Blocks/Types/Gallery.vue
+++ b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -104,7 +104,7 @@ export default {
 }
 
 .k-block-type-gallery[data-disabled="true"] .k-block-type-gallery-placeholder {
-	background: var(--color-gray-250);
+	background: light-dark(var(--color-gray-250), var(--color-gray-950));
 }
 .k-block-type-gallery-placeholder {
 	background: var(--panel-color-back);
diff --git a/panel/src/components/Forms/Blocks/Types/Quote.vue b/panel/src/components/Forms/Blocks/Types/Quote.vue
index 3b4e926c52..d0e1f124fa 100644
--- a/panel/src/components/Forms/Blocks/Types/Quote.vue
+++ b/panel/src/components/Forms/Blocks/Types/Quote.vue
@@ -50,7 +50,7 @@ export default {
 <style>
 .k-block-type-quote-editor {
 	padding-inline-start: var(--spacing-3);
-	border-inline-start: 2px solid var(--color-black);
+	border-inline-start: 2px solid light-dark(var(--color-black), var(--color-border));
 }
 .k-block-type-quote-text {
 	font-size: var(--text-xl);
diff --git a/panel/src/components/Forms/Blocks/Types/Table.vue b/panel/src/components/Forms/Blocks/Types/Table.vue
index 1959455e72..5ba28dc606 100644
--- a/panel/src/components/Forms/Blocks/Types/Table.vue
+++ b/panel/src/components/Forms/Blocks/Types/Table.vue
@@ -65,7 +65,7 @@ export default {
 <style>
 .k-block-type-table-preview {
 	cursor: pointer;
-	border: 1px solid var(--color-gray-300);
+	border: 1px solid var(--color-border);
 	border-spacing: 0;
 	border-radius: var(--rounded-sm);
 }
diff --git a/panel/src/components/Forms/Counter.vue b/panel/src/components/Forms/Counter.vue
index 20414bc65d..dce01beab5 100644
--- a/panel/src/components/Forms/Counter.vue
+++ b/panel/src/components/Forms/Counter.vue
@@ -1,5 +1,5 @@
 <template>
-	<span :data-invalid="!valid" class="k-counter">
+	<span :data-invalid="!valid" :data-theme="valid ? 'positive' : 'negative'" class="k-counter">
 		<span>{{ count }}</span>
 
 		<span v-if="min || max" class="k-counter-rules">
@@ -53,13 +53,13 @@ export default {
 <style>
 .k-counter {
 	font-size: var(--text-xs);
-	color: var(--color-gray-900);
+	color: var(--color-text);
 }
-.k-counter[data-invalid="true"] {
-	color: var(--color-red-700);
+.k-counter[data-theme] {
+	color: var(--theme-color-text);
 }
 .k-counter-rules {
-	color: var(--color-gray-600);
+	color: var(--color-text-dimmed);
 	padding-inline-start: 0.5rem;
 }
 </style>
diff --git a/panel/src/components/Forms/Field/LinkField.vue b/panel/src/components/Forms/Field/LinkField.vue
index cf5feca861..b3bb201e6d 100644
--- a/panel/src/components/Forms/Field/LinkField.vue
+++ b/panel/src/components/Forms/Field/LinkField.vue
@@ -275,7 +275,7 @@ export default {
 .k-link-input-toggle.k-button {
 	--button-height: var(--height-sm);
 	--button-rounded: var(--rounded-sm);
-	--button-color-back: var(--color-gray-200);
+	--button-color-back: var(--panel-color-back);
 	margin-inline-start: 0.25rem;
 }
 
@@ -320,10 +320,11 @@ export default {
 .k-link-input-body {
 	display: grid;
 	overflow: hidden;
-	border-top: 1px solid var(--color-gray-300);
-	background: var(--color-gray-100);
-	--tree-color-back: var(--color-gray-100);
-	--tree-color-hover-back: var(--color-gray-200);
+	border-top: 1px solid var(--color-border);
+	background: var(--input-color-back);
+	--tree-color-back: var(--input-color-back);
+	--tree-branch-color-back: var(--input-color-back);
+	--tree-branch-hover-color-back: var(--panel-color-back);
 }
 
 .k-link-input-body[data-type="page"] .k-page-browser {
diff --git a/panel/src/components/Forms/Input/RangeInput.vue b/panel/src/components/Forms/Input/RangeInput.vue
index 1f1a8c3856..88da874ad3 100644
--- a/panel/src/components/Forms/Input/RangeInput.vue
+++ b/panel/src/components/Forms/Input/RangeInput.vue
@@ -155,7 +155,6 @@ export default {
 <style>
 .k-range-input {
 	--range-track-height: 1px;
-	--range-track-back: var(--color-gray-300);
 	--range-tooltip-back: var(--color-black);
 
 	display: flex;
diff --git a/panel/src/components/Forms/Input/TogglesInput.vue b/panel/src/components/Forms/Input/TogglesInput.vue
index 5e1ec9f41c..3a72c4ee6d 100644
--- a/panel/src/components/Forms/Input/TogglesInput.vue
+++ b/panel/src/components/Forms/Input/TogglesInput.vue
@@ -112,11 +112,10 @@ export default {
 
 .k-toggles-input li {
 	height: var(--field-input-height);
-	background: var(--color-white);
 }
 .k-toggles-input label {
 	align-items: center;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-gray-850));
 	cursor: pointer;
 	display: flex;
 	font-size: var(--text-sm);
@@ -138,7 +137,7 @@ export default {
 }
 
 .k-toggles-input input:checked + label {
-	background: var(--color-black);
+	background: light-dark(var(--color-black), var(--color-gray-950));
 	color: var(--color-white);
 }
 </style>
diff --git a/panel/src/components/Forms/Previews/LinkFieldPreview.vue b/panel/src/components/Forms/Previews/LinkFieldPreview.vue
index 6c9bb74f59..7f69ee0453 100644
--- a/panel/src/components/Forms/Previews/LinkFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/LinkFieldPreview.vue
@@ -81,8 +81,8 @@ export default {
 <style>
 .k-link-field-preview {
 	--tag-height: var(--height-xs);
-	--tag-color-back: var(--color-gray-200);
-	--tag-color-text: var(--color-black);
+	--tag-color-back: var(--panel-color-back);
+	--tag-color-text: currentColor;
 	--tag-color-toggle: var(--tag-color-text);
 	--tag-color-toggle-border: var(--color-gray-300);
 	--tag-color-focus-back: var(--tag-color-back);
diff --git a/panel/src/components/Lab/DocsTypes.vue b/panel/src/components/Lab/DocsTypes.vue
index ab60efd65a..6fe78a0994 100644
--- a/panel/src/components/Lab/DocsTypes.vue
+++ b/panel/src/components/Lab/DocsTypes.vue
@@ -25,37 +25,37 @@ export default {
 }
 
 .k-lab-docs-types.k-text code {
-	color: var(--color-gray-800);
-	outline-color: var(--color-gray-400);
+	color: light-dark(var(--color-gray-800), var(--color-gray-900));
+	outline-color: light-dark(var(--color-gray-400), var(--color-gray-900));
 	background: var(--color-gray-300);
 }
 .k-lab-docs-types code:is([data-type="boolean"], [data-type="Boolean"]) {
-	color: var(--color-purple-800);
-	outline-color: var(--color-purple-400);
+	color: light-dark(var(--color-purple-800), var(--color-purple-900));
+	outline-color: light-dark(var(--color-purple-400), var(--color-purple-900));
 	background: var(--color-purple-300);
 }
 .k-lab-docs-types code:is([data-type="string"], [data-type="String"]) {
-	color: var(--color-green-800);
-	outline-color: var(--color-green-500);
+	color: light-dark(var(--color-green-800), var(--color-green-900));
+	outline-color: light-dark(var(--color-green-500), var(--color-green-900));
 	background: var(--color-green-300);
 }
 .k-lab-docs-types code:is([data-type="number"], [data-type="Number"]) {
-	color: var(--color-orange-800);
-	outline-color: var(--color-orange-500);
+	color: light-dark(var(--color-orange-800), var(--color-orange-900));
+	outline-color: light-dark(var(--color-orange-500), var(--color-orange-900));
 	background: var(--color-orange-300);
 }
 .k-lab-docs-types code:is([data-type="array"], [data-type="Array"]) {
-	color: var(--color-aqua-800);
-	outline-color: var(--color-aqua-500);
+	color: light-dark(var(--color-aqua-800), var(--color-aqua-900));
+	outline-color: light-dark(var(--color-aqua-500), var(--color-aqua-900));
 	background: var(--color-aqua-300);
 }
 .k-lab-docs-types code:is([data-type="object"], [data-type="Object"]) {
-	color: var(--color-yellow-800);
-	outline-color: var(--color-yellow-500);
+	color: light-dark(var(--color-yellow-800), var(--color-yellow-900));
+	outline-color: light-dark(var(--color-yellow-500), var(--color-yellow-900));;
 	background: var(--color-yellow-300);
 }
 .k-lab-docs-types code[data-type="func"] {
-	color: var(--color-pink-800);
+	color: light-dark(var(--color-pink-800), var(--color-pink-900));
 	outline-color: var(--color-pink-400);
 	background: var(--color-pink-300);
 }
diff --git a/panel/src/components/Lab/Example.vue b/panel/src/components/Lab/Example.vue
index dc19fbeff5..eb9108da38 100644
--- a/panel/src/components/Lab/Example.vue
+++ b/panel/src/components/Lab/Example.vue
@@ -65,7 +65,7 @@ export default {
 	max-width: 100%;
 	outline-offset: -2px;
 	border-radius: var(--rounded);
-	border: 1px solid var(--color-gray-300);
+	border: 1px solid var(--color-border);
 }
 .k-lab-example + .k-lab-example {
 	margin-top: var(--spacing-12);
@@ -78,7 +78,7 @@ export default {
 	height: var(--height-md);
 	padding-block: var(--spacing-3);
 	padding-inline: var(--spacing-2);
-	border-bottom: 1px solid var(--color-gray-300);
+	border-bottom: 1px solid var(--color-border);
 }
 .k-lab-example-label {
 	font-size: 12px;
diff --git a/panel/src/components/Layout/Frame/ColorFrame.vue b/panel/src/components/Layout/Frame/ColorFrame.vue
index c526aa41f8..b9b95ab332 100644
--- a/panel/src/components/Layout/Frame/ColorFrame.vue
+++ b/panel/src/components/Layout/Frame/ColorFrame.vue
@@ -38,6 +38,9 @@ export default {
 	--color-frame-size: 100%;
 	--color-frame-darkness: 0%;
 }
+:root:has(.k-panel[data-theme="dark"]) {
+	--color-frame-pattern: var(--pattern-dark);
+}
 .k-color-frame.k-frame {
 	background: var(--color-frame-pattern);
 	width: var(--color-frame-size);
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index cd21873b96..307f08d017 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -125,6 +125,6 @@ export default {
 	color: var(--stat-info-text-color);
 }
 .k-stat:is([data-theme]) .k-stat-info {
-	--stat-info-text-color: var(--theme-color-700);
+	--stat-info-text-color: var(--theme-color-text);
 }
 </style>
diff --git a/panel/src/components/Misc/Progress.vue b/panel/src/components/Misc/Progress.vue
index d881a71801..c78e89948d 100644
--- a/panel/src/components/Misc/Progress.vue
+++ b/panel/src/components/Misc/Progress.vue
@@ -26,7 +26,7 @@ export default {
 <style>
 :root {
 	--progress-height: var(--spacing-2);
-	--progress-color-back: var(--color-gray-300);
+	--progress-color-back: light-dark(var(--color-gray-300), var(--color-gray-850));
 	--progress-color-value: var(--color-focus);
 }
 
diff --git a/panel/src/components/Navigation/Browser.vue b/panel/src/components/Navigation/Browser.vue
index ed81894a02..47c96065b0 100644
--- a/panel/src/components/Navigation/Browser.vue
+++ b/panel/src/components/Navigation/Browser.vue
@@ -52,17 +52,24 @@ export default {
 </script>
 
 <style>
+:root {
+	--browser-item-hover-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--browser-item-hover-color-text: currentColor;
+	--browser-item-selected-color-back: light-dark(var(--color-blue-300), var(--color-blue-800));
+	--browser-item-selected-color-text: currentColor;
+	--browser-item-gap: 1px;
+	--browser-item-size: 1fr;
+	--browser-item-height: var(--height-sm);
+	--browser-item-padding: 0.25rem;
+	--browser-item-rounded: var(--rounded);
+}
+
 .k-browser {
 	container-type: inline-size;
 	font-size: var(--text-sm);
 }
 
 .k-browser-items {
-	--browser-item-gap: 1px;
-	--browser-item-size: 1fr;
-	--browser-item-height: var(--height-sm);
-	--browser-item-padding: 0.25rem;
-	--browser-item-rounded: var(--rounded);
 	display: grid;
 	column-gap: var(--browser-item-gap);
 	row-gap: var(--browser-item-gap);
@@ -84,6 +91,10 @@ export default {
 	white-space: nowrap;
 	cursor: pointer;
 }
+.k-browser-item:hover {
+	background: var(--browser-item-hover-color-back);
+	color: var(--browser-item-hover-color-text);
+}
 
 .k-browser-item-image {
 	height: calc(var(--browser-item-height) - var(--browser-item-padding) * 2);
@@ -108,6 +119,7 @@ export default {
 	width: 0;
 }
 .k-browser-item[aria-selected] {
-	background: var(--color-blue-300);
+	background: var(--browser-item-selected-color-back);
+	color: var(--browser-item-selected-color-text);
 }
 </style>
diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index 2cd4a34eb8..1700707556 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -385,13 +385,13 @@ export default {
 	font-variant-numeric: tabular-nums;
 	line-height: 1.5;
 	padding: 0 var(--spacing-1);
-	border-radius: 50%;
+	border-radius: 1em;
 	text-align: center;
 	font-size: 0.6rem;
 	box-shadow: var(--shadow-md);
 	background: var(--theme-color-back);
-	border: 1px solid var(--theme-color-500);
-	color: var(--theme-color-text);
+	border: 1px solid light-dark(var(--theme-color-500), var(--color-black));
+	color: var(--theme-color-text-highlight);
 	z-index: 1;
 }
 
diff --git a/panel/src/components/Navigation/FileBrowser.vue b/panel/src/components/Navigation/FileBrowser.vue
index 2d23c3fdee..f3bf9ebbe7 100644
--- a/panel/src/components/Navigation/FileBrowser.vue
+++ b/panel/src/components/Navigation/FileBrowser.vue
@@ -112,6 +112,10 @@ export default {
 </script>
 
 <style>
+:root {
+	--file-browser-items-color-back: light-dark(var(--color-gray-100), var(--panel-color-back));
+}
+
 .k-file-browser {
 	container-type: inline-size;
 	overflow: hidden;
@@ -129,19 +133,19 @@ export default {
 .k-file-browser-tree {
 	grid-area: tree;
 	padding: var(--spacing-2);
-	border-right: 1px solid var(--color-gray-300);
+	border-right: 1px solid var(--color-border);
 }
 .k-file-browser-items {
 	grid-area: items;
 	padding: var(--spacing-2);
-	background: var(--color-gray-100);
+	background: var(--file-browser-items-color-back);
 }
 .k-file-browser-back-button {
 	display: none;
 }
 
 .k-file-browser-pagination {
-	background: var(--color-gray-100);
+	background: var(--file-browser-items-color-back);
 	padding: var(--spacing-2);
 	display: flex;
 	justify-content: end;
diff --git a/panel/src/components/Navigation/Tree.vue b/panel/src/components/Navigation/Tree.vue
index 5e47b37159..4ceadba07c 100644
--- a/panel/src/components/Navigation/Tree.vue
+++ b/panel/src/components/Navigation/Tree.vue
@@ -116,13 +116,16 @@ export default {
 
 <style>
 :root {
-	--tree-color-back: var(--color-gray-200);
-	--tree-color-hover-back: var(--color-gray-300);
-	--tree-color-selected-back: var(--color-blue-300);
-	--tree-color-selected-text: var(--color-black);
-	--tree-color-text: var(--color-gray-dimmed);
-	--tree-level: 0;
+	--tree-color-back: var(--panel-color-back);
 	--tree-indentation: 0.6rem;
+	--tree-level: 0;
+
+	--tree-branch-color-back: var(--tree-color-back);
+	--tree-branch-color-text: var(--color-text-dimmed);
+	--tree-branch-hover-color-back: var(--browser-item-hover-color-back);
+	--tree-branch-hover-color-text: var(--browser-item-hover-color-text);
+	--tree-branch-selected-color-back: var(--browser-item-selected-color-back);
+	--tree-branch-selected-color-text: var(--browser-item-selected-color-text);
 }
 
 .k-tree-branch {
@@ -130,21 +133,21 @@ export default {
 	align-items: center;
 	padding-inline-start: calc(var(--tree-level) * var(--tree-indentation));
 	margin-bottom: 1px;
+	background: var(--tree-branch-color-back);
 }
 /** TODO: .k-tree-branch:has(+ .k-tree)  */
 .k-tree-branch[data-has-subtree="true"] {
 	inset-block-start: calc(var(--tree-level) * 1.5rem);
 	z-index: calc(100 - var(--tree-level));
-	background: var(--tree-color-back);
 }
 .k-tree-branch:hover,
 li[aria-current="true"] > .k-tree-branch {
-	--tree-color-text: var(--tree-color-selected-text);
-	background: var(--tree-color-hover-back);
+	color: var(--tree-branch-hover-color-text);
+	background: var(--tree-branch-hover-color-back);
 	border-radius: var(--rounded);
 }
 li[aria-current="true"] > .k-tree-branch {
-	background: var(--tree-color-selected-back);
+	background: var(--tree-branch-selected-color-back);
 }
 .k-tree-toggle {
 	--icon-size: 12px;
diff --git a/panel/src/components/Text/Code.vue b/panel/src/components/Text/Code.vue
index 3ed12c153c..7706ccb072 100644
--- a/panel/src/components/Text/Code.vue
+++ b/panel/src/components/Text/Code.vue
@@ -38,7 +38,7 @@ export default {
 	--code-font-family: var(--font-mono);
 	--code-font-size: 1em;
 	--code-inline-color-back: var(--color-blue-300);
-	--code-inline-color-border: var(--color-blue-400);
+	--code-inline-color-border: light-dark(var(--color-blue-400), var(--color-blue-900));
 	--code-inline-color-text: var(--color-blue-900);
 	--code-inline-font-size: 0.9em;
 	--code-padding: var(--spacing-3);
diff --git a/panel/src/components/Text/Highlight.vue b/panel/src/components/Text/Highlight.vue
index 8fe4f64310..381a5b5499 100644
--- a/panel/src/components/Text/Highlight.vue
+++ b/panel/src/components/Text/Highlight.vue
@@ -44,14 +44,14 @@ export default {
 }
 
 .k-panel[data-theme="dark"] {
-	--highlight-punctuation: var(--color-gray-700);
-	--highlight-variable: var(--color-red-700);
-	--highlight-constant: var(--color-orange-700);
-	--highlight-keyword: var(--color-purple-700);
-	--highlight-function: var(--color-blue-700);
-	--highlight-operator: var(--color-aqua-700);
-	--highlight-string: var(--color-green-700);
-	--highlight-scope: var(--color-yellow-700);
+	--highlight-punctuation: var(--color-gray-400);
+	--highlight-variable: var(--color-red-400);
+	--highlight-constant: var(--color-orange-400);
+	--highlight-keyword: var(--color-purple-400);
+	--highlight-function: var(--color-blue-400);
+	--highlight-operator: var(--color-aqua-400);
+	--highlight-string: var(--color-green-400);
+	--highlight-scope: var(--color-yellow-400);
 }
 
 .token.punctuation,
diff --git a/panel/src/components/Text/Label.vue b/panel/src/components/Text/Label.vue
index a0ce6bdb3c..9e4b9d7255 100644
--- a/panel/src/components/Text/Label.vue
+++ b/panel/src/components/Text/Label.vue
@@ -14,7 +14,7 @@
 		</span>
 
 		<abbr v-if="required" :title="$t(type + '.required')">✶</abbr>
-		<abbr :title="$t(type + '.invalid')" class="k-label-invalid">&times;</abbr>
+		<abbr :title="$t(type + '.invalid')" data-theme="negative" class="k-label-invalid">&times;</abbr>
 	</component>
 </template>
 
@@ -106,7 +106,7 @@ export default {
 
 .k-label abbr.k-label-invalid {
 	display: none;
-	color: light-dark(var(--color-red-700), var(--color-red-600));
+	color: var(--theme-color-text);
 }
 
 /** Tracking invalid via CSS */
diff --git a/panel/src/components/Text/Text.vue b/panel/src/components/Text/Text.vue
index a4ded50481..dc975aca42 100644
--- a/panel/src/components/Text/Text.vue
+++ b/panel/src/components/Text/Text.vue
@@ -147,7 +147,7 @@ export default {
 	font-size: var(--text-lg);
 	line-height: 1.25;
 	padding-inline-start: var(--spacing-4);
-	border-inline-start: 2px solid var(--color-black);
+	border-inline-start: 2px solid light-dark(var(--color-black), var(--color-border));
 }
 
 /* Images */
diff --git a/panel/src/components/Uploads/UploadItem.vue b/panel/src/components/Uploads/UploadItem.vue
index 7a1ce81bd7..7fe4f4241b 100644
--- a/panel/src/components/Uploads/UploadItem.vue
+++ b/panel/src/components/Uploads/UploadItem.vue
@@ -25,7 +25,7 @@
 				{{ niceSize }}
 				<template v-if="progress"> - {{ progress }}% </template>
 			</p>
-			<p v-if="error" class="k-upload-item-error">
+			<p v-if="error" class="k-upload-item-error" data-theme="negative">
 				{{ error }}
 			</p>
 			<k-progress
@@ -115,6 +115,10 @@ export default {
 </script>
 
 <style>
+:root {
+	--upload-item-color-back: var(--item-color-back);
+}
+
 .k-upload-item {
 	accent-color: var(--color-focus);
 	display: grid;
@@ -124,7 +128,7 @@ export default {
 	grid-template-columns: 6rem 1fr auto;
 	grid-template-rows: var(--input-height) 1fr;
 	border-radius: var(--rounded);
-	background: var(--color-white);
+	background: var(--upload-item-color-back);
 	box-shadow: var(--shadow);
 	min-height: 6rem;
 }
@@ -142,7 +146,7 @@ export default {
 	--input-rounded: 0;
 	grid-area: input;
 	font-size: var(--text-sm);
-	border-bottom: 1px solid var(--color-light);
+	border-bottom: 1px solid var(--color-border);
 	border-start-end-radius: var(--rounded);
 }
 .k-upload-item-input.k-input:focus-within {
@@ -151,7 +155,7 @@ export default {
 	border-radius: var(--rounded);
 }
 .k-upload-item-input.k-input[data-disabled="true"] {
-	--input-color-back: var(--color-white);
+	--input-color-back: var(--upload-item-color-back);
 }
 .k-upload-item-input .k-input-after {
 	color: var(--color-gray-600);
@@ -163,11 +167,11 @@ export default {
 .k-upload-item-error {
 	font-size: var(--text-xs);
 	margin-top: 0.25rem;
-	color: var(--color-red-700);
+	color: var(--theme-color-text);
 }
 .k-upload-item-progress {
 	--progress-height: 0.25rem;
-	--progress-color-back: var(--color-light);
+	--progress-color-back: var(--panel-color-back);
 	margin-bottom: 0.3125rem;
 }
 .k-upload-item-toggle {
@@ -177,7 +181,4 @@ export default {
 .k-upload-item-toggle > * {
 	padding: var(--spacing-3);
 }
-.k-upload-item[data-completed="true"] .k-upload-item-progress {
-	--progress-color-value: var(--color-green-400);
-}
 </style>
diff --git a/panel/src/styles/reset/range.css b/panel/src/styles/reset/range.css
index 865873da27..9daa5896e3 100644
--- a/panel/src/styles/reset/range.css
+++ b/panel/src/styles/reset/range.css
@@ -4,7 +4,7 @@
 	--range-thumb-size: 1rem;
 	--range-thumb-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px 2px,
 		rgba(0, 0, 0, 0.125) 0 0 0 1px;
-	--range-track-back: var(--color-gray-250);
+	--range-track-back: light-dark(var(--color-gray-300), var(--color-black));
 	--range-track-height: var(--range-thumb-size);
 }
 
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index ccdd7ef8ba..2d7397e67b 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -98,6 +98,8 @@
 	--theme-color-h: var(--color-gray-h);
 	--theme-color-s: var(--color-gray-s);
 	--theme-color-boost: 10%;
+	--theme-color-icon: var(--color-gray-600);
+	--theme-color-text: var(--color-black);
 }
 
 [data-theme^="white"],
@@ -106,7 +108,7 @@
 	--theme-color-icon: var(--color-gray-800);
 	--theme-color-text: var(--color-text);
 	--theme-color-text-highlight: var(--theme-color-text);
-	--color-h: var(--color-black);
+	--color-h: var(--color-text);
 }
 
 /* Special Themes */
diff --git a/src/Panel/Lab/Docs.php b/src/Panel/Lab/Docs.php
index 3e26a0f90a..62834dd1fb 100644
--- a/src/Panel/Lab/Docs.php
+++ b/src/Panel/Lab/Docs.php
@@ -52,7 +52,7 @@ function ($file) {
 				return [
 					'image' => [
 						'icon' => 'book',
-						'back' => 'white',
+						'back' => 'light-dark(white, var(--color-gray-800))',
 					],
 					'text' => $component,
 					'link' => '/lab/docs/' . $component,
diff --git a/src/Panel/Lab/Example.php b/src/Panel/Lab/Example.php
index d4d74e6195..07ce6f2dde 100644
--- a/src/Panel/Lab/Example.php
+++ b/src/Panel/Lab/Example.php
@@ -173,7 +173,7 @@ public function toArray(): array
 		return [
 			'image' => [
 				'icon' => $this->parent->icon(),
-				'back' => 'white',
+				'back' => 'light-dark(white, var(--color-gray-800))',
 			],
 			'text' => $this->title(),
 			'link' => $this->url()

From 40753c13db25a5d53a98bf9f4fd4912499374aa1 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 11:46:42 +0100
Subject: [PATCH 12/19] Better button variables

---
 panel/src/components/Navigation/Button.vue | 12 +++++-------
 panel/src/styles/utilities/theme.css       |  7 ++++---
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
index 1700707556..92a1eeca51 100644
--- a/panel/src/components/Navigation/Button.vue
+++ b/panel/src/components/Navigation/Button.vue
@@ -240,6 +240,7 @@ export default {
 	--button-rounded: var(--spacing-1);
 	--button-text-display: block;
 	--button-icon-display: block;
+	--button-filled-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
 }
 
 .k-button {
@@ -305,23 +306,20 @@ export default {
 
 /** Filled Buttons **/
 .k-button:where([data-variant="filled"]) {
-	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--button-color-back: var(--button-filled-color-back);
 }
 .k-button:where([data-variant="filled"]):not([aria-disabled="true"]):hover {
 	filter: brightness(97%);
 }
 
 .k-button:where([data-variant="filled"][data-theme]) {
-	--button-color-icon: var(--theme-color-700);
+	--button-color-icon: var(--theme-color-icon-highlight);
 	--button-color-back: var(--theme-color-back);
 	--button-color-text: var(--theme-color-text-highlight);
 }
 .k-button:where([data-theme$="-icon"][data-variant="filled"]) {
-	--button-color-icon: hsl(
-		var(--theme-color-hs),
-		57%
-	); /* slightly improve the contrast */
-	--button-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--button-color-icon: var(--theme-color-icon);
+	--button-color-back: var(--button-filled-color-back);
 	--button-color-text: currentColor;
 }
 
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 2d7397e67b..2d5ee1bdce 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -25,6 +25,10 @@
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
 	--theme-color-border: light-dark(var(--theme-color-500), var(--theme-color-600));
+	--theme-color-back: light-dark(var(--theme-color-400), var(--theme-color-500));
+	--theme-color-hover: var(--theme-color-600);
+	--theme-color-icon: var(--theme-color-600);
+	--theme-color-icon-highlight: var(--theme-color-700);
 	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-400));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
@@ -32,9 +36,6 @@
 		50%
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
-	--theme-color-back: var(--theme-color-500);
-	--theme-color-hover: var(--theme-color-500);
-	--theme-color-icon: light-dark(var(--theme-color-700), var(--theme-color-600));
 }
 
 /* Color themes */

From 0688d087a012bb27955bdc9f79d0c800b9c324a8 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 11:48:59 +0100
Subject: [PATCH 13/19] Better link colors

---
 panel/src/components/Text/Text.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/components/Text/Text.vue b/panel/src/components/Text/Text.vue
index dc975aca42..265e93cbe9 100644
--- a/panel/src/components/Text/Text.vue
+++ b/panel/src/components/Text/Text.vue
@@ -49,8 +49,8 @@ export default {
 :root {
 	--text-font-size: 1em;
 	--text-line-height: 1.5;
-	--link-color: light-dark(var(--color-blue-800), var(--color-blue-600));
-	--link-color-hover: light-dark(var(--color-black), var(--color-white));
+	--link-color: light-dark(var(--color-blue-800), var(--color-blue-500));
+	--link-color-hover: light-dark(var(--color-blue-700), var(--color-blue-400));
 	--link-underline-offset: 2px;
 }
 

From 11d2565503d8990d4ca2ab2a9f4b82af99dfc60f Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 12:03:34 +0100
Subject: [PATCH 14/19] Adjusted color values

---
 panel/src/styles/config/colors.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index afbcc19ec7..2bd5629b56 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -299,11 +299,11 @@
 	--color-l-300: 85%;
 	--color-l-400: 75%;
 	--color-l-500: 65%;
-	--color-l-600: 50%;
+	--color-l-600: 52%;
 	--color-l-700: 40%;
-	--color-l-750: 35%;
-	--color-l-800: 25%;
-	--color-l-850: 18%;
+	--color-l-750: 36%;
+	--color-l-800: 27%;
+	--color-l-850: 22%;
 	--color-l-900: 13%;
 	--color-l-950: 8%;
 	--color-l-1000: 5%;

From f48255bade44f0c35134efc90d0f5f6d04e00c74 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 13:06:20 +0100
Subject: [PATCH 15/19] Fix choices in dark mode

---
 panel/src/styles/reset/choice.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/styles/reset/choice.css b/panel/src/styles/reset/choice.css
index 9e4d6f259a..870d0d41c4 100644
--- a/panel/src/styles/reset/choice.css
+++ b/panel/src/styles/reset/choice.css
@@ -1,6 +1,6 @@
 :root {
-	--choice-color-back: light-dark(var(--color-white), var(--color-gray-850));
-	--choice-color-border: light-dark(var(--color-gray-500), var(--color-black));
+	--choice-color-back: light-dark(var(--color-white), var(--color-gray-800));
+	--choice-color-border: light-dark(var(--color-gray-500), var(--color-gray-600));
 	--choice-color-checked: var(--color-black);
 	--choice-color-disabled: var(--color-gray-400);
 	--choice-color-icon: var(--color-light);

From e5d029387b8f51ba3d5b66096ebbf7b184687cd5 Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Fri, 29 Nov 2024 13:08:39 +0100
Subject: [PATCH 16/19] Improve text color

---
 panel/src/styles/utilities/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 2d5ee1bdce..cf572f1a50 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -29,7 +29,7 @@
 	--theme-color-hover: var(--theme-color-600);
 	--theme-color-icon: var(--theme-color-600);
 	--theme-color-icon-highlight: var(--theme-color-700);
-	--theme-color-text: light-dark(var(--theme-color-900), var(--theme-color-400));
+	--theme-color-text: light-dark(var(--theme-color-800), var(--theme-color-500));
 	--theme-color-text-dimmed: hsl(
 		var(--theme-color-h),
 		calc(var(--theme-color-s) - 60%),

From 4ec62ad74808bf9e6399383b307840453f663e02 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 2 Dec 2024 20:19:31 +0100
Subject: [PATCH 17/19] Tweak color lightness values

---
 panel/src/styles/config/colors.css   | 29 +++++++++++++++-------------
 panel/src/styles/utilities/theme.css | 22 ++++++++++++++-------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 2bd5629b56..63f04a9f54 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -257,7 +257,10 @@
 	/** Shortcuts **/
 	--color-black: hsl(0, 0%, var(--color-l-min));
 	--color-border: light-dark(var(--color-gray-300), var(--color-gray-800));
-	--color-border-dimmed: light-dark(hsla(0, 0%, var(--color-l-min), 0.1), var(--color-gray-850));
+	--color-border-dimmed: light-dark(
+		hsla(0, 0%, var(--color-l-min), 0.1),
+		var(--color-gray-850)
+	);
 	--color-dark: var(--color-gray-900);
 	--color-focus: var(--color-blue-600);
 	--color-light: var(--color-gray-200);
@@ -293,19 +296,19 @@
 	color-scheme: dark;
 
 	--color-l-max: 100%;
-	--color-l-100: 98%;
-	--color-l-200: 94%;
-	--color-l-250: 90%;
-	--color-l-300: 85%;
-	--color-l-400: 75%;
-	--color-l-500: 65%;
+	--color-l-100: 95%;
+	--color-l-200: 86%;
+	--color-l-250: 78%;
+	--color-l-300: 73%;
+	--color-l-400: 67%;
+	--color-l-500: 62%;
 	--color-l-600: 52%;
 	--color-l-700: 40%;
-	--color-l-750: 36%;
-	--color-l-800: 27%;
-	--color-l-850: 22%;
-	--color-l-900: 13%;
-	--color-l-950: 8%;
-	--color-l-1000: 5%;
+	--color-l-750: 33%;
+	--color-l-800: 26%;
+	--color-l-850: 19%;
+	--color-l-900: 11%;
+	--color-l-950: 6%;
+	--color-l-1000: 3%;
 	--color-l-min: 0%;
 }
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index cf572f1a50..6ca00dd79d 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -24,16 +24,24 @@
 	--theme-color-800: hsl(var(--theme-color-hs), var(--theme-color-l-800));
 	--theme-color-900: hsl(var(--theme-color-hs), var(--theme-color-l-900));
 
-	--theme-color-border: light-dark(var(--theme-color-500), var(--theme-color-600));
-	--theme-color-back: light-dark(var(--theme-color-400), var(--theme-color-500));
+	--theme-color-border: light-dark(
+		var(--theme-color-500),
+		var(--theme-color-600)
+	);
+	--theme-color-back: light-dark(
+		var(--theme-color-400),
+		var(--theme-color-500)
+	);
 	--theme-color-hover: var(--theme-color-600);
 	--theme-color-icon: var(--theme-color-600);
 	--theme-color-icon-highlight: var(--theme-color-700);
-	--theme-color-text: light-dark(var(--theme-color-800), var(--theme-color-500));
-	--theme-color-text-dimmed: hsl(
-		var(--theme-color-h),
-		calc(var(--theme-color-s) - 60%),
-		50%
+	--theme-color-text: light-dark(
+		var(--theme-color-800),
+		var(--theme-color-500)
+	);
+	--theme-color-text-dimmed: light-dark(
+		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 50%),
+		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 60%)
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
 }

From f44228bed5d63e7cd5002edec37d81c3f9920d17 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 2 Dec 2024 20:57:37 +0100
Subject: [PATCH 18/19] Bunch of fixes

---
 panel/lab/basics/icons/1_iconset/index.vue           |  1 +
 panel/lab/components/toolbar/3_writer/index.vue      |  2 +-
 .../Forms/Previews/BubblesFieldPreview.vue           |  2 +-
 panel/src/components/Layout/Frame/Frame.vue          |  2 +-
 panel/src/components/Layout/Stat.vue                 |  5 ++++-
 panel/src/components/Navigation/Browser.vue          | 12 +++++++++---
 panel/src/components/Navigation/Tag.vue              |  4 ++--
 panel/src/components/Views/System/SystemSecurity.vue |  2 +-
 panel/src/styles/config/colors.css                   | 12 ++++++------
 panel/src/styles/utilities/theme.css                 | 12 +++++++-----
 10 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/panel/lab/basics/icons/1_iconset/index.vue b/panel/lab/basics/icons/1_iconset/index.vue
index 8978558be4..4469d42530 100644
--- a/panel/lab/basics/icons/1_iconset/index.vue
+++ b/panel/lab/basics/icons/1_iconset/index.vue
@@ -36,6 +36,7 @@ export default {
 	align-items: center;
 	gap: 0.75rem;
 	padding: var(--spacing-2);
+	color: var(--color-black);
 	background: var(--color-white);
 	border-radius: var(--rounded);
 	box-shadow: var(--shadow);
diff --git a/panel/lab/components/toolbar/3_writer/index.vue b/panel/lab/components/toolbar/3_writer/index.vue
index b95dda0f11..4887925bd8 100644
--- a/panel/lab/components/toolbar/3_writer/index.vue
+++ b/panel/lab/components/toolbar/3_writer/index.vue
@@ -26,7 +26,7 @@ export default {
 
 <style>
 .k-writer-input {
-	background-color: white;
+	background-color: var(--input-color-back);
 	border-radius: var(--rounded);
 }
 </style>
diff --git a/panel/src/components/Forms/Previews/BubblesFieldPreview.vue b/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
index 531e70ca3f..9baf444ee9 100644
--- a/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
+++ b/panel/src/components/Forms/Previews/BubblesFieldPreview.vue
@@ -62,7 +62,7 @@ export default {
 <style>
 .k-bubbles-field-preview {
 	--bubble-back: var(--panel-color-back);
-	--bubble-text: var(--color-black);
+	--bubble-text: var(--color-text);
 
 	padding: 0.375rem var(--table-cell-padding);
 	overflow: hidden;
diff --git a/panel/src/components/Layout/Frame/Frame.vue b/panel/src/components/Layout/Frame/Frame.vue
index bce21853f7..bf6af1b8ec 100644
--- a/panel/src/components/Layout/Frame/Frame.vue
+++ b/panel/src/components/Layout/Frame/Frame.vue
@@ -84,7 +84,7 @@ export default {
 
 .k-frame:where([data-theme]) {
 	--back: var(--theme-color-back);
-	color: var(--theme-color-text);
+	color: var(--theme-color-text-highlight);
 }
 
 .k-frame *:where(img, video, iframe, button) {
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index 307f08d017..73317db1a0 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -83,7 +83,10 @@ export default {
 <style>
 :root {
 	--stat-color-back: var(--item-color-back);
-	--stat-color-hover-back: light-dark(var(--color-gray-100), var(--color-gray-850));
+	--stat-color-hover-back: light-dark(
+		var(--color-gray-100),
+		var(--color-gray-850)
+	);
 	--stat-info-text-color: var(--color-text-dimmed);
 	--stat-value-text-size: var(--text-2xl);
 }
diff --git a/panel/src/components/Navigation/Browser.vue b/panel/src/components/Navigation/Browser.vue
index 47c96065b0..1dbc7edc77 100644
--- a/panel/src/components/Navigation/Browser.vue
+++ b/panel/src/components/Navigation/Browser.vue
@@ -53,9 +53,15 @@ export default {
 
 <style>
 :root {
-	--browser-item-hover-color-back: light-dark(var(--color-gray-300), var(--color-gray-950));
+	--browser-item-hover-color-back: light-dark(
+		var(--color-gray-300),
+		var(--color-gray-950)
+	);
 	--browser-item-hover-color-text: currentColor;
-	--browser-item-selected-color-back: light-dark(var(--color-blue-300), var(--color-blue-800));
+	--browser-item-selected-color-back: light-dark(
+		var(--color-blue-300),
+		var(--color-blue-800)
+	);
 	--browser-item-selected-color-text: currentColor;
 	--browser-item-gap: 1px;
 	--browser-item-size: 1fr;
@@ -106,7 +112,7 @@ export default {
 /** TODO: .k-browser-item-image:has(svg) */
 .k-browser-item-image.k-icon-frame {
 	box-shadow: none;
-	background: var(--color-white);
+	background: light-dark(var(--color-white), var(--color-black));
 }
 .k-browser-item-image svg {
 	transform: scale(0.8);
diff --git a/panel/src/components/Navigation/Tag.vue b/panel/src/components/Navigation/Tag.vue
index f1bd24e333..29c619951e 100644
--- a/panel/src/components/Navigation/Tag.vue
+++ b/panel/src/components/Navigation/Tag.vue
@@ -127,8 +127,8 @@ export default {
 }
 
 .k-tag[data-theme="light"] {
-	--tag-color-back: var(--color-light);
-	--tag-color-text: var(--color-black);
+	--tag-color-back: var(--panel-color-back);
+	--tag-color-text: var(--color-text);
 	--tag-color-disabled-back: var(--color-gray-200);
 	--tag-color-disabled-text: var(--color-gray-600);
 }
diff --git a/panel/src/components/Views/System/SystemSecurity.vue b/panel/src/components/Views/System/SystemSecurity.vue
index 90486478b1..9a998f61f0 100644
--- a/panel/src/components/Views/System/SystemSecurity.vue
+++ b/panel/src/components/Views/System/SystemSecurity.vue
@@ -15,7 +15,7 @@
 				issues.map((issue) => ({
 					// give each message an image prop unless it already has one
 					image: {
-						back: 'light-dark(var(--color-red-200), transparent)',
+						back: 'light-dark(var(--color-red-200), var(--color-red-900))',
 						icon: issue.icon ?? 'alert',
 						color: 'var(--color-red)'
 					},
diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index 63f04a9f54..c7c3c46e4a 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -298,17 +298,17 @@
 	--color-l-max: 100%;
 	--color-l-100: 95%;
 	--color-l-200: 86%;
-	--color-l-250: 78%;
-	--color-l-300: 73%;
-	--color-l-400: 67%;
-	--color-l-500: 62%;
-	--color-l-600: 52%;
+	--color-l-250: 79%;
+	--color-l-300: 74%;
+	--color-l-400: 68%;
+	--color-l-500: 63%;
+	--color-l-600: 54%;
 	--color-l-700: 40%;
 	--color-l-750: 33%;
 	--color-l-800: 26%;
 	--color-l-850: 19%;
 	--color-l-900: 11%;
-	--color-l-950: 6%;
+	--color-l-950: 7%;
 	--color-l-1000: 3%;
 	--color-l-min: 0%;
 }
diff --git a/panel/src/styles/utilities/theme.css b/panel/src/styles/utilities/theme.css
index 6ca00dd79d..58a482f0a3 100644
--- a/panel/src/styles/utilities/theme.css
+++ b/panel/src/styles/utilities/theme.css
@@ -36,12 +36,13 @@
 	--theme-color-icon: var(--theme-color-600);
 	--theme-color-icon-highlight: var(--theme-color-700);
 	--theme-color-text: light-dark(
-		var(--theme-color-800),
-		var(--theme-color-500)
+		var(--theme-color-700),
+		var(--theme-color-600)
 	);
-	--theme-color-text-dimmed: light-dark(
-		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 50%),
-		hsl(var(--theme-color-h), calc(var(--theme-color-s) - 60%), 60%)
+	--theme-color-text-dimmed: hsl(
+		var(--theme-color-h),
+		calc(var(--theme-color-s) - 60%),
+		50%
 	);
 	--theme-color-text-highlight: var(--theme-color-900);
 }
@@ -155,6 +156,7 @@
 	--theme-color-border: transparent;
 	--theme-color-icon: var(--color-text);
 	--theme-color-text: var(--color-text);
+	--theme-color-text-highlight: var(--theme-color-text);
 }
 
 [data-theme] {

From c8232db0560283787e61c7883b0a76a679eff56e Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Mon, 2 Dec 2024 21:05:55 +0100
Subject: [PATCH 19/19] Tweak contrast of input + border

---
 panel/src/styles/config/colors.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/panel/src/styles/config/colors.css b/panel/src/styles/config/colors.css
index c7c3c46e4a..0a7db1f82f 100644
--- a/panel/src/styles/config/colors.css
+++ b/panel/src/styles/config/colors.css
@@ -305,8 +305,8 @@
 	--color-l-600: 54%;
 	--color-l-700: 40%;
 	--color-l-750: 33%;
-	--color-l-800: 26%;
-	--color-l-850: 19%;
+	--color-l-800: 27%;
+	--color-l-850: 18%;
 	--color-l-900: 11%;
 	--color-l-950: 7%;
 	--color-l-1000: 3%;