From 9557e822716e97c24577803f3fdd86428811f451 Mon Sep 17 00:00:00 2001
From: Adeola Adeyemo <adeola.adeyemo@epilot.cloud>
Date: Fri, 19 Dec 2025 11:18:59 +0000
Subject: [PATCH] chore: update dark mode documentation

Signed-off-by: Adeola Adeyemo <adeola.adeyemo@epilot.cloud>
---
 docs/journeys/custom-css.md               | 38 +++++++++++++++++++++--
 docs/ui-design/concorde-html-structure.md |  6 ++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md
index 7c1fc2d..64d9697 100644
--- a/docs/journeys/custom-css.md
+++ b/docs/journeys/custom-css.md
@@ -106,9 +106,41 @@ To avoid modifying the core layout and overall security of the journey, support
 
 ## Dark Mode
 
-Journeys with dark mode enabled require additional custom CSS updates. Please make sure to preview the journey in dark mode so you can apply the necessary adjustments.
+Journeys with dark mode enabled require additional custom CSS updates. Please make sure to preview the journey in dark mode on the Design Builder or Journey Builder so you can apply the necessary adjustments.
 
-Refer to [Concorde Dark mode Design tokens](/docs/ui-design/concorde-design-tokens#dark-mode) for more information about the specific design tokens related to dark mode.
+We have provided a dark mode maintained class - `Concorde-Dark`, which is attached to `html` element when dark mode is turned on for scoped styles. There are also Dark mode specific tokens - [Concorde Dark mode Design tokens](/docs/ui-design/concorde-design-tokens#dark-mode) for more granular control.
+
+To include/exclude your other custom CSS styles from dark mode styles, or use dark mode tokens:
+
+```css
+/* To exclude Custom CSS styles from dark mode */
+html:not(.Concorde-Dark) {
+  --concorde-primary-color: #005eb4;
+  --concorde-secondary-color: #913997;
+
+  #Concorde-Step---123456789 {
+    background-color: #f8f8f8;
+  }
+
+  /* ... other styles ... */
+}
+
+/* To scope dark mode styles in Custom CSS */
+.Concorde-Dark {
+  background-color: #f8f8f8;
+
+  .Concorde-Image-Block {
+    border-radius: 10px;
+  }
+
+  /* ... other styles ... */
+}
+
+/* Example of Dark mode tokens */
+:root {
+  --concorde-primary-color-dark: #ffffff;
+}
+```
 
 ## Examples
 
@@ -481,7 +513,7 @@ The snippet below will use a standard and custom font (uploaded) on the Journey.
 /* Standard font */
 @font-face {
   font-family: 'NotoSans-Regular';
-  src: url('https://go.epilot.cloud/element-static/fonts/NotoSans-Regular.ttf');
+  src: url('https://go.epilot.cloud/elements-static/fonts/NotoSans-Regular.ttf');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/docs/ui-design/concorde-html-structure.md b/docs/ui-design/concorde-html-structure.md
index 4eefedb..7aed26d 100644
--- a/docs/ui-design/concorde-html-structure.md
+++ b/docs/ui-design/concorde-html-structure.md
@@ -145,6 +145,12 @@ The following classes will be maintained for the Concorde layout:
 - Concorde-Layout-Footer
 - Concorde-Group-Layout
 
+## Concorde Dark Mode: Maintained HTML Classes
+
+The following classes will be maintained for dark mode:
+
+- Concorde-Dark
+
 ## Concorde Block & Concorde Step HTML IDs
 
 Block and Step HTML ids are unique and autogenerated, but remain the same throughout the lifetime of the step/block.