diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
index 5e20c1963d..bab7c25c47 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
@@ -20,7 +20,9 @@ import Footer from '@/shared/components/footer/footer'
import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav'
import SystemMessages from '@/shared/components/system-messages'
import overleafLogo from '@/shared/svgs/overleaf-a-ds-solution-mallard.svg'
+import overleafLogoDark from '@/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg'
import CookieBanner from '@/shared/components/cookie-banner'
+import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
export function ProjectListDsNav() {
const navbarProps = getMeta('ol-navbar')
@@ -35,6 +37,7 @@ export function ProjectListDsNav() {
tags,
selectedTagId,
} = useProjectListContext()
+ const activeOverallTheme = useActiveOverallTheme()
const selectedTag = tags.find(tag => tag._id === selectedTagId)
@@ -59,7 +62,9 @@ export function ProjectListDsNav() {
diff --git a/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg b/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg
new file mode 100644
index 0000000000..d4c4fad860
--- /dev/null
+++ b/services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg
@@ -0,0 +1 @@
+
diff --git a/services/web/frontend/stylesheets/components/navbar.scss b/services/web/frontend/stylesheets/components/navbar.scss
index 2a1d859d93..3d8251b3ec 100644
--- a/services/web/frontend/stylesheets/components/navbar.scss
+++ b/services/web/frontend/stylesheets/components/navbar.scss
@@ -198,6 +198,7 @@
box-shadow: none;
background-color: var(--navbar-hamburger-submenu-bg);
+ border: none;
width: auto;
.dropdown-item {
@@ -245,8 +246,7 @@
}
}
-.website-redesign-navbar,
-.website-redesign .navbar-default {
+@mixin navbar-light() {
--navbar-title-color: var(--content-primary);
--navbar-title-color-hover: var(--content-secondary);
--navbar-brand-image-url: var(
@@ -266,12 +266,56 @@
--navbar-link-hover-border-color: var(--navbar-link-border-color);
// Toggler
- --navbar-toggler-expanded-color: var(--white);
- --navbar-toggler-expanded-bg: var(--bg-dark-primary);
+ --navbar-toggler-expanded-bg: none;
+ --navbar-toggler-expanded-color: var(--content-secondary);
// Mobile view
--navbar-hamburger-submenu-bg: var(--bg-light-secondary);
--navbar-hamburger-submenu-item-color: var(--navbar-link-color);
- --navbar-hamburger-submenu-item-hover-color: var(--white);
+ --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
--navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
}
+
+@mixin navbar-dark() {
+ --navbar-title-color: var(--content-primary-dark);
+ --navbar-title-color-hover: var(--content-secondary-dark);
+ --navbar-brand-image-url: var(
+ --navbar-brand-image-redesign-url,
+ url('../../../frontend/js/shared/svgs/overleaf-green.svg')
+ );
+ --navbar-subdued-color: var(--content-primary-dark);
+ --navbar-subdued-hover-bg: var(--bg-dark-secondary);
+ --navbar-subdued-hover-color: var(--content-primary-dark);
+ --navbar-bg: var(--bg-dark-primary);
+
+ // Navbar links
+ --navbar-link-color: var(--content-primary-dark);
+ --navbar-link-border-color: var(--border-primary-dark);
+ --navbar-link-hover-color: var(--navbar-link-color);
+ --navbar-link-hover-bg: var(--bg-dark-tertiary);
+ --navbar-link-hover-border-color: var(--navbar-link-border-color);
+
+ // Toggler
+ --navbar-toggler-expanded-bg: none;
+ --navbar-toggler-expanded-color: var(--content-secondary-dark);
+
+ // Mobile view
+ --navbar-hamburger-submenu-bg: var(--bg-dark-primary);
+ --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
+ --navbar-hamburger-submenu-item-hover-color: var(--content-primary-dark);
+ --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-secondary);
+}
+
+.website-redesign-navbar,
+.website-redesign .navbar-default {
+ @include navbar-light;
+}
+
+@include theme('default') {
+ #project-list-root {
+ .website-redesign-navbar,
+ .website-redesign .navbar-default {
+ @include navbar-dark;
+ }
+ }
+}
diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
index 472ec1d2cb..9027296451 100644
--- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
@@ -1,3 +1,21 @@
+:root {
+ --ds-nav-active-bg: var(--bg-accent-03);
+ --ds-nav-active-color: var(--green-60);
+ --theme-toggle-selected-background: var(--green-20);
+
+ @include theme('default') {
+ --ds-nav-active-bg: var(--green-70);
+ --ds-nav-active-color: var(--green-10);
+ --theme-toggle-selected-background: var(--green-70);
+ }
+}
+
+body {
+ --ds-nav-bg-color: var(--bg-primary-themed);
+ --ds-nav-hover-bg: var(--bg-secondary-themed);
+ --ds-nav-color: var(--content-secondary-themed);
+}
+
.project-ds-nav-page {
display: flex;
flex-direction: column;
@@ -15,9 +33,6 @@
.navbar-default {
position: relative;
- --navbar-toggler-expanded-bg: none;
- --navbar-toggler-expanded-color: var(--content-secondary);
-
.navbar-header .navbar-logo {
@include media-breakpoint-up(md) {
position: relative;
@@ -63,8 +78,8 @@
border-radius: var(--border-radius-medium);
&.show {
- background-color: var(--bg-accent-03);
- color: var(--green-60);
+ background-color: var(--ds-nav-active-bg);
+ color: var(--ds-nav-active-color);
}
}
}
@@ -78,6 +93,7 @@
}
.project-list-wrapper {
+ background-color: var(--ds-nav-bg-color);
flex-grow: 1;
display: flex;
overflow-y: hidden;
@@ -176,7 +192,7 @@
> button {
width: 100%;
text-align: left;
- color: var(--content-secondary);
+ color: var(--ds-nav-color);
background: none;
border-radius: var(--border-radius-medium);
border: none;
@@ -184,18 +200,19 @@
}
&:hover button {
- background-color: var(--bg-light-secondary);
+ background-color: var(--ds-nav-hover-bg);
}
&.active button {
- background-color: var(--bg-accent-03);
- color: var(--green-60);
+ background-color: var(--ds-nav-active-bg);
+ color: var(--ds-nav-active-color);
font-weight: bold;
}
}
.dropdown-header {
font-weight: bold;
+ color: var(--ds-nav-color);
}
> li.tag {
@@ -208,7 +225,7 @@
button.dropdown-toggle {
border-radius: var(--border-radius-full);
border: none;
- color: var(--content-secondary);
+ color: var(--ds-nav-color);
height: 20px;
width: 20px;
padding: 0;
@@ -293,7 +310,7 @@
.ds-nav-icon-dropdown {
.dropdown-toggle {
- color: var(--content-secondary);
+ color: var(--ds-nav-color);
background: none;
height: 44px;
width: 44px;
@@ -301,12 +318,12 @@
overflow: hidden;
&:hover {
- background-color: var(--bg-light-secondary);
+ background-color: var(--ds-nav-hover-bg);
}
&.show {
- background-color: var(--bg-accent-03);
- color: var(--green-60);
+ background-color: var(--ds-nav-active-bg);
+ color: var(--ds-nav-active-color);
}
&::after {
@@ -327,6 +344,7 @@
}
.ds-nav-ds-name {
+ color: var(--ds-nav-color);
margin-bottom: var(--spacing-05);
span {
@@ -336,6 +354,10 @@
@include body-xs;
}
}
+
+ .add-affiliation {
+ color: var(--ds-nav-color);
+ }
}
.theme-toggle {
@@ -364,14 +386,6 @@
gap: var(--spacing-01);
}
-:root {
- --theme-toggle-selected-background: var(--green-70);
-}
-
-@include theme('light') {
- --theme-toggle-selected-background: var(--green-20);
-}
-
.theme-toggle-radio {
display: flex;