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] {