Add minimal and soft color themes

This commit is contained in:
2025-08-15 11:32:21 +02:00
parent 6dc8f5c39e
commit a04a66a176

View File

@@ -48,6 +48,75 @@ const darkTheme = {
},
};
const minimalLightTheme = {
dark: false,
colors: {
background: "#FFFFFF",
surface: "#F5F5F5",
primary: "#7C90DB", // Azul suave
"primary-darken-1": "#6A7EC9",
secondary: "#E0E0E0", // Gris neutro
"secondary-darken-1": "#C7C7C7",
accent: "#A5C4D4", // Azul pastel
error: "#FF6B6B", // Rojo coral suave
info: "#88C9F2",
success: "#77DD77", // Verde menta
warning: "#FFD166", // Amarillo pastel
"on-primary": "#2D3748", // Gris oscuro
"on-surface": "#2D3748",
},
variables: {
"border-color": "#E2E8F0",
"border-opacity": 0.16,
},
};
const minimalDarkTheme = {
dark: true,
colors: {
background: "#1E2B3A",
surface: "#2C3E50",
primary: "#8A9EFF", // Azul lavanda (inalterado)
"primary-darken-1": "#778CEB",
secondary: "#4A5568", // Gris azulado (reemplaza grises neutros)
"secondary-darken-1": "#3C4758",
accent: "#A7BED3", // Azul polvo (inalterado)
error: "#FF8A8A",
info: "#90CAF9",
success: "#81C784",
warning: "#FFD54F",
"on-primary": "#F7FAFC", // Blanco casi puro (mejor contraste)
"on-surface": "#E2E8F0", // Gris claro azulado
},
variables: {
"border-color": "#4A5568", // Coordinado con secondary
"border-opacity": 0.3,
},
};
const softDarkTheme = {
dark: true,
colors: {
background: "#2C3E50", // Gris-azul medio (como cielo nocturno)
surface: "#34495E", // 15% más claro que el fondo
primary: "#7F9CF5", // Azul lavanda más claro
"primary-darken-1": "#6B8BEA",
secondary: "#4B5563", // Gris neutro cálido
"secondary-darken-1": "#3E4A5A",
accent: "#94A3B8", // Gris-azul claro (para detalles)
error: "#FCA5A5", // Rojo suave
info: "#93C5FD", // Azul cielo
success: "#86EFAC", // Verde menta claro
warning: "#FCD34D", // Amarillo miel
"on-primary": "#F8FAFC", // Blanco niebla
"on-surface": "#E5E7EB", // Gris muy claro
},
variables: {
"border-color": "#475569", // Borde sutil
"border-opacity": 0.25,
},
};
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components,
@@ -55,8 +124,8 @@ export default defineNuxtPlugin((nuxtApp) => {
theme: {
defaultTheme: "light",
themes: {
light: lightTheme,
dark: darkTheme,
light: minimalLightTheme,
dark: softDarkTheme,
},
variations: {
colors: ["primary", "secondary"],