From 24c6d5ac30f5855b78e978435abcadedb8471823 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 14:12:29 -0600
Subject: [PATCH] =?UTF-8?q?Style:=20Configurar=20tema=20caf=C3=A9=20person?=
 =?UTF-8?q?alizado=20en=20Nuxt=20UI=204?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementa la configuración correcta de colores según Nuxt UI 4:

- Define color 'coffee' con shades 50-950 usando @theme en CSS
- Configura aliases primary y neutral a 'coffee' en app.config.ts
- Esto permite que todos los componentes de Nuxt UI usen el tema café/dorado
- Reemplaza los colores azules y verdes por defecto globalmente
---
 nuxt4-app/app.config.ts           |  8 ++++++++
 nuxt4-app/app/assets/css/main.css | 15 +++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 nuxt4-app/app.config.ts

diff --git a/nuxt4-app/app.config.ts b/nuxt4-app/app.config.ts
new file mode 100644
index 0000000..57f4245
--- /dev/null
+++ b/nuxt4-app/app.config.ts
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'coffee',
+      neutral: 'coffee'
+    }
+  }
+})
diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index b22756a..3349a2c 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -1,6 +1,21 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+@theme {
+  /* Definir color café personalizado con todos los shades */
+  --color-coffee-50: #fef9f0;
+  --color-coffee-100: #fef3e0;
+  --color-coffee-200: #fde5c0;
+  --color-coffee-300: #fbd4a0;
+  --color-coffee-400: #f0c080;
+  --color-coffee-500: #c08040;
+  --color-coffee-600: #a06830;
+  --color-coffee-700: #805020;
+  --color-coffee-800: #5a3a18;
+  --color-coffee-900: #3a2a16;
+  --color-coffee-950: #1b1209;
+}
+
 :root {
   --brand-bg: #14100b;
   --brand-surface: #1f180f;