improve color picker

css/style.css

@@ -141,6 +141,7 @@ table input:enabled {
 
 #colorPicker{
     width: 2.5rem;
+    height: auto;
 }
 
 @media (prefers-color-scheme:dark) {

js/sudoku.js

@@ -11,6 +11,7 @@ let history = []
 let accessKeyModifiers = "AccessKey+"
 let easyBoxes = []
 let insertRadios = []
+let defautColor = ""
 
 function shuffle(iterable) {
     array = Array.from(iterable)
@@ -81,7 +82,8 @@ window.onload = function() {
 
     loadSavedGame()
 
-    colorPicker.value = getComputedStyle(document.body).getPropertyValue("--bs-body-color")
+    defautColor = getComputedStyle(grid).getPropertyValue("--bs-body-color")
+    colorPicker.value = defautColor
 
     if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register(`service-worker.php?location=${location.pathname}`)
@@ -174,7 +176,7 @@ function oninput() {
         this.previousPlaceholder = this.placeholder
         refreshBox(this)
     }
-    if (colorPicker.value) {
+    if (colorPicker.value && colorPicker.value != defautColor) {
         this.style.setProperty("color", colorPicker.value)
     }
 }

sudoku.php

@@ -24,7 +24,7 @@
                     <i class="ri-eraser-fill"></i>
                 </label>
             </div>
-            <input type="color" class="btn btn-primary form-control form-control-sm form-control-color" id="colorPicker" title="Couleur"/>
+            <input type="color" class="btn btn-primary form-control form-control-sm form-control-color" id="colorPicker" title="Changer la couleur"/>
             <div class='btn-group'>
                 <input type='checkbox' id='sightCheckbox' class='btn-check' onclick='highlighterCheckbox.checked = false; refreshUI()' />
                 <label for='sightCheckbox' class='btn btn-info' title='Surligner la ligne, la colonne et la région de la case survolée'>