Merge pull request #11 from josedario87/feature/configuracion-accent-color

feat: Add accent color customization for configuracion module

ui/src/stores/useUi.js

@@ -16,6 +16,7 @@ const appearanceSettingKeys = [
   'accentColorTareas',
   'accentColorPlanillas',
   'accentColorAsistencias',
+  'accentColorConfiguracion',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -76,6 +77,7 @@ export const useUi = defineStore('ui', {
       accentColorTareas: '#4CAF50',     // Green
       accentColorPlanillas: '#FF9800',  // Orange
       accentColorAsistencias: '#E91E63', // Pink
+      accentColorConfiguracion: '#607D8B', // Blue Grey
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -157,6 +159,10 @@ export const useUi = defineStore('ui', {
     setAccentColorAsistencias(color) {
       this.accentColorAsistencias = color
       _saveAppearanceState(this)
+    },
+    setAccentColorConfiguracion(color) {
+      this.accentColorConfiguracion = color
+      _saveAppearanceState(this)
     }
   },
 })

ui/src/views/SettingsView.vue

@@ -94,6 +94,11 @@
           <input type="color" id="accentColorAsistencias" v-model="ui.accentColorAsistencias" @input="ui.setAccentColorAsistencias($event.target.value)"
                  class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
         </div>
+        <div class="setting-item">
+          <label for="accentColorConfiguracion" class="block text-sm font-medium mb-1">Configuracion Accent</label>
+          <input type="color" id="accentColorConfiguracion" v-model="ui.accentColorConfiguracion" @input="ui.setAccentColorConfiguracion($event.target.value)"
+                 class="w-full h-12 p-1 border rounded-lg cursor-pointer shadow-sm hover:opacity-80 transition-opacity border-[var(--secondary-color)] focus:border-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)]">
+        </div>
       </div>
     </section>