Skip to content

Add dark mode to custom css documentation #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DeolaJ merged 1 commit into from
Nov 19, 2025
Merged

Add dark mode to custom css documentation #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/journeys/custom-css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
62 changes: 62 additions & 0 deletions docs/ui-design/concorde-design-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading