From f7b42d212a83006dc16fa47bfc3fcbfa3496583d Mon Sep 17 00:00:00 2001
From: Jimmy Domagala-Tang <Jimmy.Domagala-Tang@overleaf.com>
Date: Thu, 22 Jan 2026 10:43:47 -0800
Subject: [PATCH] feat: adding dark mode footer (#30772)

* feat: adding dark mode footer

* Update services/web/frontend/stylesheets/components/footer.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat: update linkedin logo to correct color, and enforce specific colors on socials logos

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
GitOrigin-RevId: 841317846dfbee04c1a00565054d7e9428805796
---
 .../web/app/views/layout/fat-footer-base.pug  |  2 +-
 .../frontend/js/shared/svgs/linkedin-logo.tsx |  2 +-
 .../stylesheets/components/footer.scss        | 91 +++++++++++++++----
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/services/web/app/views/layout/fat-footer-base.pug b/services/web/app/views/layout/fat-footer-base.pug
index 33e1a8ebf4..81417bb515 100644
--- a/services/web/app/views/layout/fat-footer-base.pug
+++ b/services/web/app/views/layout/fat-footer-base.pug
@@ -50,7 +50,7 @@
 				svg(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' height='25')
 					g(fill='none' fill-rule='evenodd')
 						path.background(
-							fill='#0B66C3'
+							fill='#2867b2'
 							d='M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8'
 						)
 						path.text(
diff --git a/services/web/frontend/js/shared/svgs/linkedin-logo.tsx b/services/web/frontend/js/shared/svgs/linkedin-logo.tsx
index 54e89533a3..2524b119a1 100644
--- a/services/web/frontend/js/shared/svgs/linkedin-logo.tsx
+++ b/services/web/frontend/js/shared/svgs/linkedin-logo.tsx
@@ -4,7 +4,7 @@ function LinkedInLogo() {
       <g fill="none" fillRule="evenodd">
         <path
           className="background"
-          fill="#0B66C3"
+          fill="#2867b2"
           d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8"
         />
         <path
diff --git a/services/web/frontend/stylesheets/components/footer.scss b/services/web/frontend/stylesheets/components/footer.scss
index 7e8ad21687..284e57a05b 100644
--- a/services/web/frontend/stylesheets/components/footer.scss
+++ b/services/web/frontend/stylesheets/components/footer.scss
@@ -15,17 +15,69 @@ $footer-width-delta: 320px;
   --cookie-banner-link: var(--link-ui-dark);
 }
 
+@mixin footer-pre-redesign {
+  --footer-background: var(--bg-dark-primary);
+  --footer-content: var(--content-secondary-dark);
+  --footer-link: var(--content-secondary-dark);
+  --footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
+}
+
+@mixin footer-light {
+  --footer-background: var(--bg-light-secondary);
+  --footer-content: var(--content-primary);
+  --footer-link: var(--content-primary);
+  --footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
+}
+
+@mixin footer-dark {
+  --footer-background: var(--bg-dark-primary);
+  --footer-content: var(--content-primary-dark);
+  --footer-link: var(--content-placeholder-dark);
+  --footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-white.svg');
+}
+
+@mixin socials-light {
+  --facebook-logo-background: #0866ff;
+  --facebook-logo-path: transparent;
+  --x-logo-path: #000;
+  --linkedin-logo-background: #2867b2;
+  --linkedin-logo-path: #fff;
+}
+
+@mixin socials-dark {
+  --facebook-logo-background: #fff;
+  --facebook-logo-path: transparent;
+  --x-logo-path: #fff;
+  --linkedin-logo-background: #fff;
+  --linkedin-logo-path: #000;
+}
+
 :root {
+  .fat-footer {
+    @include footer-pre-redesign;
+  }
+
   .cookie-banner {
     @include cookie-banner-light;
   }
 
+  .website-redesign-fat-footer,
+  .website-redesign .fat-footer {
+    @include footer-light;
+    @include socials-light;
+  }
+
   @include theme('default') {
     .ide-redesign-main,
     .project-ds-nav-page {
       .cookie-banner {
         @include cookie-banner-dark;
       }
+
+      .fat-footer {
+        @include footer-dark;
+        @include socials-dark;
+      }
     }
   }
 }
@@ -153,11 +205,11 @@ footer.site-footer {
 }
 
 .fat-footer {
-  --footer-text-color: var(--content-secondary-dark);
-  --footer-background-color: var(--bg-dark-primary);
-  --link-color: var(--footer-text-color);
-  --link-hover-color: var(--footer-text-color);
-  --link-visited-color: var(--footer-text-color);
+  --footer-text-color: var(--footer-content);
+  --footer-background-color: var(--footer-background);
+  --link-color: var(--footer-link);
+  --link-hover-color: var(--footer-link);
+  --link-visited-color: var(--footer-link);
   --link-text-decoration: none;
   --link-hover-text-decoration: underline;
 
@@ -433,7 +485,7 @@ footer.site-footer {
 
 .website-redesign-fat-footer,
 .website-redesign .fat-footer {
-  --footer-text-color: var(--content-primary);
+  --footer-text-color: var(--footer-content);
 
   .fat-footer-container {
     @include footer-container-down(sm) {
@@ -442,14 +494,14 @@ footer.site-footer {
   }
 
   &.fat-footer {
-    background: var(--content-primary-dark);
+    background: var(--footer-background);
 
     h2 {
       font-weight: 400;
     }
 
     .fat-footer-base {
-      color: var(--content-primary);
+      color: var(--footer-content);
 
       #language-picker-toggle {
         color: inherit;
@@ -460,32 +512,33 @@ footer.site-footer {
     // supported in older versions of browsers and these logos need to be correct.
     .fat-footer-social {
       &.x-logo svg path {
-        fill: #0f1419;
-      }
-
-      &.facebook-logo svg,
-      &.linkedin-logo svg {
-        path.text {
-          fill: #fff;
-        }
+        fill: var(--x-logo-path);
       }
 
       &.facebook-logo svg {
+        path.text {
+          fill: var(--facebook-logo-path);
+        }
+
         path.background {
-          fill: #0866ff;
+          fill: var(--facebook-logo-background);
         }
       }
 
       &.linkedin-logo svg {
+        path.text {
+          fill: var(--linkedin-logo-path);
+        }
+
         path.background {
-          fill: #0b66c3;
+          fill: var(--linkedin-logo-background);
         }
       }
     }
   }
 
   .footer-brand {
-    background-image: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
+    background-image: var(--footer-logo-url);
   }
 
   @include footer-container-down(sm) {