From 1ef71609e7ff18bf990e8ee64b45e88db916faf3 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Wed, 19 Aug 2026 12:29:58 +0200
Subject: [PATCH] Show the light/dark toggle on laptop-width screens (#4515)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 .changeset/dark-mode-toggle-laptop.md             |  5 +++++
 packages/gitbook/src/components/Footer/Footer.tsx | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/dark-mode-toggle-laptop.md

diff --git a/.changeset/dark-mode-toggle-laptop.md b/.changeset/dark-mode-toggle-laptop.md
new file mode 100644
index 000000000..6d30db12b
--- /dev/null
+++ b/.changeset/dark-mode-toggle-laptop.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Show the theme toggle in the footer whenever the outline column that hosts the other toggle isn't pinned open, so it stays reachable on laptop-sized screens in wide layouts and while the AI chat is open.
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
index 46c72ec39..539af7925 100644
--- a/packages/gitbook/src/components/Footer/Footer.tsx
+++ b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -30,8 +30,11 @@ export function Footer(props: { context: GitBookSiteContext }) {
             data-gb-site-footer
             className={tcls(
                 'border-tint-subtle border-t',
-                // If the footer only contains a mode toggle, we only show it on smaller screens
-                mobileOnly ? 'xl:hidden' : null
+                // If the footer only contains a mode toggle, we only show it where the outline
+                // column — which carries its own toggle — isn't pinned open.
+                mobileOnly
+                    ? 'layout-default:xl:chat-closed:hidden layout-default:3xl:hidden layout-wide:3xl:chat-closed:hidden page-api-block:page-has-outline:min-[96rem]:hidden'
+                    : null
             )}
         >
             <div className="lg:chat-open:pr-(--ai-chat-width) transition-[padding] duration-300 motion-reduce:transition-none">
@@ -96,7 +99,9 @@ export function Footer(props: { context: GitBookSiteContext }) {
                         {
                             // Theme Toggle
                             customization.themes.toggeable ? (
-                                <div className="-col-start-2 row-start-1 flex items-start @xs:justify-end xl:hidden">
+                                // Hidden where the outline column is pinned open (see PageAside),
+                                // since that column carries its own toggle.
+                                <div className="page-api-block:page-has-outline:min-[96rem]:hidden -col-start-2 row-start-1 flex items-start @xs:justify-end layout-default:xl:chat-closed:hidden layout-default:3xl:hidden layout-wide:3xl:chat-closed:hidden">
                                     <React.Suspense fallback={null}>
                                         <ThemeToggler />
                                     </React.Suspense>