Merge pull request #23925 from overleaf/mj-ide-dark-mode

[web] Editor Redesign: Add dark mode

GitOrigin-RevId: 063552ee3c1647e8ae090852868b01d372845b87

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -241,7 +241,11 @@ export const RailPanelHeader: FC<{ title: string }> = ({ title }) => {
   return (
     <header className="rail-panel-header">
       <h4 className="rail-panel-title">{title}</h4>
-      <OLButton onClick={handlePaneCollapse} variant="ghost" size="sm">
+      <OLButton
+        onClick={handlePaneCollapse}
+        className="rail-panel-header-button-subdued"
+        size="sm"
+      >
         <MaterialIcon type="close" />
       </OLButton>
     </header>

services/web/frontend/js/features/ide-redesign/components/toolbar/change-layout-button.tsx

@@ -17,7 +17,6 @@ const LayoutDropdownToggleButton = forwardRef<
   return (
     <OLButton
       size="sm"
-      variant="ghost"
       className="ide-redesign-toolbar-button-subdued"
       ref={ref}
       onClick={onClick}

services/web/frontend/js/features/ide-redesign/components/toolbar/menu-bar.tsx

@@ -15,7 +15,7 @@ export const ToolbarMenuBar = () => {
       <MenuBarDropdown
         title={t('file')}
         id="file"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <MenuBarOption title="New File" />
         <MenuBarOption title="New Project" />
@@ -23,7 +23,7 @@ export const ToolbarMenuBar = () => {
       <MenuBarDropdown
         title={t('edit')}
         id="edit"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <MenuBarOption title="Undo" />
         <MenuBarOption title="Redo" />
@@ -35,14 +35,14 @@ export const ToolbarMenuBar = () => {
       <MenuBarDropdown
         title={t('view')}
         id="view"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <ChangeLayoutOptions />
       </MenuBarDropdown>
       <MenuBarDropdown
         title={t('insert')}
         id="insert"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <MenuBarOption title="Insert figure" />
         <MenuBarOption title="Insert table" />
@@ -52,14 +52,14 @@ export const ToolbarMenuBar = () => {
       <MenuBarDropdown
         title={t('format')}
         id="format"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <MenuBarOption title="Bold text" />
       </MenuBarDropdown>
       <MenuBarDropdown
         title={t('help')}
         id="help"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
       >
         <MenuBarOption title="Keyboard shortcuts" />
         <MenuBarOption title="Documentation" />

services/web/frontend/js/features/ide-redesign/components/toolbar/project-title.tsx

@@ -16,8 +16,7 @@ export const ToolbarProjectTitle = () => {
     <Dropdown align="start">
       <DropdownToggle
         id="project-title-options"
-        className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold"
-        variant="secondary"
+        className="ide-redesign-toolbar-dropdown-toggle-subdued fw-bold  ide-redesign-toolbar-button-subdued"
       >
         {name}
         <MaterialIcon

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -29,11 +29,7 @@ const ToolbarMenus = () => {
     <div className="ide-redesign-toolbar-menu">
       <div className="ide-redesign-toolbar-home-button">
         <a href="/project" className="ide-redesign-toolbar-home-link">
-          <img
-            className="toolbar-ol-logo"
-            src="/img/ol-brand/overleaf-o-dark.svg"
-            alt={t('overleaf_logo')}
-          />
+          <span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
           <MaterialIcon type="home" className="toolbar-ol-home-button" />
         </a>
       </div>

services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss

@@ -1,15 +1,35 @@
+:root {
+  --integrations-panel-bg: var(--bg-dark-primary);
+  --integrations-panel-color: var(--content-primary-dark);
+  --integrations-panel-description-color: var(--content-secondary-dark);
+  --integrations-panel-card-border: var(--border-divider-dark);
+  --integrations-panel-card-button-hover-background: var(--bg-dark-secondary);
+  --integrations-panel-card-button-background: var(--bg-dark-primary);
+}
+
+@include theme('light') {
+  --integrations-panel-bg: var(--white);
+  --integrations-panel-color: var(--content-primary);
+  --integrations-panel-description-color: var(--content-secondary);
+  --integrations-panel-card-border: var(--border-divider);
+  --integrations-panel-card-button-hover-background: var(--bg-light-secondary);
+  --integrations-panel-card-button-background: var(--white);
+}
+
 .integrations-panel {
-  background-color: var(--white);
+  background-color: var(--integrations-panel-bg);
   height: 100%;
 }
 
 .integrations-panel-card-button {
   all: unset;
-  background-color: var(--white);
+  background-color: var(--integrations-panel-card-button-background);
   width: 100%;
 
   &:hover {
-    background-color: var(--bg-light-secondary) !important;
+    background-color: var(
+      --integrations-panel-card-button-hover-background
+    ) !important;
   }
 }
 
@@ -18,7 +38,7 @@
   margin: 0 var(--spacing-04);
   padding: var(--spacing-04) 0;
   gap: var(--spacing-04);
-  border-bottom: 1px solid var(--border-divider);
+  border-bottom: 1px solid var(--integrations-panel-card-border);
 }
 
 .integrations-panel-card-header {
@@ -43,17 +63,17 @@
 }
 
 .integrations-panel-card-premium-badge {
-  color: var(--content-primary);
+  color: var(--integrations-panel-color);
   font-weight: 600;
 }
 
 .integrations-panel-card-title {
   font-size: var(--font-size-02);
-  color: var(--content-primary);
+  color: var(--integrations-panel-color);
 }
 
 .integrations-panel-card-description {
   font-size: var(--font-size-01);
-  color: var(--content-secondary);
+  color: var(--integrations-panel-description-color);
   margin-bottom: 0;
 }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss

@@ -11,6 +11,18 @@
   --chat-message-name-color: var(--white);
 }
 
+.ide-redesign-main {
+  --chat-bg: var(--bg-dark-primary);
+  --chat-color: var(--content-primary);
+  --chat-instructions-color: var(--content-primary-dark);
+  --chat-new-message-bg: var(--bg-dark-primary);
+  --chat-new-message-textarea-color: var(--content-primary-dark);
+  --chat-new-message-textarea-bg: var(--bg-dark-primary);
+  --chat-message-date-color: var(--content-secondary-dark);
+  --chat-message-name-color: var(--content-secondary-dark);
+  --chat-date-align: center;
+}
+
 @include theme('light') {
   --chat-bg: var(--white);
   --chat-color: var(--neutral-70);
@@ -22,20 +34,20 @@
   --chat-new-message-border: var(--editor-border-color);
   --chat-message-date-color: var(--neutral-70);
   --chat-message-name-color: var(--neutral-70);
-}
 
-.ide-redesign-main {
-  --chat-bg: var(--white);
-  --chat-color: var(--neutral-70);
-  --chat-instructions-color: var(--neutral-70);
-  --chat-new-message-bg: var(--white);
-  --chat-new-message-textarea-color: var(--neutral-90);
-  --chat-new-message-textarea-bg: var(--white);
-  --chat-new-message-textarea-border: var(--editor-border-color);
-  --chat-new-message-border: var(--white);
-  --chat-message-date-color: var(--neutral-70);
-  --chat-message-name-color: var(--neutral-70);
-  --chat-date-align: center;
+  .ide-redesign-main {
+    --chat-bg: var(--white);
+    --chat-color: var(--neutral-70);
+    --chat-instructions-color: var(--neutral-70);
+    --chat-new-message-bg: var(--neutral-10);
+    --chat-new-message-textarea-color: var(--neutral-90);
+    --chat-new-message-textarea-bg: var(--white);
+    --chat-new-message-textarea-border: var(--editor-border-color);
+    --chat-new-message-border: var(--white);
+    --chat-message-date-color: var(--neutral-70);
+    --chat-message-name-color: var(--neutral-70);
+    --chat-date-align: center;
+  }
 }
 
 .chat {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss

@@ -20,20 +20,35 @@
   --file-tree-item-dragging-bg: #{rgb($bg-light-tertiary, 0.9)};
   --file-tree-item-dragging-color: var(--content-secondary);
   --file-tree-item-dragging-preview-colour: var(--bg-light-primary);
+
+  .ide-redesign-main {
+    --file-tree-item-hover-bg: var(--bg-light-secondary);
+    --file-tree-item-selected-bg: var(--bg-dark-primary);
+    --file-tree-item-selected-color: var(--white);
+    --file-tree-item-color: var(--content-primary);
+    --file-tree-bg: var(--white);
+    --file-tree-icon-colour: var(--content-primary);
+    --file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
+    --file-tree-item-dragging-color: var(--white);
+    --file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
+    --file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
+    --file-tree-expand-button-color: var(--content-primary);
+  }
 }
 
 // TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
 .ide-redesign-main {
-  --file-tree-item-hover-bg: var(--bg-light-secondary);
-  --file-tree-item-selected-bg: var(--bg-dark-primary);
-  --file-tree-item-selected-color: var(--white);
-  --file-tree-item-color: var(--content-primary);
-  --file-tree-bg: var(--white);
-  --file-tree-icon-colour: var(--content-primary);
-  --file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
-  --file-tree-item-dragging-color: var(--white);
-  --file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
-  --file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
+  --file-tree-item-hover-bg: var(--bg-dark-secondary);
+  --file-tree-item-selected-bg: var(--green-70);
+  --file-tree-item-selected-color: var(--green-10);
+  --file-tree-item-color: var(--content-primary-dark);
+  --file-tree-bg: var(--bg-dark-primary);
+  --file-tree-icon-colour: var(--content-primary-dark);
+  --file-tree-item-dragging-bg: #{rgb($bg-light-primary, 0.9)};
+  --file-tree-item-dragging-color: var(--content-secondary);
+  --file-tree-item-dragging-preview-bg: var(--bg-light-primary);
+  --file-tree-item-dragging-preview-colour: var(--bg-light-primary);
+  --file-tree-expand-button-color: var(--content-primary-dark);
 
   .file-tree-outline-panel-group {
     background-color: var(--file-tree-bg);
@@ -56,7 +71,7 @@
 
   .file-tree-expand-collapse-button {
     border-radius: var(--border-radius-base);
-    color: var(--outline-content-color);
+    color: var(--file-tree-expand-button-color);
     display: flex;
     align-items: center;
     background-color: transparent;
@@ -69,6 +84,7 @@
     }
 
     h4 {
+      color: var(--file-tree-expand-button-color);
       font-size: var(--font-size-02);
       margin: 0;
       font-weight: normal;
@@ -80,6 +96,7 @@
   }
 
   .file-tree-toolbar-action-button {
+    color: var(--file-tree-expand-button-color);
     padding: var(--spacing-02);
     border-radius: var(--border-radius-full);
 
@@ -87,6 +104,10 @@
       background-color: var(--file-tree-item-hover-bg);
     }
 
+    &:active {
+      color: var(--file-tree-expand-button-color);
+    }
+
     .material-symbols {
       font-size: 16px;
     }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss

@@ -1,17 +1,32 @@
+:root {
+  --ide-redesign-background: var(--bg-dark-primary);
+  --ide-redesign-color: var(--content-primary-dark);
+  --ide-redesign-resizing-background: var(--bg-dark-primary);
+}
+
+@include theme('light') {
+  --ide-redesign-background: var(--bg-light-primary);
+  --ide-redesign-color: var(--content-primary);
+  --ide-redesign-resizing-background: var(--white);
+}
+
 .ide-redesign-body {
   display: flex;
   flex-grow: 1;
-  background-color: var(--bg-light-secondary);
+  background-color: var(--ide-redesign-background);
+  color: var(--ide-redesign-color);
   overflow-y: hidden;
   z-index: 0;
 }
 
 .ide-redesign-main {
-  --editor-resizer-bg-color: var(--bg-light-tertiary);
-
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  .ide-panel-group-resizing {
+    background-color: var(--ide-redesign-resizing-background);
+  }
 }
 
 .ide-skeleton-block {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss

@@ -13,6 +13,10 @@ $editor-toggler-bg-dark-color: color.adjust(
 @include theme('light') {
   --editor-toggler-bg-color: var(--content-disabled);
   --editor-resizer-bg-color: var(--bg-light-tertiary);
+
+  .ide-redesign-main {
+    --editor-resizer-bg-color: var(--bg-light-tertiary);
+  }
 }
 
 #ide-root {
@@ -46,6 +50,8 @@ $editor-toggler-bg-dark-color: color.adjust(
 }
 
 .ide-redesign-main {
+  --editor-resizer-bg-color: var(--bg-dark-tertiary);
+
   .ide-panel-group-resizing {
     background-color: var(--white);
 

services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss

@@ -2,12 +2,16 @@
   --logs-pane-bg: var(--bg-dark-secondary);
 }
 
+.ide-redesign-main {
+  --logs-pane-bg: var(--bg-dark-primary);
+}
+
 @include theme('light') {
   --logs-pane-bg: var(--bg-light-secondary);
-}
 
-.ide-redesign-main {
-  --logs-pane-bg: #fff;
+  .ide-redesign-main {
+    --logs-pane-bg: #fff;
+  }
 }
 
 .logs-pane {
@@ -151,6 +155,7 @@
     }
 
     background-color: var(--bg-light-primary);
+    color: var(--content-primary);
     padding: var(--spacing-04);
   }
 

services/web/frontend/stylesheets/bootstrap-5/pages/editor/outline.scss

@@ -6,7 +6,8 @@
   --outline-line-guide-color: var(--border-primary);
   --outline-container-color-bg: var(--bg-dark-tertiary);
   --outline-content-color: var(--content-primary-dark);
-  --outline-item-highlight-color: var(--neutral-60);
+  --outline-item-highlight-bg: var(--neutral-60);
+  --outline-item-highlight-color: var(--content-primary-dark);
   --outline-item-carat-color: var(--content-disabled);
 }
 
@@ -18,24 +19,39 @@
   --outline-line-guide-color: var(--border-disabled);
   --outline-container-color-bg: var(--bg-light-primary);
   --outline-content-color: var(--content-secondary);
-  --outline-item-highlight-color: var(--bg-light-secondary);
+  --outline-item-highlight-bg: var(--bg-light-secondary);
+  --outline-item-highlight-color: var(--content-secondary);
   --outline-item-carat-color: var(--content-disabled);
+
+  .ide-redesign-main {
+    --outline-bg-color: var(--bg-light-primary);
+    --outline-item-hover-bg: var(--bg-light-secondary);
+    --outline-header-hover-bg: var(--bg-light-secondary);
+    --outline-content-color: var(--content-primary);
+    --outline-item-highlight-bg: var(--bg-light-secondary);
+    --outline-item-highlight-color: var(--content-primary);
+    --outline-item-carat-color: var(--content-primary);
+    --outline-line-guide-color: color-mix(
+      in srgb,
+      var(--border-primary) 24%,
+      transparent
+    );
+    --outline-container-color-bg: var(--bg-light-primary);
+  }
 }
 
 // TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
 .ide-redesign-main {
-  --outline-bg-color: var(--bg-light-primary);
-  --outline-item-hover-bg: var(--bg-light-secondary);
-  --outline-header-hover-bg: var(--bg-light-secondary);
-  --outline-content-color: var(--content-primary);
-  --outline-item-highlight-color: var(--bg-light-secondary);
-  --outline-item-carat-color: var(--content-primary);
-  --outline-line-guide-color: color-mix(
-    in srgb,
-    var(--border-primary) 24%,
-    transparent
-  );
-  --outline-container-color-bg: var(--bg-light-primary);
+  --outline-bg-color: var(--bg-dark-primary);
+  --outline-border-color: var(--border-disabled-dark);
+  --outline-header-hover-bg: var(--bg-dark-primary);
+  --outline-item-hover-bg: var(--bg-dark-secondary);
+  --outline-line-guide-color: var(--border-primary);
+  --outline-container-color-bg: var(--bg-dark-primary);
+  --outline-content-color: var(--content-primary-dark);
+  --outline-item-highlight-bg: var(--green-70);
+  --outline-item-highlight-color: var(--green-10);
+  --outline-item-carat-color: var(--content-disabled);
 
   .file-outline-panel {
     min-height: 36px;
@@ -298,7 +314,8 @@
 }
 
 .outline-item-link-highlight {
-  background-color: var(--outline-item-highlight-color);
+  background-color: var(--outline-item-highlight-bg);
+  color: var(--outline-item-highlight-color);
 }
 
 .outline-caret-icon {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf-error-state.scss

@@ -1,3 +1,19 @@
+:root {
+  --pdf-error-state-info-box-color: var(--content-primary-dark);
+  --pdf-error-state-info-box-background: var(--bg-dark-primary);
+  --pdf-error-state-info-box-border: var(--border-divider-dark);
+  --pdf-error-state-label-color: var(--content-primary-dark);
+  --pdf-error-state-description-color: var(--content-secondary-dark);
+}
+
+@include theme('light') {
+  --pdf-error-state-info-box-color: var(--content-primary);
+  --pdf-error-state-info-box-background: var(--bg-light-primary);
+  --pdf-error-state-info-box-border: var(--border-divider);
+  --pdf-error-state-label-color: var(--content-primary);
+  --pdf-error-state-description-color: var(--content-secondary);
+}
+
 .pdf-error-state {
   position: absolute;
   inset: var(--toolbar-small-height) 0 0 0;
@@ -41,20 +57,22 @@
 
 .pdf-error-state-label {
   font-size: var(--font-size-02);
+  color: var(--pdf-error-state-label-color);
   font-weight: 600;
   margin-bottom: 0;
 }
 
 .pdf-error-state-description {
-  color: var(--content-secondary);
+  color: var(--pdf-error-state-description-color);
   font-size: var(--font-size-02);
   margin-bottom: 0;
 }
 
 .pdf-error-state-info-box {
-  background-color: var(--bg-light-primary);
+  background-color: var(--pdf-error-state-info-box-background);
+  color: var(--pdf-error-state-info-box-color);
   padding: var(--spacing-06);
-  border: 1px solid var(--border-divider);
+  border: 1px solid var(--pdf-error-state-info-box-border);
   border-radius: var(--border-radius-base);
 }
 

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -6,6 +6,10 @@
 
 @include theme('light') {
   --pdf-toolbar-btn-hover-color: var(--neutral-10);
+
+  .ide-redesign-main {
+    --pdf-bg: var(--neutral-10);
+  }
 }
 
 .pdf .toolbar.toolbar-pdf {
@@ -155,6 +159,8 @@
 }
 
 .ide-redesign-main {
+  --pdf-bg: var(--bg-dark-secondary);
+
   .pdf-viewer {
     .pdfjs-viewer {
       .page {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss

@@ -1,9 +1,23 @@
 :root {
+  --ide-rail-background: var(--bg-dark-primary);
+  --ide-rail-color: var(--content-primary-dark);
+  --ide-rail-link-background: var(--bg-dark-primary);
+  --ide-rail-link-active-background: var(--bg-dark-secondary);
+  --ide-rail-link-active-indicator-background: var(--white);
+  --ide-rail-border-colour: var(--border-divider-dark);
+  --ide-rail-header-subdued-button-color: var(--content-primary-dark);
+  --ide-rail-header-subdued-button-hover-background: var(--bg-dark-tertiary);
+}
+
+@include theme('light') {
   --ide-rail-background: #fff;
   --ide-rail-color: var(--neutral-90);
   --ide-rail-link-background: #fff;
   --ide-rail-link-active-background: var(--neutral-10);
   --ide-rail-link-active-indicator-background: var(--neutral-90);
+  --ide-rail-border-colour: var(--border-divider);
+  --ide-rail-header-subdued-button-color: var(--content-primary);
+  --ide-rail-header-subdued-button-hover-background: var(--bg-light-tertiary);
 }
 
 .rail-panel-header {
@@ -12,11 +26,22 @@
   align-items: center;
   padding: var(--spacing-03) var(--spacing-04);
   background-color: var(--ide-rail-background);
+
+  .rail-panel-header-button-subdued {
+    @include ol-button-variant(
+      var(--ide-rail-header-subdued-button-color),
+      transparent,
+      transparent,
+      var(--ide-rail-header-subdued-button-hover-background),
+      transparent,
+      true
+    );
+  }
 }
 
 .rail-panel-title {
   font-size: var(--font-size-02);
-  color: var(--content-primary);
+  color: var(--ide-rail-color);
   margin-bottom: 0;
 }
 
@@ -38,6 +63,11 @@
   position: relative;
   overflow-y: hidden;
 
+  &:hover,
+  &:visited {
+    color: var(--ide-rail-color);
+  }
+
   .ide-rail-tab-link-icon {
     line-height: 32px;
     font-size: 20px;
@@ -75,7 +105,7 @@
   height: 100%;
   padding: var(--spacing-02);
   background: var(--ide-rail-background);
-  border-right: 1px solid var(--border-divider);
+  border-right: 1px solid var(--ide-rail-border-colour);
 }
 
 .ide-rail-content {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss

@@ -1,7 +1,23 @@
 @use 'sass:math';
 
 :root {
-  --toolbar-home-button-hover-background: var(--neutral-20);
+  --redesign-toolbar-home-button-hover-background: var(--bg-dark-secondary);
+  --redesign-toolbar-border-divider: var(--border-divider-dark);
+  --redesign-toolbar-background: var(--bg-dark-primary);
+  --redesign-toolbar-home-link-color: var(--content-primary-dark);
+  --redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-white.svg');
+  --redesign-subdued-button-color: var(--content-primary-dark);
+  --redesign-subdued-button-hover-background: var(--bg-dark-tertiary);
+}
+
+@include theme('light') {
+  --redesign-toolbar-home-button-hover-background: var(--neutral-20);
+  --redesign-toolbar-border-divider: var(--border-divider);
+  --redesign-toolbar-background: var(--bg-light-primary);
+  --redesign-toolbar-home-link-color: var(--content-primary);
+  --redesign-toolbar-logo-url: url('../../../../../public/img/ol-brand/overleaf-o-dark.svg');
+  --redesign-subdued-button-color: var(--content-primary);
+  --redesign-subdued-button-hover-background: var(--bg-light-tertiary);
 }
 
 .ide-redesign-toolbar {
@@ -10,7 +26,8 @@
   $ol-icon-height: 24px;
   $home-icon-font-size: 24px;
 
-  border-bottom: 1px solid var(--border-divider);
+  border-bottom: 1px solid var(--redesign-toolbar-border-divider);
+  background-color: var(--redesign-toolbar-background);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -28,6 +45,19 @@
     margin: math.div($toolbar-height - $home-button-size, 2);
   }
 
+  .ide-redesign-toolbar-button-subdued {
+    @include ol-button-variant(
+      var(--redesign-subdued-button-color),
+      transparent,
+      transparent,
+      var(--redesign-subdued-button-hover-background),
+      transparent,
+      true
+    );
+
+    text-decoration: none;
+  }
+
   .ide-redesign-toolbar-home-link {
     display: flex;
     height: 100%;
@@ -36,6 +66,7 @@
     flex-direction: column;
     text-align: center;
     border-radius: 100%;
+    color: var(--redesign-toolbar-home-link-color);
 
     .toolbar-ol-home-button {
       display: none;
@@ -44,12 +75,17 @@
 
     .toolbar-ol-logo {
       margin: 0 auto;
+      display: block;
+      width: $ol-icon-height;
       height: $ol-icon-height;
-      width: auto;
+      background-image: var(--redesign-toolbar-logo-url);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
     }
 
     &:hover {
-      background-color: var(--toolbar-home-button-hover-background);
+      background-color: var(--redesign-toolbar-home-button-hover-background);
 
       .toolbar-ol-home-button {
         display: block;
@@ -103,11 +139,6 @@
   justify-content: center;
 }
 
-.ide-redesign-toolbar-button-subdued {
-  color: var(--neutral-90);
-  text-decoration: none;
-}
-
 .ide-redesign-online-users {
   display: flex;
 }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss

@@ -24,6 +24,19 @@
   --editor-toolbar-bg: var(--neutral-80);
 }
 
+.ide-redesign-main {
+  --toolbar-alt-bg-color: var(--bg-dark-secondary);
+  --toolbar-btn-color: var(--content-primary-dark);
+  --toolbar-btn-hover-bg-color: var(--neutral-80);
+  --toolbar-btn-hover-color: var(--white);
+  --editor-toolbar-bg: var(--bg-dark-primary);
+  --toolbar-filetree-bg-color: var(--neutral-80);
+
+  .toolbar {
+    border-bottom: none;
+  }
+}
+
 @include theme('light') {
   --toolbar-border-color: var(--neutral-20);
   --toolbar-header-bg-color: var(--white);
@@ -43,18 +56,14 @@
   --editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
     center / contain no-repeat;
   --editor-toolbar-bg: var(--white);
-}
 
-.ide-redesign-main {
-  --toolbar-alt-bg-color: var(--bg-light-secondary);
-  --toolbar-btn-color: var(--content-primary);
-  --toolbar-btn-hover-bg-color: var(--neutral-80);
-  --toolbar-btn-hover-color: var(--white);
-  --editor-toolbar-bg: var(--white);
-  --toolbar-filetree-bg-color: var(--white);
-
-  .toolbar {
-    border-bottom: none;
+  .ide-redesign-main {
+    --toolbar-alt-bg-color: var(--bg-light-secondary);
+    --toolbar-btn-color: var(--content-primary);
+    --toolbar-btn-hover-bg-color: var(--neutral-80);
+    --toolbar-btn-hover-color: var(--white);
+    --editor-toolbar-bg: var(--white);
+    --toolbar-filetree-bg-color: var(--white);
   }
 }