From b69a42adc60b7930f94a71b1305aef93786a5943 Mon Sep 17 00:00:00 2001 From: Adeola Adeyemo Date: Wed, 19 Nov 2025 16:51:38 +0000 Subject: [PATCH] update: add dark mode to custom css documentation Signed-off-by: Adeola Adeyemo --- docs/journeys/custom-css.md | 8 +++ docs/ui-design/concorde-design-tokens.md | 62 ++++++++++++++++++++++++ 2 files changed, 70 insertions(+) diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md index 522fd06..7c1fc2d 100644 --- a/docs/journeys/custom-css.md +++ b/docs/journeys/custom-css.md @@ -18,6 +18,8 @@ Custom CSS gives you the power to: **Note:** This feature is part of our new Concorde design migration. Custom CSS applies only to journeys (not the End Customer Portal). We’re continuously improving support for this feature, so refer to the latest release notes for newer updates. +If you plan to use this feature with dark mode, refer to the dark mode section below. + **Pricing:** This feature is available exclusively from the Professional pricing plan. ## Styling Structure @@ -102,6 +104,12 @@ To avoid modifying the core layout and overall security of the journey, support 5. **Preview and Save:** Use the live preview to see changes as you type, then save your work. 6. **Test your live journey:** Open your journey in a new tab to confirm that the design looks as expected. +## 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. + +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. + ## Examples ### Increase Text Sizes diff --git a/docs/ui-design/concorde-design-tokens.md b/docs/ui-design/concorde-design-tokens.md index 4adf722..0727fe9 100644 --- a/docs/ui-design/concorde-design-tokens.md +++ b/docs/ui-design/concorde-design-tokens.md @@ -79,6 +79,68 @@ sidebar_position: 3 | `--concorde-disabled-opacity` | `0.38` | The default opacity used for disabled states | | `--concorde-input-height` | `48px` | The default input height for regular inputs | +### Dark Mode + +The following tokens become active when dark mode is enabled. Each token has a dark mode variant with the suffix `-dark`. + +#### 🎨 Main Colors (Dark Mode) + +| CSS Variable | Description | +| --------------------------------- | -------------------------------------------------------------------- | +| `--concorde-primary-color-dark` | Dark mode variant of `--concorde-primary-color` | +| `--concorde-accent-color-dark` | Dark mode variant of `--concorde-accent-color` | +| `--concorde-secondary-color-dark` | Dark mode variant of `--concorde-secondary-color` | +| `--concorde-disabled-color-dark` | Dark mode variant of `--concorde-disabled-color` | +| `--concorde-error-color-dark` | Dark mode variant of `--concorde-error-color` | +| `--concorde-outline-dark` | Dark mode variant of `--concorde-outline` | +| `--concorde-divider-color-dark` | Dark mode variant of `--concorde-divider-color` | + +#### 🎨 Text Colors (Dark Mode) + +| CSS Variable | Description | +| ------------------------------------- | ----------------------------------------------------------- | +| `--concorde-primary-text-dark` | Dark mode variant of `--concorde-primary-text` | +| `--concorde-secondary-text-dark` | Dark mode variant of `--concorde-secondary-text` | +| `--concorde-disabled-text-dark` | Dark mode variant of `--concorde-disabled-text` | +| `--concorde-disabled-label-text-dark` | Dark mode variant of `--concorde-disabled-label-text` | +| `--concorde-button-default-text-dark` | Dark mode variant of `--concorde-button-default-text` | + +#### 🎨 Background Colors (Dark Mode) + +| CSS Variable | Description | +| ----------------------------------------------- | ----------------------------------------------------------------- | +| `--concorde-default-background-dark` | Dark mode variant of `--concorde-default-background` | +| `--concorde-surface-background-dark` | Dark mode variant of `--concorde-surface-background` | +| `--concorde-neutral-surface-dark` | Dark mode variant of `--concorde-neutral-surface` | +| `--concorde-loading-background-dark` | Dark mode variant of `--concorde-loading-background` | +| `--concorde-disabled-background-dark` | Dark mode variant of `--concorde-disabled-background` | +| `--concorde-topbar-background-dark` | Dark mode variant of `--concorde-topbar-background` | +| `--concorde-product-tile-background-color-dark` | Dark mode variant of `--concorde-product-tile-background-color` | +| `--concorde-card-default-background-dark` | Dark mode variant of `--concorde-card-default-background` | +| `--concorde-skeleton-bg-from-dark` | Dark mode variant of `--concorde-skeleton-bg-from` | +| `--concorde-skeleton-bg-to-dark` | Dark mode variant of `--concorde-skeleton-bg-to` | + +#### 🎨 Component Colors (Dark Mode) + +| CSS Variable | Description | +| ------------------------------------------------- | ------------------------------------------------------------------- | +| `--concorde-coupon-discount-color-dark` | Dark mode variant of `--concorde-coupon-discount-color` | +| `--concorde-coupon-cashback-color-dark` | Dark mode variant of `--concorde-coupon-cashback-color` | +| `--concorde-primary-button-background-color-dark` | Dark mode variant of `--concorde-primary-button-background-color` | +| `--concorde-primary-button-hover-bg-color-dark` | Dark mode variant of `--concorde-primary-button-hover-bg-color` | +| `--concorde-toggle-button-border-color-dark` | Dark mode variant of `--concorde-toggle-button-border-color` | + +#### 🎨 RGB Colors (Dark Mode) + +| CSS Variable | Description | +| ---------------------------------------- | --------------------------------------------------------------- | +| `--concorde-primary-color-rgb-dark` | Dark mode variant of `--concorde-primary-color-rgb` | +| `--concorde-secondary-color-rgb-dark` | Dark mode variant of `--concorde-secondary-color-rgb` | +| `--concorde-error-color-rgb-dark` | Dark mode variant of `--concorde-error-color-rgb` | +| `--concorde-default-background-rgb-dark` | Dark mode variant of `--concorde-default-background-rgb` | +| `--concorde-primary-text-rgb-dark` | Dark mode variant of `--concorde-primary-text-rgb` | +| `--concorde-secondary-text-rgb-dark` | Dark mode variant of `--concorde-secondary-text-rgb` | + --- ## Concorde Layout Tokens