feat(#3873): add dark mode theming with React context and Angular service by twjeffery · Pull Request #3874 · GovAlta/ui-components

twjeffery · 2026-04-24T04:20:54Z

Summary

Four small Svelte changes so dark mode can target colours that are currently hardcoded.

Changes

reset.css body background. Changed #fff to reference --goa-color-greyscale-white.
Dropdown native chevron. Replaced the pseudo-element chevron (hardcoded #333 stroke) with an inline SVG that follows --goa-dropdown-color-text. Same size and position as before.
WorkSideMenu account popover background. Added --goa-work-side-menu-account-bg so dark mode can give the popover its own background. Token is added in the design-tokens package in feat(#3873): add work-side-menu-account-bg token design-tokens#154.
AppHeader and WorkSideMenu logos. Added dark variant SVGs and a MutationObserver on the data-theme attribute so logos swap between light and dark when the theme changes.

Note on the logo pattern

The logos use JS (a MutationObserver on the data-theme attribute) to swap the <img src> between light and dark variants. The rest of the dark mode story is pure CSS cascade. This inconsistency is intentional for now: multi-colour branded imagery doesn't convert cleanly to currentColor-based inline SVG, and a proper refactor would be significantly larger. Happy to discuss a cleaner pattern in a follow-up if the team prefers.

Context

Companion to #3850 (dark mode spike). The spike covered most of dark mode through token overrides. These changes address the shadow-DOM gaps the cascade can't reach.

How to test

npm install
npx nx serve react-prs
On the Everything page, Dropdowns section, the new native dropdown should look the same as before.
Logo swap: open devtools, run document.documentElement.setAttribute('data-theme', 'dark'). AppHeader and WorkSideMenu logos swap. Run with 'light' to swap back.

Fixes #3873

github-actions · 2026-05-04T20:46:13Z

PR Preview Action v1.8.1
🚀 View preview at https://GovAlta.github.io/ui-components/pr-preview-angular/pr-3874/
Built to branch `gh-pages` at 2026-05-11 21:47 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-05-04T20:46:30Z

Preview links

Target	URL
Docs	https://govalta.github.io/ui-components/pr-preview/pr-3874/
React playground	https://govalta.github.io/ui-components/pr-preview-react/pr-3874/
Angular playground	https://govalta.github.io/ui-components/pr-preview-angular/pr-3874/

Built from commit ee14e9d. Previews are removed automatically when this PR closes.

twjeffery · 2026-05-06T23:04:46Z

@Spark450 I addressed your comments, the preview link should be updated now.

bdfranck · 2026-05-08T20:25:42Z

Suggested change

border-top: 1px solid var(--goa-color-greyscale-200);

There's a couple other hard-coded values that we can address here too.

bdfranck · 2026-05-08T20:48:05Z

 ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
  opacity: 1;
  /* Firefox */
 }

 :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
 }

 ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #999;
 }


Suggested change

::placeholder {

/* Chrome, Firefox, Opera, Safari 10.1+ */

color: var(--goa-input-color-text-placeholder);

opacity: 1;

/* Firefox */

}

:-ms-input-placeholder {

/* Internet Explorer 10-11 */

color: var(--goa-input-color-text-placeholder);

}

::-ms-input-placeholder {

/* Microsoft Edge */

color: var(--goa-input-color-text-placeholder);

}

I'm not sure how often teams use standard input elements but we can use a token to ensure the placeholder colour looks good in dark mode.

…vice Co-authored-by: Thomas Jeffery <thomaswjeffery@gmail.com>

bdfranck · 2026-05-11T16:34:35Z

+  outline: var(--goa-link-gap-small, 3px) solid
+    var(--goa-color-interactive-focus);


Suggested change

outline: var(--goa-link-gap-small, 3px) solid

var(--goa-color-interactive-focus);

outline: var(--goa-link-border-focus);

We can use a link-specific token here.

bdfranck

I looked at the changes...

✅ The hardcoded values are replaced with tokens
✅ All the tokens are valid

Looks good! 👍 I have one more comment about a link token.

bdfranck

I looked at the latest changes and I see the link focus uses our design token. Looks good to me! 👍

ArakTaiRoth · 2026-05-13T00:20:29Z

      </div>

