diff --git a/docs.json b/docs.json
index 7534905..4907f53 100644
--- a/docs.json
+++ b/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": "#111113"
}
},
"footer": {
diff --git a/images/tinker-bot-dark.svg b/images/tinker-bot-dark.svg
new file mode 100644
index 0000000..31549ab
--- /dev/null
+++ b/images/tinker-bot-dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/logo/light.svg b/logo/light.svg
new file mode 100644
index 0000000..a0172f8
--- /dev/null
+++ b/logo/light.svg
@@ -0,0 +1,9 @@
+
diff --git a/style.css b/style.css
index a19ac30..960e85b 100644
--- a/style.css
+++ b/style.css
@@ -178,3 +178,50 @@ table tbody td:first-child {
width: 100%;
}
}
+
+/* dark mode overrides
+ light mode is the default above; these only apply when Mintlify adds .dark to .
+ The base rules hardcode light colors (opaque light table fill, rgba(0,0,0,...) borders,
+ #000 button border), which read as bright boxes or invisible lines on a dark background. */
+
+/* tables: swap the opaque light fill and black-alpha borders for white-alpha on dark */
+html.dark .prose table,
+html.dark article table,
+html.dark table {
+ border-color: rgb(255 255 255 / 0.1) !important;
+ background-color: rgb(255 255 255 / 0.02) !important;
+}
+
+html.dark .prose table thead th,
+html.dark article table thead th,
+html.dark table thead th {
+ background-color: rgba(255, 255, 255, 0.04) !important;
+ border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+html.dark .prose table tbody tr,
+html.dark article table tbody tr,
+html.dark table tbody tr {
+ border-bottom-color: rgba(255, 255, 255, 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(255, 255, 255, 0.04) !important;
+}
+
+/* tinker box border is invisible on dark without this */
+html.dark .tinker-box {
+ border-color: rgba(255, 255, 255, 0.14);
+}
+
+/* pricing calculator button border */
+html.dark {
+ --btn-border: #fff;
+}
+
+/* hero bot: a flat #1C2024 silhouette with no card frame, invisible against #111113.
+ the card illustrations (o11y, chromium, auth, stealth) intentionally keep their light
+ tiles on dark — they read as framed illustrations, not page leakage. */
+html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }