css

style.css

@@ -30,7 +30,7 @@ table.table-success input,
 td.table-danger input:disabled,
 table input:not([disabled]) {
     background: transparent !important;
-    color: inherit !important;
+    color: inherit;
 }
 
 table input:not([disabled]):hover {
@@ -136,8 +136,10 @@ table input:enabled {
     cursor: inherit;
 }
 
-.pencil {
+table input:not([disabled]).pencil,
-    color: var(--bs-secondary-color) !important;
+table input:not([disabled])::placeholder {
+    color: #6c757d;
+    font-size: 1rem !important;
 }
 
 #colorPickerInput{
@@ -146,13 +148,10 @@ table input:enabled {
     padding: .375rem;
 }
 
-#colorPickerLabel {
-    color: var(--bs-body-color);
-}
-
 @media (prefers-color-scheme:dark) {
-    .pencil {
+    table input:not([disabled]).pencil,
-        color: #5a5a5a !important;
+    table input:not([disabled])::placeholder {
+        color: #5a5a5a;
     }
 }
 

sudoku.js

@@ -58,7 +58,7 @@ window.onload = function() {
     if (localStorage["tool"] == "sight") sightCheckbox.checked = true
     else if (localStorage["tool"] == "highlighter") highlighterCheckbox.checked = true
 
-    colorPickerInput.value = window.getComputedStyle(grid).getPropertyValue("--bs-body-color")
+    // colorPickerInput.value = window.getComputedStyle(grid).getPropertyValue("--bs-body-color")
 
     boxes.forEach(box => {
         box.neighbourhood = new Set(rows[box.rowId].concat(columns[box.columnId]).concat(regions[box.regionId]))
@@ -320,7 +320,7 @@ let penColor
 
 function changeColor() {
     penColor = colorPickerInput.value
-    colorPickerLabel.style.color = colorPickerInput.value
+    colorPickerLabel.style.setProperty("color", penColor)
 }
 
 function restart() {