+      {/* Middle pages (after groups) */}
+      {MIDDLE_PAGES.map((page) => (


MIDDLE_PAGES is never defined anywhere. This causes the side menu to disappear if Get Started is ever clicked.

ArakTaiRoth · 2026-05-13T01:17:15Z

@@ -0,0 +1,62 @@
+---


This page doesn't belong to the new Get Started collection, as such it isn't indexed for searching

ArakTaiRoth · 2026-05-13T01:17:25Z

@@ -0,0 +1,267 @@
+---


Same with this page

twjeffery mentioned this pull request Apr 24, 2026

feat(#3873): add work-side-menu-account-bg token GovAlta/design-tokens#154

Merged

twjeffery marked this pull request as ready for review April 24, 2026 04:30

twjeffery requested a review from vanessatran-ddi April 24, 2026 04:31

twjeffery marked this pull request as draft April 24, 2026 15:55

twjeffery removed the request for review from vanessatran-ddi April 24, 2026 15:55

twjeffery force-pushed the tom/dark-mode-svelte-hooks branch from f6d7723 to d3c0858 Compare April 24, 2026 15:56

twjeffery changed the title ~~feat(#3873): add dark mode styles to Dropdown, WorkSideMenu, and body~~ feat(#3873): add dark mode styles to AppHeader, Dropdown, WorkSideMenu, and body Apr 24, 2026

twjeffery mentioned this pull request Apr 24, 2026

Dark mode spike: token override approach for the playground #3850

Closed

twjeffery marked this pull request as ready for review April 24, 2026 16:20

twjeffery requested a review from vanessatran-ddi April 24, 2026 16:20

vanessatran-ddi marked this pull request as draft April 27, 2026 14:15

vanessatran-ddi self-assigned this Apr 27, 2026

vanessatran-ddi force-pushed the tom/dark-mode-svelte-hooks branch 4 times, most recently from 6a949ce to 7c13087 Compare May 4, 2026 20:43

vanessatran-ddi assigned twjeffery May 4, 2026

vanessatran-ddi changed the title ~~feat(#3873): add dark mode styles to AppHeader, Dropdown, WorkSideMenu, and body~~ feat(#3873): add dark mode theming with React context and Angular service May 4, 2026

vanessatran-ddi force-pushed the tom/dark-mode-svelte-hooks branch from e0da260 to f053c07 Compare May 4, 2026 21:37

vanessatran-ddi mentioned this pull request May 4, 2026

feat(#3873): add dark theme token output GovAlta/design-tokens#157

Merged

vanessatran-ddi marked this pull request as ready for review May 4, 2026 21:43

ArakTaiRoth deleted the branch dev May 5, 2026 18:28

ArakTaiRoth closed this May 5, 2026

vanessatran-ddi reopened this May 5, 2026

vanessatran-ddi force-pushed the tom/dark-mode-svelte-hooks branch from 9b15657 to 7683a4e Compare May 5, 2026 22:45

twjeffery mentioned this pull request May 6, 2026

feat(#3873): add dark mode support to extended color tokens GovAlta/design-tokens#158

Merged

3 tasks

twjeffery force-pushed the tom/dark-mode-svelte-hooks branch from 95e5d8a to 9338255 Compare May 6, 2026 22:02

Spark450 self-requested a review May 6, 2026 22:41

Spark450 reviewed May 6, 2026

View reviewed changes

Comment thread docs/src/pages/get-started/developers/dark-mode-theme.astro

Comment thread docs/src/components/nav/MenuSecondaryContent.tsx Outdated

twjeffery requested a review from Spark450 May 6, 2026 23:04

vanessatran-ddi force-pushed the tom/dark-mode-svelte-hooks branch from 6309fdc to 6fb63a9 Compare May 7, 2026 18:02

vanessatran-ddi requested review from ArakTaiRoth and bdfranck May 7, 2026 20:28

Spark450 mentioned this pull request May 7, 2026

Homepage: replace Build your service section with dark mode experimental highlight #3924

Open

7 tasks

bdfranck reviewed May 8, 2026

View reviewed changes

vanessatran-ddi and others added 10 commits May 11, 2026 08:51

feat(#3873): add dark mode theming with React context and Angular ser…

ddf8e7a

…vice Co-authored-by: Thomas Jeffery <thomaswjeffery@gmail.com>

chore: rebase vs dev and upgrade design-tokens version

033d1c5

feat(#3873): use text-dark token in strong emphasis badges

ad14b7f

feat(#3873): apply dark mode across docs site

9908bfe

chore(#3873): bump design-tokens-v2 to 2.8.0 and fix visited link color

090ec91

chore(#3873): clarify experimental status in callouts and badge

980d988

chore: export hook isDarkMode for Astro pages, clean code

3a4224c

chore: add fallback values to Badge

d964a74

chore: update docs content

37e1372

chore: replace hardcoded values in reset.css with design tokens

dbe5e00

vanessatran-ddi force-pushed the tom/dark-mode-svelte-hooks branch from 87d7a91 to dbe5e00 Compare May 11, 2026 15:03

vanessatran-ddi requested a review from bdfranck May 11, 2026 15:17

bdfranck reviewed May 11, 2026

View reviewed changes

chore: replace hardcoded values in reset.css vs design tokens

ee14e9d

vanessatran-ddi requested a review from bdfranck May 11, 2026 23:44

bdfranck approved these changes May 12, 2026

View reviewed changes

ArakTaiRoth reviewed May 13, 2026

View reviewed changes

twjeffery linked an issue May 13, 2026 that may be closed by this pull request

Dark mode support for the design system #3849

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#3873): add dark mode theming with React context and Angular service#3874

feat(#3873): add dark mode theming with React context and Angular service#3874
twjeffery wants to merge 11 commits into
devfrom
tom/dark-mode-svelte-hooks

twjeffery commented Apr 24, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 4, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-05-11 21:47 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented May 4, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

twjeffery commented May 6, 2026

Uh oh!

bdfranck May 8, 2026

Uh oh!

bdfranck May 8, 2026

Uh oh!

bdfranck May 11, 2026

Uh oh!

bdfranck left a comment

Uh oh!

bdfranck left a comment

Uh oh!

ArakTaiRoth May 13, 2026

Uh oh!

ArakTaiRoth May 13, 2026

Uh oh!

ArakTaiRoth May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		outline: var(--goa-link-gap-small, 3px) solid
		var(--goa-color-interactive-focus);

	outline: var(--goa-link-gap-small, 3px) solid
	var(--goa-color-interactive-focus);
	outline: var(--goa-link-border-focus);

Conversation

twjeffery commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Note on the logo pattern

Context

How to test

Uh oh!

github-actions Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-05-11 21:47 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview links

Uh oh!

Uh oh!

Uh oh!

twjeffery commented May 6, 2026

Uh oh!

bdfranck May 8, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 8, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 11, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth May 13, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth May 13, 2026

Choose a reason for hiding this comment

Uh oh!

ArakTaiRoth May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

twjeffery commented Apr 24, 2026 •

edited

Loading

github-actions Bot commented May 4, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-05-11 21:47 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented May 4, 2026 •

edited

Loading