Adjust shadow colors

app.css

@@ -4,13 +4,15 @@
 
   --background-color: white;
   --text-color: #333;
+  --shadow-color: #ccc;
   --table-alternate-color: #f9f9f9;
   --background-color-attribution: rgba(255, 255, 255, 0.8);
 }
 
 @media (prefers-color-scheme: dark) {
   * {
-    --background-color: #333333;
+    --background-color: #333;
+    --shadow-color: #222;
     --text-color: #cccccc;
     --table-alternate-color: #444;
     --background-color-attribution: rgba(51, 51, 51, 0.8);
@@ -158,7 +160,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard .pane-wrapper {
-  box-shadow: 0 0.15em 0.5em #ccc;
+  box-shadow: 0 0.15em 0.5em var(--shadow-color);
   margin: 1em 0 3em 0;
 }
 
@@ -191,6 +193,7 @@ h1, h2, h3, h4, h5, h6 {
 
 #wizard #type-pane .radiogroup label {
   background-color: #ffb400;
+  color: #333333;
 }
 
 #wizard #type-pane .radiogroup input[type="radio"]:checked + label {
@@ -215,11 +218,11 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard #branch-pane.show-experimental-warning button.dl-experimental {
-  box-shadow: 0 0 0.5em #005ea0 inset;
+  box-shadow: 0 0 0.5em var(--shadow-color) inset;
 }
 
 #wizard #type-pane.show-deviceinfo-warning button.deviceinfo {
-  box-shadow: 0 0 0.5em #005ea0 inset;
+  box-shadow: 0 0 0.5em var(--shadow-color) inset;
 }
 
 #wizard #branch-pane .warning-experimental,
@@ -228,7 +231,7 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
   margin: 1em 0;
   padding: 1em;
-  box-shadow: 0.125em 0.125em 0.5em #ccc;
+  box-shadow: 0.125em 0.125em 0.5em var(--shadow-color);
   border: .5em solid #009ee0;
 }
 
@@ -249,7 +252,7 @@ h1, h2, h3, h4, h5, h6 {
   background: var(--background-color);
   border: none;
   border: 1px solid #ddd;
-  box-shadow: 1px 2px 2px 0 #ccc;
+  box-shadow: 1px 2px 2px 0 var(--shadow-color);
   padding: 0.75em 0.75em;
   margin-right: 0.5em;
   margin-bottom: 1em;
@@ -257,7 +260,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard select:focus, #wizard input:focus {
-  box-shadow: 1px 2px 2px 0 #ccc, 2px 2px 6px #ccc;
+  box-shadow: 1px 2px 2px 0 var(--shadow-color), 2px 2px 6px var(--shadow-color);
 }
 
 #wizard option {
@@ -282,7 +285,7 @@ h1, h2, h3, h4, h5, h6 {
   margin: .5em;
   padding: .5em 1em;
   border: none;
-  box-shadow: 0.125em 0.125em 0.5em #ccc;
+  box-shadow: 0.125em 0.125em 0.5em var(--shadow-color);
   font-weight: normal;
   cursor: pointer;
 }
@@ -330,14 +333,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #wizard .imagePreview .preview:hover {
-  border: 1px solid #ccc;
+  border: 1px solid var(--shadow-color);
   cursor: pointer;
 }
 
 #wizard .imagePreview .preview.selected {
-  border: 1px solid #ccc;
+  border: 1px solid var(--shadow-color);
   cursor: default;
-  box-shadow: 0 0 0.5em #ccc inset;
+  box-shadow: 0 0 0.5em var(--shadow-color) inset;
 }
 
 #wizard .imagePreview .preview img {