From ef8fce67f12fd4f7c8d0cdf87d7f9f6f326f6314 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Tue, 30 Jun 2026 16:37:13 +0100
Subject: [PATCH] Merge pull request #35033 from
 overleaf/mj-drop-dark-mode-components-opt-in

[web] Remove explicit dark mode component opt-in

GitOrigin-RevId: b28603a9989bd046039c247ee2cf9f740c9feac0
---
 .../components/file-tree-context-menu.tsx     |  7 +-----
 .../components/pdf-preview-detached-root.tsx  | 10 +-------
 .../components/tabs/tabs-context-menu.tsx     |  3 +--
 .../stylesheets/components/button.scss        |  7 ++----
 .../stylesheets/components/dropdown-menu.scss |  9 +-------
 .../stylesheets/components/footer.scss        | 16 ++++++-------
 .../frontend/stylesheets/components/form.scss | 11 ++++-----
 .../stylesheets/components/modal.scss         | 23 +++++++++++++------
 .../stylesheets/components/notifications.scss | 12 +++++-----
 .../pdf-preview/pdf-logs-entries.spec.tsx     |  6 +----
 .../pdf-preview/pdf-preview.spec.tsx          |  8 +------
 11 files changed, 41 insertions(+), 71 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
index 072fbc1087..debc2bd083 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
@@ -95,12 +95,7 @@ function FileTreeContextMenu() {
       : 'down'
 
   return ReactDOM.createPortal(
-    <div
-      style={contextMenuCoords}
-      // TODO ide-redesign-cleanup: remove 'ide-redesign-main' class when old editor is removed
-      // It is only used to apply dark theme styles to the context menu in the new editor
-      className="context-menu ide-redesign-main"
-    >
+    <div style={contextMenuCoords} className="context-menu">
       <Dropdown
         show
         drop={dropDirection}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx
index d93d8d961f..a2d70ccff8 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx
@@ -28,15 +28,7 @@ function PdfPreviewDetachedRootContent() {
       activeOverallTheme === 'dark' ? 'default' : 'light'
   }, [activeOverallTheme])
 
-  return (
-    <EditorRedesignWrapper>
-      <PdfPreview />
-    </EditorRedesignWrapper>
-  )
-}
-function EditorRedesignWrapper({ children }: { children: React.ReactNode }) {
-  // TODO ide-redesign-cleanup: this wrapper should not be required
-  return <div className="ide-redesign-main">{children}</div>
+  return <PdfPreview />
 }
 
 export default PdfPreviewDetachedRoot // for testing
diff --git a/services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx b/services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx
index 6812895cab..c06e728dc8 100644
--- a/services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx
+++ b/services/web/frontend/js/features/source-editor/components/tabs/tabs-context-menu.tsx
@@ -73,8 +73,7 @@ export function TabsContextMenu() {
     <div
       ref={menuRef}
       style={{ top: contextMenuTarget.top, left: contextMenuTarget.left }}
-      // TODO ide-redesign-cleanup: remove 'ide-redesign-main' class when old editor is removed
-      className="context-menu ide-redesign-main"
+      className="context-menu"
     >
       <Dropdown
         show
diff --git a/services/web/frontend/stylesheets/components/button.scss b/services/web/frontend/stylesheets/components/button.scss
index c42af66b6d..cdb00dd878 100644
--- a/services/web/frontend/stylesheets/components/button.scss
+++ b/services/web/frontend/stylesheets/components/button.scss
@@ -94,11 +94,8 @@
   }
 
   @include theme('default') {
-    .ide-redesign-main,
-    .project-ds-nav-page {
-      .btn {
-        @include dark-buttons;
-      }
+    .btn {
+      @include dark-buttons;
     }
   }
 }
diff --git a/services/web/frontend/stylesheets/components/dropdown-menu.scss b/services/web/frontend/stylesheets/components/dropdown-menu.scss
index ef3da5c97c..72396b7a64 100644
--- a/services/web/frontend/stylesheets/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/components/dropdown-menu.scss
@@ -37,14 +37,7 @@
 }
 
 @include theme('default') {
-  .ide-redesign-main,
-  .project-ds-nav-page,
-  // Codemirror tooltips are rendered outside of the main app container
-  .cm-tooltip .dropdown-menu,
-  .cm-tooltip .dropdown,
-  .cm-tooltip .editor-floating-menu {
-    @include dark-dropdown-menu;
-  }
+  @include dark-dropdown-menu;
 }
 
 $dropdown-item-min-height: 36px;
