Light mode support

resources/js/components/IterationTable.vue

@@ -46,7 +46,7 @@ const rowBgDark = computed(() => {
             v-for="(iteration, index) in props.iterations"
             v-bind:key="index"
             :class="{
-                'bg-gray-900': rowBgDark[index],
+                'bg-gray-300 dark:bg-gray-900': rowBgDark[index],
             }"
         >
             <td>{{ iteration.epoch }}</td>
@@ -60,7 +60,7 @@ const rowBgDark = computed(() => {
             <td>{{ iteration.error.toFixed(2) }}</td>
         </tr>
 
-        <tr v-if="props.trainingEnded" class="bg-red-900 text-center">
+        <tr v-if="props.trainingEnded" class="bg-red-400 dark:bg-red-900 text-center">
             <td colspan="100%">
                 <strong>Entraînement terminé :</strong>
                 {{ props.trainingEndReason }}

resources/js/components/PerceptronDecisionGraph.vue

@@ -20,14 +20,18 @@ const farLeftDataPointX = computed(() => {
     if (props.cleanedDataset.length === 0) {
         return 0;
     }
-    const minX = Math.min(...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)));
+    const minX = Math.min(
+        ...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)),
+    );
     return minX;
 });
 const farRightDataPointX = computed(() => {
     if (props.cleanedDataset.length === 0) {
         return 0;
     }
-    const maxX = Math.max(...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)));
+    const maxX = Math.max(
+        ...props.cleanedDataset.flatMap((d) => d.data.map((point) => point.x)),
+    );
     return maxX;
 });
 
@@ -45,7 +49,8 @@ function getPerceptronDecisionBoundaryDataset(
         networkWeights.length == 1 &&
         networkWeights[0].length == 1 &&
         networkWeights[0][0].length == 3
-    ) { // Unique, 3 weights perceptron
+    ) {
+        // Unique, 3 weights perceptron
         const perceptronWeights = networkWeights[0][0]; // We take the unique perceptron
 
         function perceptronLine(x: number): number {
@@ -132,7 +137,7 @@ function getPerceptronDecisionBoundaryDataset(
 <template>
     <Chart
         v-if="props.cleanedDataset.length > 0 || props.iterations.length > 0"
-        class="flex"
+        class="flex bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,
             maintainAspectRatio: true,
@@ -189,8 +194,7 @@ function getPerceptronDecisionBoundaryDataset(
                     type: 'scatter',
                     label: `Label ${dataset.label}`,
                     data: dataset.data,
-                    backgroundColor:
+                    backgroundColor: colors[index] || '#AAA',
-                        colors[index] || '#AAA',
                 })),
 
                 // Perceptron decision boundary

resources/js/components/PerceptronIterationsErrorsGraph.vue

@@ -5,11 +5,14 @@ import { Bar } from 'vue-chartjs';
 import { colors, gridColor, gridColorBold } from '@/types/graphs';
 import type { Iteration } from '@/types/perceptron';
 import Toggle from './ui/toggle/Toggle.vue';
+import { usePage } from '@inertiajs/vue3';
 
 const props = defineProps<{
     iterations: Iteration[];
 }>();
 
+const page = usePage();
+
 const epochErrorOnly = ref<boolean>(false);
 
 /**
@@ -84,7 +87,7 @@ const datasets = computed<
 
 <template>
     <Bar
-        class="flex"
+        class="bg-primary dark:bg-transparent!"
         :options="{
             responsive: true,
             maintainAspectRatio: true,