From faceb905938d3dc397ca659cff19f2d887885cf8 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Wed, 5 Nov 2025 11:34:27 +0000
Subject: [PATCH] Merge pull request #29290 from overleaf/dp-dashboard-dark-2

Dark mode for DS nav

GitOrigin-RevId: fb8ad9ec45e88c39810421d11ecc69ab874121ce
---
 .../components/project-list-ds-nav.tsx        |  7 ++-
 .../overleaf-a-ds-solution-mallard-dark.svg   |  1 +
 .../stylesheets/components/navbar.scss        | 54 +++++++++++++++--
 .../pages/project-list-ds-nav.scss            | 58 ++++++++++++-------
 4 files changed, 92 insertions(+), 28 deletions(-)
 create mode 100644 services/web/frontend/js/shared/svgs/overleaf-a-ds-solution-mallard-dark.svg

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() {
       <SystemMessages />
       <DefaultNavbar
         {...navbarProps}
-        overleafLogo={overleafLogo}
+        overleafLogo={
+          activeOverallTheme === 'dark' ? overleafLogoDark : overleafLogo
+        }
         showCloseIcon
       />
       <div className="project-list-wrapper">
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 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="425" height="192" fill="none"><g clip-path="url(#a)"><path fill="#FFFFFF" d="m27.16 182.86-3.03-7.72H14.4l-2.98 7.72H8.57l9.6-24.37h2.38l9.54 24.37h-2.93Zm-3.9-10.25-2.82-7.53a40.3 40.3 0 0 1-1.12-3.5c-.24 1.07-.6 2.22-1.05 3.5l-2.85 7.53h7.85ZM62.08 170.52c0 4-1.12 7.06-3.4 9.17-2.27 2.12-5.56 3.2-9.85 3.2h-6.87v-24.27h7.6c3.98 0 7.04 1.05 9.23 3.14 2.2 2.1 3.3 5.02 3.3 8.76Zm-5.33.13c0-5.2-2.3-7.82-6.9-7.82h-2.74v15.8h2.2c4.96 0 7.42-2.67 7.42-7.98h.02ZM66.5 159.51c0-1.64.92-2.48 2.75-2.48s2.74.84 2.74 2.48c0 .79-.23 1.39-.68 1.83-.47.45-1.15.66-2.06.66-1.83 0-2.75-.84-2.75-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM93.24 164.32v2.56l-2.9.76c.53.84.79 1.75.79 2.8 0 1.99-.7 3.55-2.1 4.65-1.38 1.13-3.31 1.67-5.77 1.67l-.92-.05-.75-.08c-.53.4-.79.84-.79 1.34 0 .73.94 1.1 2.8 1.1h3.16c2.04 0 3.58.44 4.66 1.3 1.07.87 1.59 2.17 1.59 3.84 0 2.17-.92 3.85-2.72 5.05-1.8 1.2-4.4 1.8-7.79 1.8-2.59 0-4.57-.44-5.93-1.35a4.32 4.32 0 0 1-2.04-3.8c0-1.12.34-2.06 1.04-2.8a6.1 6.1 0 0 1 3.06-1.61c-.52-.21-.97-.58-1.36-1.1a2.7 2.7 0 0 1 .03-3.37c.42-.47 1-.94 1.78-1.39a5.1 5.1 0 0 1-2.33-2.01 6.06 6.06 0 0 1-.86-3.3c0-2 .65-3.58 1.98-4.7 1.31-1.1 3.2-1.65 5.65-1.65.52 0 1.12.06 1.86.13.7.1 1.17.16 1.36.21h6.5ZM78.92 185.5c0 .7.34 1.25 1 1.64.67.4 1.61.6 2.82.6 1.8 0 3.24-.23 4.26-.75 1.02-.53 1.54-1.18 1.54-2.04 0-.7-.31-1.18-.92-1.44-.6-.26-1.54-.4-2.82-.4H82.2c-.94 0-1.7.22-2.33.66a2.03 2.03 0 0 0-.94 1.73Zm1.83-15.11c0 .99.23 1.8.68 2.38.47.57 1.15.88 2.09.88s1.65-.28 2.1-.88c.44-.58.65-1.39.65-2.38 0-2.25-.92-3.35-2.75-3.35s-2.8 1.13-2.8 3.35h.03ZM96.07 159.51c0-1.64.91-2.48 2.74-2.48s2.75.84 2.75 2.48c0 .79-.24 1.39-.68 1.83-.47.45-1.15.66-2.07.66-1.83 0-2.74-.84-2.74-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM114.47 179.17c.89 0 1.94-.18 3.2-.57v3.76c-1.26.57-2.83.84-4.66.84-2.02 0-3.5-.53-4.42-1.55-.92-1.02-1.39-2.56-1.39-4.6v-8.94h-2.43v-2.14l2.8-1.7 1.46-3.92h3.25v3.95h5.2v3.79h-5.2v8.94c0 .7.2 1.25.6 1.6.42.33.94.51 1.6.51v.03ZM133.19 182.86l-1-2.51h-.13a7.23 7.23 0 0 1-2.64 2.22c-.88.42-2.06.63-3.52.63a5.8 5.8 0 0 1-4.21-1.52c-1.02-1.02-1.55-2.46-1.55-4.34 0-1.96.68-3.42 2.07-4.37 1.39-.94 3.45-1.46 6.22-1.54l3.22-.1v-.81c0-1.89-.97-2.83-2.88-2.83-1.49 0-3.22.45-5.23 1.34l-1.67-3.43a15.02 15.02 0 0 1 7.11-1.67c2.61 0 4.4.55 5.72 1.62 1.34 1.1 2 2.75 2 4.94v12.37h-3.54.03Zm-1.5-8.58-1.95.08a6.62 6.62 0 0 0-3.3.78c-.73.5-1.07 1.23-1.07 2.23 0 1.43.81 2.14 2.46 2.14a3.9 3.9 0 0 0 2.82-1.02 3.55 3.55 0 0 0 1.05-2.7v-1.5ZM147 182.86h-5.08v-25.83h5.07v25.83ZM175.85 176.14c0 2.2-.78 3.92-2.35 5.17-1.57 1.26-3.77 1.89-6.59 1.89-2.59 0-4.89-.5-6.88-1.47v-4.78c1.65.73 3.04 1.25 4.16 1.54 1.13.29 2.17.44 3.11.44a4.3 4.3 0 0 0 2.59-.65c.6-.44.92-1.07.92-1.93 0-.47-.14-.9-.4-1.28-.26-.4-.65-.74-1.17-1.08-.53-.34-1.57-.89-3.14-1.64a15.1 15.1 0 0 1-3.35-2.01 7.79 7.79 0 0 1-1.77-2.25 6.42 6.42 0 0 1-.66-2.98c0-2.15.74-3.85 2.17-5.08 1.44-1.22 3.48-1.85 6.04-1.85 1.26 0 2.46.16 3.6.44 1.16.3 2.36.7 3.59 1.26l-1.65 4c-1.3-.53-2.35-.9-3.21-1.1-.84-.2-1.68-.31-2.51-.31a3.4 3.4 0 0 0-2.25.68 2.23 2.23 0 0 0-.78 1.77c0 .45.1.87.3 1.18.22.34.56.65 1 1 .45.3 1.54.88 3.27 1.7 2.27 1.06 3.82 2.16 4.65 3.26a6.4 6.4 0 0 1 1.26 4l.05.08ZM187.38 183.2c-5.78 0-8.65-3.17-8.65-9.52 0-3.16.78-5.57 2.35-7.21 1.57-1.68 3.81-2.51 6.74-2.51 2.15 0 4.08.41 5.78 1.25l-1.49 3.92a28.7 28.7 0 0 0-2.22-.78 6.95 6.95 0 0 0-2.07-.32c-2.64 0-3.94 1.89-3.94 5.62 0 3.74 1.3 5.44 3.94 5.44.97 0 1.89-.13 2.72-.39a10 10 0 0 0 2.49-1.23v4.34c-.81.52-1.65.89-2.49 1.07a15 15 0 0 1-3.16.29v.03ZM197.1 159.51c0-1.64.92-2.48 2.75-2.48s2.74.84 2.74 2.48c0 .79-.23 1.39-.68 1.83-.47.45-1.15.66-2.06.66-1.83 0-2.75-.84-2.75-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM216.08 183.2c-2.98 0-5.33-.84-7-2.49-1.68-1.64-2.51-3.97-2.51-7 0-3.04.78-5.52 2.32-7.22 1.55-1.7 3.72-2.53 6.46-2.53 2.74 0 4.65.75 6.12 2.24 1.46 1.5 2.2 3.56 2.2 6.2v2.46h-11.98a4.8 4.8 0 0 0 1.28 3.37c.78.81 1.9 1.2 3.35 1.2a13.67 13.67 0 0 0 6.27-1.46v3.92c-.89.44-1.83.78-2.82 1-1.02.2-2.25.3-3.69.3Zm-.7-15.64c-1.08 0-1.91.34-2.51 1.02-.6.68-.97 1.65-1.05 2.9h7.11c0-1.25-.34-2.22-1-2.9a3.33 3.33 0 0 0-2.56-1.02ZM244.89 182.86h-5.07V172c0-1.34-.24-2.35-.7-3-.48-.69-1.24-1-2.28-1-1.41 0-2.43.47-3.06 1.41-.63.94-.94 2.5-.94 4.7v8.74h-5.07V164.3h3.86l.69 2.38h.28a5.52 5.52 0 0 1 2.33-2.04c1-.47 2.12-.68 3.37-.68 2.17 0 3.8.57 4.92 1.75 1.12 1.17 1.67 2.85 1.67 5.04v12.1ZM257.64 183.2c-5.77 0-8.65-3.17-8.65-9.52 0-3.16.79-5.57 2.35-7.21 1.57-1.68 3.82-2.51 6.75-2.51 2.14 0 4.08.41 5.78 1.25l-1.5 3.92a28.7 28.7 0 0 0-2.22-.78 6.95 6.95 0 0 0-2.06-.32c-2.64 0-3.95 1.89-3.95 5.62 0 3.74 1.31 5.44 3.95 5.44.97 0 1.88-.13 2.72-.39a10 10 0 0 0 2.48-1.23v4.34c-.8.52-1.65.89-2.48 1.07-.84.19-1.88.29-3.17.29v.03ZM275.97 183.2c-2.98 0-5.33-.84-7-2.49-1.68-1.64-2.52-3.97-2.52-7 0-3.04.79-5.52 2.33-7.22 1.54-1.7 3.71-2.53 6.46-2.53 2.74 0 4.65.75 6.12 2.24 1.46 1.5 2.2 3.56 2.2 6.2v2.46h-11.98a4.81 4.81 0 0 0 1.28 3.37c.78.81 1.9 1.2 3.35 1.2a13.67 13.67 0 0 0 6.27-1.46v3.92c-.89.44-1.83.78-2.85 1-1 .2-2.22.3-3.69.3h.03Zm-.7-15.64c-1.08 0-1.91.34-2.51 1.02-.6.68-.97 1.65-1.05 2.9h7.11c0-1.25-.34-2.22-.97-2.9a3.33 3.33 0 0 0-2.56-1.02h-.03ZM310.87 176.43c0 2.14-.79 3.79-2.33 4.99-1.54 1.2-3.66 1.8-6.3 1.8-2.87 0-5.1-.36-6.64-1.12v-2.72a17.38 17.38 0 0 0 6.72 1.36c1.88 0 3.3-.37 4.24-1.07.94-.7 1.43-1.7 1.43-2.98 0-.84-.15-1.52-.5-2.07a4.63 4.63 0 0 0-1.7-1.49c-.78-.44-1.98-.97-3.6-1.54-2.25-.81-3.87-1.75-4.84-2.88a6.35 6.35 0 0 1-1.43-4.34c0-1.88.7-3.34 2.11-4.47 1.42-1.1 3.27-1.64 5.57-1.64 2.3 0 4.63.44 6.67 1.33l-.9 2.46a15.11 15.11 0 0 0-5.82-1.26c-1.5 0-2.67.32-3.5.97a3.2 3.2 0 0 0-1.26 2.67c0 .83.16 1.51.47 2.06.32.55.84 1.02 1.57 1.5.73.44 1.86.93 3.37 1.48 2.54.92 4.29 1.88 5.26 2.93a5.7 5.7 0 0 1 1.44 4.05l-.03-.02ZM331.1 173.76c0 2.95-.76 5.28-2.25 6.95-1.49 1.68-3.55 2.51-6.2 2.51-1.61 0-3.05-.39-4.33-1.15a7.35 7.35 0 0 1-2.93-3.3 11.54 11.54 0 0 1-1.02-5.01c0-2.95.73-5.28 2.22-6.93 1.5-1.65 3.53-2.48 6.17-2.48s4.58.84 6.07 2.53c1.49 1.7 2.25 3.98 2.25 6.88h.02Zm-13.85 0c0 2.33.47 4.1 1.38 5.3.94 1.23 2.3 1.84 4.1 1.84 1.81 0 3.17-.6 4.11-1.8.94-1.21 1.41-2.99 1.41-5.34 0-2.35-.47-4.08-1.4-5.25-.95-1.2-2.34-1.8-4.14-1.8-1.8 0-3.16.6-4.08 1.77-.91 1.18-1.38 2.95-1.38 5.28ZM338.68 182.86h-2.74v-25.83h2.74v25.83ZM347.13 164.69v11.79c0 1.49.34 2.59 1.02 3.32.68.73 1.72 1.1 3.16 1.1 1.9 0 3.3-.53 4.18-1.57.89-1.05 1.3-2.75 1.3-5.1v-9.57h2.75v18.2h-2.27l-.4-2.44h-.15a5.48 5.48 0 0 1-2.35 2.07c-1 .47-2.15.7-3.43.7-2.22 0-3.87-.52-4.96-1.56-1.1-1.05-1.65-2.72-1.65-5.05v-11.9h2.8ZM371.25 180.92a8.1 8.1 0 0 0 2.49-.34v2.12c-.29.13-.73.26-1.3.37-.58.1-1.1.13-1.58.13-3.53 0-5.28-1.86-5.28-5.57V166.8h-2.61v-1.34l2.61-1.15 1.15-3.9h1.6v4.22h5.28v2.14h-5.28v10.7c0 1.09.26 1.93.78 2.5.52.58 1.23.89 2.14.89v.05ZM377.14 159.75c0-.63.15-1.1.47-1.39.31-.29.7-.44 1.15-.44.44 0 .83.15 1.15.44.31.29.47.76.47 1.39 0 .63-.16 1.07-.47 1.38-.32.32-.7.45-1.15.45-.47 0-.87-.16-1.15-.45-.32-.31-.47-.75-.47-1.38Zm3 23.1h-2.74v-18.19h2.74v18.2ZM401.68 173.76c0 2.95-.76 5.28-2.25 6.95-1.49 1.68-3.55 2.51-6.2 2.51-1.61 0-3.05-.39-4.33-1.15a7.5 7.5 0 0 1-2.93-3.3 11.54 11.54 0 0 1-1.02-5.01c0-2.95.73-5.28 2.22-6.93 1.5-1.65 3.53-2.48 6.17-2.48s4.58.84 6.07 2.53c1.49 1.7 2.25 3.98 2.25 6.88h.02Zm-13.85 0c0 2.33.47 4.1 1.38 5.3.94 1.23 2.3 1.84 4.1 1.84 1.81 0 3.17-.6 4.11-1.8.94-1.21 1.41-2.99 1.41-5.34 0-2.35-.47-4.08-1.4-5.25-.95-1.2-2.33-1.8-4.14-1.8-1.8 0-3.16.6-4.08 1.77-.91 1.18-1.38 2.95-1.38 5.28ZM418.94 182.86v-11.77c0-1.49-.34-2.59-1.02-3.32-.68-.73-1.73-1.1-3.17-1.1-1.9 0-3.3.53-4.18 1.55-.89 1.02-1.33 2.72-1.33 5.1v9.54h-2.75v-18.2h2.25l.44 2.49h.13a5.81 5.81 0 0 1 2.38-2.1 7.62 7.62 0 0 1 3.4-.73c2.2 0 3.85.53 4.94 1.6 1.1 1.04 1.65 2.74 1.65 5.07v11.87h-2.75Z"/><path fill="#13C965" d="M106 3.74c-4.89 4.08-8.52 8.96-12.2 13.75a202.61 202.61 0 0 1-5.1 6.4c-3.25 3.85-6.8 7.32-11.3 9.7a26.56 26.56 0 0 1-14.35 2.96 48.22 48.22 0 0 1-13.15-2.96c-.31-.1-.62-.26-1.07-.44 12.03-8.81 25.23-15.27 38.2-22.22-.14 0-.3-.06-.4 0-16.02 4.2-31.24 10.3-45.01 19.68-8.16 5.57-15.35 12.16-20.81 20.5a49.9 49.9 0 0 0-7.71 20.02c-2.3 15.08 6.35 28.57 16.44 33.96 16.91 9.04 37.77-1.02 41.25-19.92 2.82-15.37-7.35-30.27-22.74-32.94-9.8-1.7-18.25 1.36-25.3 8.34-.22.2-.4.47-.58.7-.08-.05-.16-.1-.24-.18.76-1.38 1.5-2.8 2.3-4.15a68.15 68.15 0 0 1 16.34-18.17 7.44 7.44 0 0 1 5.83-1.6c13.9 1.73 25 8.1 32.68 19.95a41.43 41.43 0 0 1 6.64 25.22A42.7 42.7 0 0 1 51 122.16 42.73 42.73 0 0 1 1.05 89.14c-2.38-11.16-.47-21.83 4.44-32 5.2-10.71 13.04-19.1 22.93-25.67.52-.34.88-.65.88-1.38.16-8.13 3.53-14.7 9.96-19.69 5-3.9 10.75-6.17 16.81-7.7C65.01.4 74.17-.3 83.4.1c6.1.27 12.13.9 18.06 2.33 1.47.37 2.88.81 4.55 1.3ZM375.23 59.5c0-.34.08-.66.08-1v-4.99c0-.65.18-.94.91-.94 3.8.03 7.6 0 11.4 0 .6 0 .89.18.8.81V109.97c0 .84-.4 1.26-1.22 1.26-3.58 0-7.16-.03-10.74 0-.9 0-1.13-.29-1.1-1.12.05-1.63 0-3.27 0-4.9 0-.28-.03-.6-.05-.88l-.26-.18c-.06.15-.08.3-.16.44-2.4 4-6.01 6.35-10.54 7.24-7.21 1.44-14.35 1.18-20.99-2.2-9.17-4.65-14.8-12.12-16.42-22.37-1.38-8.76.19-16.94 5.52-24.18 4.68-6.35 10.88-10.4 18.77-11.58 5.12-.76 10.2-.6 15.11 1.23a17.17 17.17 0 0 1 8.18 6.24c.13.21.29.4.45.58.07 0 .15 0 .23-.03l.03-.02Zm-18.04 4.99c-3 0-5.62.63-7.95 1.9-7.08 3.9-10.3 11.33-8.47 19.61 2.07 9.41 12.37 15.35 21.44 12.29a17.33 17.33 0 0 0 11.19-20.55c-1.52-6.45-8.1-13.54-16.21-13.25ZM318.69 92.93c-.9 1.78-1.63 3.43-2.54 5-4.52 7.68-11 12.78-19.84 14.35-17.3 3.08-31.03-6.8-35.45-21.68-5.18-17.48 5.88-35.8 23.79-39.23 9.38-1.8 17.85.76 25.15 6.9 4.88 4.1 8.41 9.17 9.93 15.5a41.84 41.84 0 0 1 1.02 11.11c-.03 1.25-.1 1.3-1.36 1.3h-44.54c-.93 0-1.32.47-1.18 1.4a14.61 14.61 0 0 0 12.7 12.33c3.8.47 7.5.37 11.06-1.25a15.32 15.32 0 0 0 6.2-5.05c.26-.34.78-.68 1.17-.68 4.34-.05 8.66-.02 13-.02.18 0 .36.02.88.1v-.08ZM306.1 75.5l.05-.32c0-.1-.02-.18-.05-.26-1.07-3.45-2.88-6.43-5.83-8.57-3.68-2.67-7.87-3.4-12.31-2.98a16.26 16.26 0 0 0-13.78 11.34c-.08.24-.08.52-.1.81h32.02v-.02Z"/><path fill="#13C965" d="M87.36 52.54h13.86c.7 0 .7.5.86.92l6.04 17.2 6.98 19.94c.1.3.2.58.44 1.1.21-.52.34-.8.45-1.1 4.44-12.3 8.91-24.62 13.33-36.93.29-.84.65-1.15 1.57-1.13 3.92.06 7.84 0 11.76 0h1.13c-.13.42-.24.7-.34.97-7.59 18.95-15.14 37.88-22.7 56.83-.28.7-.62 1-1.4 1-2.93-.06-5.84-.03-8.76 0-.66 0-1-.16-1.26-.82-7.19-19-14.43-38-21.64-57-.1-.27-.19-.53-.32-.95v-.03ZM415.17 87.91v22.22c0 .87-.23 1.13-1.1 1.13-3.6-.06-7.21-.06-10.82 0-.94 0-1.15-.3-1.15-1.18V66.01c0-1-.5-1.5-1.52-1.5h-4.62c-.66 0-.9-.2-.9-.86V53.38c0-.6.22-.84.84-.81 1.6.03 3.22 0 4.81 0 .76 0 1-.26 1-.97-.05-2.43.08-4.8.7-7.19 1.63-6.24 5.86-9.62 11.92-11.08 3.27-.78 6.6-.84 9.91-.76.52 0 .7.21.7.73v10.64c0 .6-.28.7-.8.73-1.62.16-3.27.19-4.84.6a5.7 5.7 0 0 0-3.95 6.8c.06.21.55.45.84.45 2.54.02 5.1.05 7.63 0 .84 0 1.15.18 1.13 1.1-.06 3.29-.06 6.58 0 9.88 0 .73-.21.99-.97.99-2.61-.03-5.2 0-7.82-.03-.83 0-1.07.27-1.07 1.08.03 7.45 0 14.87 0 22.32l.08.05ZM254.09 72.38v37.67c0 .97-.26 1.23-1.2 1.2-3.61-.05-7.22-.05-10.82 0-.9 0-1.13-.28-1.13-1.12V34.7c0-.92.31-1.18 1.2-1.15 3.64.05 7.3.05 10.93 0 .86 0 1.05.29 1.05 1.07v37.77h-.03ZM234.7 64.23c-1.76.34-3.46.63-5.13 1.02-5.1 1.2-7.87 4.55-8.57 9.62a52.66 52.66 0 0 0-.53 7.03c-.05 9.38 0 18.77 0 28.15 0 .86-.42 1.28-1.28 1.28h-12.18v-58.7h12.68v6.74l1.2-1.36a17.6 17.6 0 0 1 12.89-6.28c.78-.02 1.02.19 1.02.97-.03 3.58 0 7.16 0 10.74 0 .3-.03.55-.05.79h-.06ZM185.76 92.75c-.37 0-.84.34-1.07.68a15.25 15.25 0 0 1-7.04 5.46c-3.26 1.28-6.66 1.39-10.09.94a14.56 14.56 0 0 1-12.54-11.13c-.19-.76-.3-1.57-.45-2.49h47.37c-.13-2.98-.1-5.85-.42-8.68-.84-7.63-4.37-13.88-10.12-18.84-7.76-6.75-16.78-9.39-26.84-7.11-14.4 3.24-26.98 17.75-23.35 36.33 3.66 18.77 21.91 29.52 40.52 23.24 8.18-2.77 13.65-8.68 17.2-16.42.29-.6.53-1.22.81-1.93-.28-.03-.42-.08-.57-.08-4.47 0-8.92 0-13.39.03h-.02Zm-16.81-29.36c11.1-1 16.68 5.73 18.14 12.08h-31.9c.66-5.07 6.41-11.42 13.76-12.08Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h425v191.04H0z"/></clipPath></defs></svg>
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;