diff --git a/services/web/frontend/stylesheets/components/footer.scss b/services/web/frontend/stylesheets/components/footer.scss
index fd7c3fb2b8..f3c5829886 100644
--- a/services/web/frontend/stylesheets/components/footer.scss
+++ b/services/web/frontend/stylesheets/components/footer.scss
@@ -68,16 +68,14 @@ $footer-width-delta: 320px;
   }
 
   @include theme('default') {
-    .ide-redesign-main,
-    .project-ds-nav-page {
-      .cookie-banner {
-        @include cookie-banner-dark;
-      }
+    .cookie-banner {
+      @include cookie-banner-dark;
+    }
 
-      .fat-footer {
-        @include footer-dark;
-        @include socials-dark;
-      }
+    .website-redesign-fat-footer,
+    .website-redesign .fat-footer {
+      @include footer-dark;
+      @include socials-dark;
     }
   }
 }
diff --git a/services/web/frontend/stylesheets/components/form.scss b/services/web/frontend/stylesheets/components/form.scss
index 5d6703a36c..6331481266 100644
--- a/services/web/frontend/stylesheets/components/form.scss
+++ b/services/web/frontend/stylesheets/components/form.scss
@@ -118,14 +118,11 @@
 }
 
 @include theme('default') {
-  .ide-redesign-main,
-  .project-ds-nav-page {
-    @include form-check-dark;
+  @include form-check-dark;
 
-    .form-control,
-    .form-control-wrapper {
-      @include dark-input;
-    }
+  .form-control,
+  .form-control-wrapper {
+    @include dark-input;
   }
 }
 
diff --git a/services/web/frontend/stylesheets/components/modal.scss b/services/web/frontend/stylesheets/components/modal.scss
index 785b48a7e9..3292325d36 100644
--- a/services/web/frontend/stylesheets/components/modal.scss
+++ b/services/web/frontend/stylesheets/components/modal.scss
@@ -2,13 +2,22 @@
   --bs-heading-color: var(--content-primary);
 }
 
-.modal {
-  // Until we add a dark modal version, all core components in modals should use light theme
-  @include light-dropdown-menu;
-  @include form-check-light;
-  @include light-notification;
-  @include light-input;
-  @include light-buttons;
+@include theme('default') {
+  .modal {
+    // Until we add a dark modal version, all core components in modals should use light theme
+    @include light-dropdown-menu;
+    @include light-notification;
+    @include form-check-light;
+
+    .form-control,
+    .form-control-wrapper {
+      @include light-input;
+    }
+
+    .btn {
+      @include light-buttons;
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {
diff --git a/services/web/frontend/stylesheets/components/notifications.scss b/services/web/frontend/stylesheets/components/notifications.scss
index 616fa012a9..337d5a124d 100644
--- a/services/web/frontend/stylesheets/components/notifications.scss
+++ b/services/web/frontend/stylesheets/components/notifications.scss
@@ -53,17 +53,17 @@
 
   @include light-notification;
 
-  // Until we roll out dark mode notifications, make sure we show buttons in
-  // light mode even when the rest of the page is in dark mode
-  .ide-redesign-main .notification .btn {
-    @include light-buttons;
-  }
-
   @include theme('default') {
     --notification-ai-paywall-background: var(--bg-dark-secondary);
     --notification-ai-paywall-color: var(--content-primary-dark);
     --notification-ai-paywall-border-color: var(--blue-30);
 
+    // Until we roll out dark mode notifications, make sure we show buttons in
+    // light mode even when the rest of the page is in dark mode
+    .notification .btn {
+      @include light-buttons;
+    }
+
     .project-ds-nav-page {
       .notification {
         @include dark-notification;
diff --git a/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx b/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx
index adcdad532d..3fffdf029d 100644
--- a/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx
+++ b/services/web/test/frontend/components/pdf-preview/pdf-logs-entries.spec.tsx
@@ -62,12 +62,8 @@ describe('<PdfLogsEntries/>', function () {
     )
   }
 
-  // TODO: Remove the ide-redesign-main wrapper when dark-mode buttons are rolled
-  // out globally.
   const LogsPanel = ({ children }: { children: ReactElement }) => (
-    <div className="ide-redesign-main">
-      <div className="error-logs"> {children}</div>
-    </div>
+    <div className="error-logs"> {children}</div>
   )
 
   const logEntries: LogEntry[] = [
diff --git a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx
index 5d16f97ce5..16389878c0 100644
--- a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx
+++ b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx
@@ -29,13 +29,7 @@ const Layout: FC<{ layout: IdeLayout; view?: IdeView }> = ({
 }
 
 const PdfViewer = ({ children }: { children: ReactElement }) => {
-  return (
-    // TODO: ide-redesign-cleanup: Remove the .ide-redesign-main wrapper when
-    // the styles are no longer nested in that.
-    <div className="ide-redesign-main">
-      <div className="pdf-viewer">{children}</div>
-    </div>
-  )
+  return <div className="pdf-viewer">{children}</div>
 }
 
 describe('<PdfPreview/>', function () {