From 7adc27aa85f276f7a3ff5f5bd5374396cd255bae Mon Sep 17 00:00:00 2001
From: "Florian C. Wachmann" <dev@formfcw.com>
Date: Thu, 10 Jul 2025 17:33:20 +0200
Subject: [PATCH] Improve readability of primary button in dark mode (#25396)

* set text color of primary button to a light color

* add changeset
---
 .changeset/loose-parts-laugh.md | 5 +++++
 app/src/components/v-button.vue | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/loose-parts-laugh.md

diff --git a/.changeset/loose-parts-laugh.md b/.changeset/loose-parts-laugh.md
new file mode 100644
index 0000000000..843aa48bed
--- /dev/null
+++ b/.changeset/loose-parts-laugh.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Improved the readability of the primary button in dark mode
diff --git a/app/src/components/v-button.vue b/app/src/components/v-button.vue
index 051aaccea9..5f2bd2007e 100644
--- a/app/src/components/v-button.vue
+++ b/app/src/components/v-button.vue
@@ -270,6 +270,12 @@ async function onClick(event: MouseEvent) {
 	min-width: 100%;
 }
 
+body.dark .button {
+	--v-button-color: var(--theme--foreground);
+	--v-button-color-hover: var(--theme--foreground);
+	--v-button-color-active: var(--theme--foreground);
+}
+
 .button {
 	position: relative;
 	display: flex;