Code Issues Pull Requests Actions Security InsightsSettings

fix(theme): force light mode on marketing routes #3891

Merged⚡ AI-generatedXSccantynz wants to mergeclaude/audit-home-page-visibility-0e3dC→mainopened Apr 26, 2026

3 changed files+34−1

Modifiedapp/(marketing)/layout.tsx+2−0View fileUnified Split

@@ -1,5 +1,6 @@

11import Header from "@/app/components/marketing/Header";

22import Footer from "@/app/components/marketing/Footer";

3import ForceLightTheme from "@/app/components/marketing/ForceLightTheme";

45export default function MarketingLayout({

56 children,

@@ -8,6 +9,7 @@ export default function MarketingLayout({

89}) {

910 return (

1011 <>

12 <ForceLightTheme />

1113 <a

1214 href="#main-content"

1315 className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-20 focus:z-[100] focus:rounded-full focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:text-navy-700"

Addedapp/components/marketing/ForceLightTheme.tsx+31−0View fileUnified Split

@@ -0,0 +1,31 @@

1"use client";

3import { useEffect } from "react";

5/**

6 * Marketing pages were designed for the light palette only — every

7 * text colour assumes a white / navy-50 background. When the user

8 * has dark mode on, navy-700 text on navy-950 background becomes

9 * unreadable (we caught this on /accounting and several other

10 * pages). Until each marketing page gets a proper dark variant pass,

11 * force light theme while a marketing route is mounted, then

12 * restore the user's preference on unmount so the platform pages

13 * still respect dark mode.

14 */

15export default function ForceLightTheme() {

16 useEffect(() => {

17 const html = document.documentElement;

18 const hadDark = html.classList.contains("dark");

19 const hadLight = html.classList.contains("light");

20 html.classList.remove("dark");

21 html.classList.add("light");

23 return () => {

24 html.classList.remove("light");

25 if (hadDark) html.classList.add("dark");

26 if (hadLight) html.classList.add("light");

27 };

28 }, []);

30 return null;

31}

Modifiedapp/layout.tsx+1−1View fileUnified Split

@@ -151,7 +151,7 @@ export default function RootLayout({

151151 <head>

152152 <script

153153 dangerouslySetInnerHTML={{

154 __html: `(function(){try{var t=localStorage.getItem("mr:theme");if(t==="dark"){document.documentElement.classList.add("dark")}else if(t==="light"){document.documentElement.classList.add("light")}else{if(window.matchMedia("(prefers-color-scheme:dark)").matches){document.documentElement.classList.add("dark")}}}catch(e){}})();`,

154 __html: `(function(){try{var p=window.location.pathname;var platform=/^\\/(dashboard|admin|clients|matters|documents|trust|billing|time|voice|news|settings|onboarding)\\b/.test(p);if(!platform){document.documentElement.classList.add("light");return}var t=localStorage.getItem("mr:theme");if(t==="dark"){document.documentElement.classList.add("dark")}else if(t==="light"){document.documentElement.classList.add("light")}else{if(window.matchMedia("(prefers-color-scheme:dark)").matches){document.documentElement.classList.add("dark")}}}catch(e){}})();`,

155155 }}

156156 />

157157 <link rel="preconnect" href="https://fonts.googleapis.com" />

158158

c comment · e edit title · m merge · a approve · r request changes · ? shortcuts