fix: resolve dark mode contrast issues on legal pages

src/sections/Company/Legal/cookie-notice/index.js

@@ -85,6 +85,11 @@ const cookieData = [
 
 const CookieNotice = () => {
   const { isDark } = useStyledDarkMode();
+  const [didLoad, setDidLoad] = React.useState(false);
+
+  React.useEffect(() => {
+    setDidLoad(true);
+  }, []);
 
   // Create custom theme with Qanelas Soft font family
   const customTheme = createTheme({
@@ -153,7 +158,7 @@ const CookieNotice = () => {
               <p>
               Third-party cookies are set by domains other than Layer5’s to support analytics, advertising, or other functionalities. These cookies may collect data across multiple websites to tailor ads based on your interests. Below is a list of third-party providers we use, along with their purposes and opt-out options:
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
+              {didLoad && (<SistentThemeProvider key={isDark ? "dark" : "light"} initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     <StyledTableContainer>
@@ -190,7 +195,7 @@ const CookieNotice = () => {
                     </StyledTableContainer>
                   </Col>
                 </Row>
-              </SistentThemeProvider>
+              </SistentThemeProvider>)}
               <p>
               You can also opt out of certain third-party cookies via the <a href="https://optout.aboutads.info">Digital Advertising Alliance’s opt-out tool</a> or, for European visitors, <a href="https://www.youronlinechoices.eu">Your Online Choices</a>.
               </p>

src/sections/Company/Legal/privacy/index.js

@@ -133,6 +133,11 @@ const privacyData = [
 
 const Privacy = () => {
   const { isDark } = useStyledDarkMode();
+  const [didLoad, setDidLoad] = React.useState(false);
+
+  React.useEffect(() => {
+    setDidLoad(true);
+  }, []);
 
   // Create custom theme with Qanelas Soft font family
   const customTheme = createTheme({
@@ -187,7 +192,7 @@ const Privacy = () => {
               <p>
               We process your personal data for a variety of purposes depending on how you interact with us. The table below details what we collect, why we collect it, and the legal justification (lawful basis) under the GDPR for doing so.
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
+              {didLoad && (<SistentThemeProvider key={isDark ? "dark" : "light"} initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     <StyledTableContainer>
@@ -230,7 +235,7 @@ const Privacy = () => {
                     </StyledTableContainer>
                   </Col>
                 </Row>
-              </SistentThemeProvider>
+              </SistentThemeProvider>)}
               <h3>Cookies and Tracking Technologies</h3>
               <p>
               We use cookies and similar technologies on our website to help it function, to analyze performance, and to personalize your experience. A cookie is a small text file stored on your device.

src/sections/Company/Legal/sub-processors/index.js

@@ -185,6 +185,11 @@ const subProcessorData = [
 
 const SubProcessors = () => {
   const { isDark } = useStyledDarkMode();
+  const [didLoad, setDidLoad] = React.useState(false);
+
+  React.useEffect(() => {
+    setDidLoad(true);
+  }, []);
 
   // Create custom theme with Qanelas Soft font family
   const customTheme = createTheme({
@@ -232,7 +237,7 @@ const SubProcessors = () => {
               <p>
               Since data is physically stored in a predetermined location, once an account begins storing data it cannot be moved. If you want to switch to a different region, contact your local partner or Enterprise account manager to create a new account hosted in the region of your choice going forward.
               </p>
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"} theme={customTheme}>
+              {didLoad && (<SistentThemeProvider key={isDark ? "dark" : "light"} initialMode={isDark ? "dark" : "light"} theme={customTheme}>
                 <Row className="table-container" $Hcenter>
                   <Col md={12} sx={{ px: 0 }}>
                     {subProcessorData.map((section, index) => (
@@ -290,7 +295,7 @@ const SubProcessors = () => {
                     ))}
                   </Col>
                 </Row>
-              </SistentThemeProvider>
+              </SistentThemeProvider>)}
               <p>
                 <small>
                   <i>Last Updated: Sept 25th, 2025</i>

src/sections/Company/Legal/terms.style.js

@@ -44,6 +44,9 @@ const TermsWrapper = styled.section`
     h1 {
       color: white;
     }
+    h2, h3, h4, h5, h6, p, li {
+      color: ${props => props.theme.whiteToBlack};
+    }
     @media (max-width: 680px) {
       padding: 2rem 0;
       h1 {
@@ -101,3 +104,4 @@ const TermsWrapper = styled.section`
 `;
 
 export default TermsWrapper;
+