docs: enable dark mode behind theme toggle (default stays light)

docs.json

@@ -21,7 +21,7 @@
   "theme": "palm",
   "appearance": {
     "default": "light",
-    "strict": true
+    "strict": false
   },
   "name": "Kernel",
   "colors": {
@@ -283,10 +283,14 @@
       }
     ]
   },
-  "logo": "/logo/black.svg",
+  "logo": {
+    "light": "/logo/black.svg",
+    "dark": "/logo/light.svg"
+  },
   "background": {
     "color": {
-      "light": "#F0F0F3"
+      "light": "#F0F0F3",
+      "dark": "#212225"
     }
   },
   "footer": {

style.css

@@ -178,3 +178,43 @@ table tbody td:first-child {
     width: 100%;
   }
 }
+
+/* dark mode overrides */
+html.dark .prose table,
+html.dark article table,
+html.dark table {
+  border-color: rgba(237, 238, 240, 0.1) !important;
+  background-color: rgba(237, 238, 240, 0.02) !important;
+}
+
+html.dark .prose table thead th,
+html.dark article table thead th,
+html.dark table thead th {
+  background-color: rgba(237, 238, 240, 0.04) !important;
+  border-bottom-color: rgba(237, 238, 240, 0.1) !important;
+}
+
+html.dark .prose table tbody tr,
+html.dark article table tbody tr,
+html.dark table tbody tr {
+  border-bottom-color: rgba(237, 238, 240, 0.08) !important;
+}
+
+html.dark .prose table tbody tr:hover,
+html.dark article table tbody tr:hover,
+html.dark table tbody tr:hover {
+  background-color: rgba(237, 238, 240, 0.04) !important;
+}
+
+/* tinker box border */
+html.dark .tinker-box {
+  border-color: rgba(237, 238, 240, 0.14);
+}
+
+/* pricing calculator button border */
+html.dark {
+  --btn-border: #EDEEF0;
+}
+
+/* hero bot dark recolor */
+html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }