From 1518d580b72f2139790f50f98cae11c49845fcf0 Mon Sep 17 00:00:00 2001 From: phani Date: Fri, 29 May 2026 22:46:25 -0400 Subject: [PATCH 1/4] feat(docs): enable dark mode (toggle on, default stays light) - Add light/dark logo pair and dark background (#111113, brand grey-dark scale) - Add html.dark overrides for tables, tinker-box, button border, hero bot - Keep default appearance light; dark is opt-in pending brand/design review --- docs.json | 10 +++++++--- logo/light.svg | 9 +++++++++ style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 logo/light.svg 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/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..2229ab8 100644 --- a/style.css +++ b/style.css @@ -178,3 +178,51 @@ 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; +} + +/* homepage hero bot: a flat #1C2024 shape on transparent, so it disappears on dark. + invert() flips it to near-white without needing a separate asset. */ +html.dark img[src*="tinker-bot"] { + filter: invert(1) !important; +} From 0ad3188dabfb5dffe0d373eb5c7e3533a4967086 Mon Sep 17 00:00:00 2001 From: jarugupj <121142710+jarugupj@users.noreply.github.com> Date: Sat, 30 May 2026 03:07:53 +0000 Subject: [PATCH 2/4] polish(docs): dark-mode card + hero illustrations - add dark-recolored variants for the four homepage card svgs (o11y, chromium, auth, stealth) so cream/tan/green tiles no longer blast on the dark page bg - add dark-recolored tinker-bot variant and drop the filter: invert() hack on style.css - swap variants under html.dark via content: url(...) so index.mdx stays untouched and light mode is byte-for-byte identical contrast on #111113: body #EDEEF0 ~16:1, accent #CAB168 ~9:1 (WCAG AAA). --- images/auth-dark.svg | 20 ++++++++++ images/chromium-dark.svg | 45 ++++++++++++++++++++++ images/o11y-dark.svg | 45 ++++++++++++++++++++++ images/stealth-dark.svg | 76 ++++++++++++++++++++++++++++++++++++++ images/tinker-bot-dark.svg | 3 ++ style.css | 12 +++--- 6 files changed, 196 insertions(+), 5 deletions(-) create mode 100644 images/auth-dark.svg create mode 100644 images/chromium-dark.svg create mode 100644 images/o11y-dark.svg create mode 100644 images/stealth-dark.svg create mode 100644 images/tinker-bot-dark.svg diff --git a/images/auth-dark.svg b/images/auth-dark.svg new file mode 100644 index 0000000..f433f42 --- /dev/null +++ b/images/auth-dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/images/chromium-dark.svg b/images/chromium-dark.svg new file mode 100644 index 0000000..edcb622 --- /dev/null +++ b/images/chromium-dark.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/o11y-dark.svg b/images/o11y-dark.svg new file mode 100644 index 0000000..a844102 --- /dev/null +++ b/images/o11y-dark.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/stealth-dark.svg b/images/stealth-dark.svg new file mode 100644 index 0000000..de99d4a --- /dev/null +++ b/images/stealth-dark.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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/style.css b/style.css index 2229ab8..8dab1ae 100644 --- a/style.css +++ b/style.css @@ -221,8 +221,10 @@ html.dark { --btn-border: #fff; } -/* homepage hero bot: a flat #1C2024 shape on transparent, so it disappears on dark. - invert() flips it to near-white without needing a separate asset. */ -html.dark img[src*="tinker-bot"] { - filter: invert(1) !important; -} +/* homepage card + hero bot illustrations: light variants have cream/tan backgrounds + that read as bright tiles on dark. swap to recolored dark variants. */ +html.dark img[src$="/images/o11y.svg"] { content: url("/images/o11y-dark.svg"); } +html.dark img[src$="/images/chromium.svg"] { content: url("/images/chromium-dark.svg"); } +html.dark img[src$="/images/auth.svg"] { content: url("/images/auth-dark.svg"); } +html.dark img[src$="/images/stealth.svg"] { content: url("/images/stealth-dark.svg"); } +html.dark img[src$="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); } From 0ef618e1f484bc2030f88a9d3ab62f86cd8fcc9d Mon Sep 17 00:00:00 2001 From: jarugupj <121142710+jarugupj@users.noreply.github.com> Date: Sat, 30 May 2026 03:23:08 +0000 Subject: [PATCH 3/4] revert(docs): keep homepage card illustrations light on dark page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit the cream/green/tan card tiles read as framed illustrations on a dark page, not as page leakage. keeping them aligns with how the kernel.sh brand handles illustrations (always light surface) and avoids the visual inconsistency of charcoal-everything-except-chromium-green. tinker-bot keeps its dark-recolored variant: it's a flat silhouette with no card frame, so it actually disappears against #111113 — that swap is a readability fix, not a brand call. --- images/auth-dark.svg | 20 ----------- images/chromium-dark.svg | 45 ------------------------ images/o11y-dark.svg | 45 ------------------------ images/stealth-dark.svg | 76 ---------------------------------------- style.css | 9 ++--- 5 files changed, 3 insertions(+), 192 deletions(-) delete mode 100644 images/auth-dark.svg delete mode 100644 images/chromium-dark.svg delete mode 100644 images/o11y-dark.svg delete mode 100644 images/stealth-dark.svg diff --git a/images/auth-dark.svg b/images/auth-dark.svg deleted file mode 100644 index f433f42..0000000 --- a/images/auth-dark.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/images/chromium-dark.svg b/images/chromium-dark.svg deleted file mode 100644 index edcb622..0000000 --- a/images/chromium-dark.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/images/o11y-dark.svg b/images/o11y-dark.svg deleted file mode 100644 index a844102..0000000 --- a/images/o11y-dark.svg +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/images/stealth-dark.svg b/images/stealth-dark.svg deleted file mode 100644 index de99d4a..0000000 --- a/images/stealth-dark.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/style.css b/style.css index 8dab1ae..ad4f3dc 100644 --- a/style.css +++ b/style.css @@ -221,10 +221,7 @@ html.dark { --btn-border: #fff; } -/* homepage card + hero bot illustrations: light variants have cream/tan backgrounds - that read as bright tiles on dark. swap to recolored dark variants. */ -html.dark img[src$="/images/o11y.svg"] { content: url("/images/o11y-dark.svg"); } -html.dark img[src$="/images/chromium.svg"] { content: url("/images/chromium-dark.svg"); } -html.dark img[src$="/images/auth.svg"] { content: url("/images/auth-dark.svg"); } -html.dark img[src$="/images/stealth.svg"] { content: url("/images/stealth-dark.svg"); } +/* 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"); } From 1a16d5b1485af3fd7a40cc0da8ff44dbf26f5607 Mon Sep 17 00:00:00 2001 From: jarugupj <121142710+jarugupj@users.noreply.github.com> Date: Sat, 30 May 2026 03:32:28 +0000 Subject: [PATCH 4/4] fix(docs): match tinker-bot src as substring to handle mintlify cdn rewrite mintlify rewrites img srcs at deploy time to a cdn url with query params (/{deployment}/{hash}/images/tinker-bot.svg?fit=max&auto=format&...), so the prior [src$="..."] suffix selector never matched in production and the dark recolor swap silently no-op'd. [src*="..."] handles both raw and rewritten srcs. --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index ad4f3dc..960e85b 100644 --- a/style.css +++ b/style.css @@ -224,4 +224,4 @@ html.dark { /* 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"); } +html.dark img[src*="/images/tinker-bot.svg"] { content: url("/images/tinker-bot-dark.svg"); }