Merge branch 'SettingsView'

ui/src/components/BrainBlastBar.vue

@@ -21,7 +21,7 @@
 
   function toggleTheme() {
     darkTheme.value = !darkTheme.value
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    theme.global.name.value = theme.global.current.value.dark ? 'CustomThemeLight' : 'CustomThemeDark'
   }
 
 </script>

ui/src/plugins/vuetify.js

@@ -11,30 +11,40 @@ import 'vuetify/styles'
 // Composables
 import { createVuetify } from 'vuetify'
 
+const CustomThemeDark = {
+  dark: true,
+  colors: {
+    background: '#121212',
+    primary: '#e91e1e',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#FF5722',
+    warning: '#FFC107',
+    info: '#607D8B',
+    success: '#4CAF50'
+  }
+}
+const CustomThemeLight = {
+  dark: false,
+  colors: {
+    background: '#ffffff',
+    primary: '#e91e1e',
+    secondary: '#F44336',
+    accent: '#FFC107',
+    error: '#FF5722',
+    warning: '#FFC107',
+    info: '#607D8B',
+    success: '#4CAF50'
+  }
+}
+
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
+    defaultTheme: 'CustomThemeDark',
     themes: {
-      light: {
+      CustomThemeDark,
-        background: '#212121',
+      CustomThemeLight,
-        primary: '#cc0000',
-        controls: '#cc0000',
-        soundboard: '#9A2779',
-        secondary: '#b0bec5',
-        feedback: '#2E7D32',
-        accent: '#8c9eff',
-        error: '#b71c1c',
-      },
-      dark: {
-        background: '#121212',
-        primary: '#2979FF',
-        controls: '#AB47B',
-        secondary: '#90a4ae',
-        feedback: '#2E7D32',
-        accent: '#8c9eff',
-        error: '#b71c1c',
     },
   },
-    defaultTheme: 'dark',
-  }
 })

ui/src/views/SettingsView.vue

@@ -1,19 +1,20 @@
 <template>
-  <v-container class="ml-5">
+
-    <h1 class="title mb-4">Paramètres</h1>
+    <h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
-    <h2 class="title ml-10 mb-5">Son</h2>
+    <hr/>
+    <h2 class="title ml-10 mb-5 mt-5">Son</h2>
     <div style="display: flex; align-items: center;">
-      <v-checkbox label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10"/>
+      <v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10" color="primary"/>
       <div style="width: 250px; margin-left: 16px;">
-        <v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume"/>
+        <v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
       </div>
     </div>
-    <v-checkbox label="Activer le son MQTT" v-model="MQTTSound" class="ml-10"/>
+    <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-10" color="primary"/>
-  </v-container>
+
 </template>
 
   
-  <script setup>
+<script setup>
   import { ref, onMounted, watch } from 'vue';
 
   const EmbeddedSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
@@ -47,4 +48,4 @@
           localStorage.setItem('MQTTSound', MQTTSoundNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
       }  
   });
-  </script>
+</script>