color picker icon

css/style.css

@@ -3,6 +3,10 @@ body {
     margin: auto;
 }
 
+.btn {
+    padding: .275rem .625rem;   
+}
+
 input[type="number"]::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none !important;
@@ -139,9 +143,10 @@ table input:enabled {
     color: var(--bs-secondary-color) !important;
 }
 
-#colorPicker{
-    width: 2.5rem;
+#colorPickerInput{
+    width: 2.3rem;
     height: auto;
+    padding: .375rem;
 }
 
 @media (prefers-color-scheme:dark) {

js/sudoku.js

@@ -11,7 +11,6 @@ let history = []
 let accessKeyModifiers = "AccessKey+"
 let easyBoxes = []
 let insertRadios = []
-let defautColor = ""
 
 function shuffle(iterable) {
     array = Array.from(iterable)
@@ -82,9 +81,6 @@ window.onload = function() {
 
     loadSavedGame()
 
-    defautColor = getComputedStyle(grid).getPropertyValue("--bs-body-color")
-    colorPicker.value = defautColor
-
     if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register(`service-worker.php?location=${location.pathname}`)
     }
@@ -176,8 +172,8 @@ function oninput() {
         this.previousPlaceholder = this.placeholder
         refreshBox(this)
     }
-    if (colorPicker.value && colorPicker.value != defautColor) {
-        this.style.setProperty("color", colorPicker.value)
+    if (penColor) {
+        this.style.setProperty("color", penColor)
     }
 }
 
@@ -328,6 +324,13 @@ function insert(radio) {
     }
 }
 
+let penColor
+
+function changeColor() {
+    penColor = colorPickerInput.value
+    colorPickerLabel.style.color = colorPickerInput.value
+}
+
 function undo() {
     if (history.length) {
         const previousState = history.pop()

sudoku.php

@@ -24,7 +24,10 @@
                     <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="Changer la couleur"/>
+            <input type="color" class="btn-check" id="colorPickerInput" title="Changer la couleur" oninput="changeColor()"/>
+            <label id="colorPickerLabel" for="colorPickerInput" class="btn btn-primary" title="Changer de couleur">
+                <i class="ri-palette-fill"></i>
+            </label>
             <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'>