From 10d6dfa741cd7ab68f14e8238e4af31b4410fb82 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 18 Dec 2025 22:04:20 +0000
Subject: [PATCH] Fix UCard dark mode styling and add ColorModeSelect component

Co-authored-by: ArthurDanjou <29738535+ArthurDanjou@users.noreply.github.com>
---
 app/app.vue         | 11 ++++++++---
 app/pages/docs.vue  | 12 ++++++++++--
 app/pages/index.vue | 10 ++++++++--
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 598be2b..5395b15 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,5 +1,10 @@
 <template>
-  <NuxtRouteAnnouncer />
-  <NuxtLoadingIndicator />
-  <NuxtPage />
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtLoadingIndicator />
+    <div class="fixed top-4 right-4 z-50">
+      <UColorModeSelect />
+    </div>
+    <NuxtPage />
+  </div>
 </template>
diff --git a/app/pages/docs.vue b/app/pages/docs.vue
index 6f1aa62..fa2f088 100644
--- a/app/pages/docs.vue
+++ b/app/pages/docs.vue
@@ -222,7 +222,11 @@ const apiEndpoints = [
             <h3 class="text-xl font-semibold mb-4">
               MCP Configuration
             </h3>
-            <UCard variant="solid">
+            <UCard
+              :ui="{
+                body: 'bg-gray-900 dark:bg-gray-950'
+              }"
+            >
               <pre class="text-sm text-gray-100 overflow-x-auto">
 <code>{
   "mcpServers": {
@@ -239,7 +243,11 @@ const apiEndpoints = [
             <h3 class="text-xl font-semibold mb-4">
               Direct Connection
             </h3>
-            <UCard variant="solid">
+            <UCard
+              :ui="{
+                body: 'bg-gray-900 dark:bg-gray-950'
+              }"
+            >
               <pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp</code></pre>
             </UCard>
             <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e9f2985..0ae3f0c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -212,7 +212,9 @@ const resources = [
               Configure your MCP client to connect to my server:
             </p>
             <UCard
-              variant="solid"
+              :ui="{
+                body: 'bg-gray-900 dark:bg-gray-950'
+              }"
             >
               <pre class="text-sm text-gray-100 overflow-x-auto">
                 <code>
@@ -234,7 +236,11 @@ const resources = [
             <p class="text-gray-600 dark:text-gray-400 mb-4">
               Use REST API endpoints in your applications:
             </p>
-            <UCard variant="solid">
+            <UCard
+              :ui="{
+                body: 'bg-gray-900 dark:bg-gray-950'
+              }"
+            >
               <pre class="text-sm text-gray-100 overflow-x-auto">
 <code># Get profile information
 curl https://api.arthurdanjou.fr/api/profile