Skip to content

NickAkhmetov/Dark mode 6/8: Home page and remaining components - #4120

Open
NickAkhmetov wants to merge 1 commit into
nickakhmetov/dark-mode-third-partyfrom
nickakhmetov/dark-mode-long-tail
Open

NickAkhmetov wants to merge 1 commit into
nickakhmetov/dark-mode-third-partyfrom
nickakhmetov/dark-mode-long-tail

Conversation

@NickAkhmetov

@NickAkhmetov NickAkhmetov commented Oct 30, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Adapts the home page and the remaining components that the palette and primitives PRs did not cover.

Home page

  • The hero dims its background image in dark mode instead of washing it out. Its cards and the Launch Workspaces button use the paper color.
  • The section gradients get dark accent tints, computed with the same rule as the dark palette, and end at the paper color.
  • The entity counts band gets a dark tint. Its hover text uses the contrast color for primary.light.

Elsewhere

  • Literal black text (file sizes, facet labels, the metadata menu) uses text.primary.
  • The publication visualization accordion uses the paper color when collapsed.
  • Workspace borders use the divider color.
  • The visualization selection button no longer forces white text, so the contained button's contrast text applies.

Stack

Merge in order. Each PR targets the branch of the PR before it, so its diff shows only its own changes.

  1. NickAkhmetov/CAT-44 Match fullscreen visualization header to dark theme #4112 Match fullscreen visualization header to dark theme
  2. NickAkhmetov/Dark mode 1/8: Build the dark theme from a full dark palette #4115 Dark mode 1/8: Build the dark theme from a full dark palette
  3. NickAkhmetov/Dark mode 2/8: Add a dark mode preference #4116 Dark mode 2/8: Add a dark mode preference
  4. NickAkhmetov/Dark mode 3/8: Give the custom palette dark-mode values #4117 Dark mode 3/8: Give the custom palette dark-mode values
  5. NickAkhmetov/Dark mode 4/8: Make shared primitives follow the theme #4118 Dark mode 4/8: Make shared primitives follow the theme
  6. NickAkhmetov/Dark mode 5/8: Third-party widgets and light islands #4119 Dark mode 5/8: Third-party widgets and light islands
  7. NickAkhmetov/Dark mode 6/8: Home page and remaining components #4120 Dark mode 6/8: Home page and remaining components (this PR)
  8. NickAkhmetov/Dark mode 7/8: Storybook theme switch and chart axis titles #4121 Dark mode 7/8: Storybook theme switch and chart axis titles
  9. NickAkhmetov/Dark mode 8/8: Fix mismatched surfaces and unreadable text #4122 Dark mode 8/8: Fix mismatched surfaces and unreadable text

Design Documentation/Original Tickets

Follows #4112 (CAT-44).

Testing

At the top of the stack (nickakhmetov/dark-mode-polish, which includes this PR): pnpm test 1065 passed and 7 skipped, pnpm lint and pnpm tsc are clean, and uv run pytest context/app 375 passed. CI runs on each PR in the stack.

To review: in dark mode, look at the home page, the search facets and metadata menu, a dataset's files section, a publication's visualizations and the workspaces pages.

Screenshots/Video

To be added.

Checklist

  • Code follows the project's coding standards
    • Lint checks pass locally
    • New CHANGELOG-dark-mode-long-tail.md is present in the root directory, describing the change(s) in full sentences.
  • Unit tests covering the new feature have been added
  • All existing tests pass
  • Any relevant documentation in JIRA/Confluence has been updated to reflect the new feature
  • Any new functionalities have appropriate analytics functionalities added

🤖 Generated with Claude Code

The home hero dims its background image in dark mode instead of washing
it out, and its cards and Launch Workspaces button use the paper color.
The section gradients get dark accent tints, computed with the same rule
as the dark palette, and end at the paper color. The entity counts band
gets a dark tint, and its hover text uses the contrast color for
primary.light.

Elsewhere, literal black text (file sizes, facet labels, the metadata
menu) uses text.primary, the publication visualization accordion uses
the paper color when collapsed, and workspace borders use the divider.
The visualization selection button drops its forced white text, so the
contained button's contrast text applies.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant