feat: dark mode switch design token [internal] by birosrichard · Pull Request #2704 · apify/apify-docs

birosrichard · 2026-06-29T16:36:36Z

Replaces the hand-maintained dark mode colors with the shared @apify/ui-library brand palette, so docs dark mode stays in sync with the rest of Apify's products. Dark tokens are injected via Root.jsx (light mode keeps its current pinned values, since the UI-library light set shifts the palette and has a broken card hover color.

Along the way: dark theme variants for Academy and landing page SVGs, card components switched to the shared tokens, and react-github-btn replaced with a small GitButton iframe component for proper dark mode support.

apify-service-account · 2026-06-29T16:37:17Z

✅ Preview for this PR (commit 266213e9) is ready at https://pr-2704.preview.docs.apify.com (see action run).

cursor · 2026-07-07T12:59:16Z

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

…ed dark mode support

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cursor · 2026-07-08T08:55:23Z

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

barjin

The previous, more muted dark mode colors were honestly a bit easier to read for me. Anyway, the changes seem fine to me code-wise 👍 Thanks @birosrichard !

barjin · 2026-07-08T09:25:08Z

I believe none of the changes in this file are necessary

It was failing in the CI pipeline for me. Will try to revert these changes and see how it goes.

Copilot

Pull request overview

This PR aligns the docs site’s dark mode with the shared @apify/ui-library brand palette by injecting UI-library dark design tokens at the theme root, and then refactoring key UI components/assets to consume those tokens consistently.

Changes:

Inject UI-library dark brand tokens via apify-docs-theme/src/theme/Root.jsx and remap dark-mode CSS variables in custom.css.
Update card components/styles to use shared token variables (including hover states) and add dark variants of Academy/landing SVG assets.
Replace react-github-btn usage with a custom GitButton iframe component to better support dark mode.

Reviewed changes

Copilot reviewed 18 out of 29 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tsconfig.json	Adds Docusaurus module type aliases to TS configuration.
static/img/landing-pages/cli_dark.svg	Updates dark landing SVG colors/defs to match new dark palette.
static/img/landing-pages/api_dark.svg	Updates dark landing SVG colors/defs to match new dark palette.
static/img/academy/scraping-basics-python-dark.svg	Adds dark-mode Academy course image asset.
static/img/academy/scraping-basics-javascript-dark.svg	Adds dark-mode Academy course image asset.
static/img/academy/api-scraping-dark.svg	Adds dark-mode Academy course image asset.
src/pages/index.tsx	Adjusts homepage banner styling for dark mode tokenized background.
src/components/SdkSection/SdkSection.tsx	Replaces GitHub star button with new `GitButton` component.
src/components/PlainCard/PlainCard.tsx	Applies shared hover/token styling via styled `VerticalTile`.
src/components/OpenSourceCards/styles.module.css	Switches hard-coded colors to shared token variables.
src/components/OpenSourceCards/OpenSourceCards.tsx	Replaces `react-github-btn` with `GitButton` across cards.
src/components/GitButton.tsx	Implements `GitButton` as a themed iframe using Docusaurus color mode.
src/components/CardWithIcon/CardWithIcon.tsx	Applies shared hover/token styling via styled `VerticalTile`.
src/components/Cards.module.css	Updates card hover/background/border behavior to use shared tokens in dark mode.
src/components/cardHoverStyles.ts	Introduces shared hover CSS snippet for card-like tiles.
src/components/Card.jsx	Simplifies dark-mode detection by using `colorMode` directly.
src/components/ActorTemplates/ActorTemplates.tsx	Forces Actor template card styling to shared token colors, including hover.
src/components/ActionCard/ActionCard.tsx	Applies shared hover styling and attempts to theme the arrow icon.
sources/academy/index.mdx	Passes dark-mode image URLs to Academy cards.
sources/academy/homepage_content.json	Adds `imageUrlDarkTheme` entries for Academy homepage cards.
sources/academy/build-and-publish/apify-store-basics/actor_description_seo_description.md	Updates admonitions to include titles and tweaks formatting.
package.json	Bumps `@apify/ui-library` and removes GitHub button dependencies.
apify-docs-theme/src/theme/Root.jsx	Adds theme root wrapper that injects UI-library dark token CSS variables.
apify-docs-theme/src/theme/custom.css	Refactors dark-mode CSS variables to reference injected token set and keeps pinned light tokens.
apify-docs-theme/package.json	Bumps theme package `@apify/ui-library` dependency to match root.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

webrdaniel

Looks good 👍 check the Copilot comments, the one about the iframe looks relevant

nit: the icons look a bit blueish

yeinn1000 · 2026-07-08T10:53:50Z

Thank you richard! I like it in general
Can you check those small cards' interaction?

…bility and performance

cursor · 2026-07-08T11:08:16Z

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

marekh19 · 2026-07-08T13:26:15Z

    const { colorMode } = useColorMode();
-    return <GitHubButton data-color-scheme={colorMode} {...props} />;
+    // unauthenticated GitHub API requests (60/hr) can throttle star counts — replace iframe with a direct GitHub API call + server-side token to fix
+    const src = `https://buttons.github.io/buttons.html#${new URLSearchParams({


note: This solution unfortunately proved not to be super reliable. It caused this issue on our web out of the blue, so I decided to replace it with a custom one. The width and height don't match precisely, so I'd say we're potentially risking the same issue here as well.

birosrichard marked this pull request as ready for review July 7, 2026 12:59

birosrichard requested review from honzajavorek and szaganek as code owners July 7, 2026 12:59

birosrichard marked this pull request as draft July 7, 2026 12:59

birosrichard and others added 11 commits July 7, 2026 21:04

feat: dark mode switch design token

a4deb92

feat: replace GitHubButton with custom GitButton component for improv…

0c13983

…ed dark mode support

fix: more dark mode changes

7206dcc

feat: update card components

4ea056c

feat: update acadene landing page

56231fe

fix: lint

555584b

fix: md lint

15e66a8

fix: update tip syntax for clarity

4fc0df4

fix: add title to admonition to pass Vale lint

c63f45b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat: use only shared dark palette

5852823

feat: apply dark mode background color to StyledBanner

55fbd9f

birosrichard force-pushed the feat/dark-mode-update branch from f9d5b9b to 55fbd9f Compare July 7, 2026 19:07

birosrichard linked an issue Jul 7, 2026 that may be closed by this pull request

Update dark theme colors #2695

Open

birosrichard added 2 commits July 7, 2026 21:13

feat: implement card hover styles for improved UI consistency

424965e

feat: revert the light tokens back

ed63c4c

birosrichard marked this pull request as ready for review July 8, 2026 08:55

Merge branch 'master' into feat/dark-mode-update

12c9af2

birosrichard requested review from barjin, marekh19, webrdaniel and yeinn1000 July 8, 2026 09:02

birosrichard self-assigned this Jul 8, 2026

birosrichard added the t-web Issues with this label are in the ownership of the web team. label Jul 8, 2026

birosrichard changed the title ~~feat: dark mode switch design token~~ feat: dark mode switch design token [internal] Jul 8, 2026

barjin approved these changes Jul 8, 2026

View reviewed changes

webrdaniel requested a review from Copilot July 8, 2026 09:43

Copilot started reviewing on behalf of webrdaniel July 8, 2026 09:44 View session

fix: revert the unwanted changes

047b3d0

Copilot AI reviewed Jul 8, 2026

View reviewed changes

webrdaniel approved these changes Jul 8, 2026

View reviewed changes

feat: update ActionCard and GitButton components for improved accessi…

266213e

…bility and performance

yeinn1000 approved these changes Jul 8, 2026

View reviewed changes

birosrichard requested a review from TC-MO July 8, 2026 13:03

marekh19 approved these changes Jul 8, 2026

View reviewed changes

Uh oh!

Conversation

birosrichard commented Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apify-service-account commented Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Jul 7, 2026

Uh oh!

cursor Bot commented Jul 8, 2026

Uh oh!

barjin left a comment

Choose a reason for hiding this comment

Uh oh!

barjin Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

birosrichard Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

webrdaniel left a comment

Choose a reason for hiding this comment

Uh oh!

yeinn1000 commented Jul 8, 2026

Uh oh!

cursor Bot commented Jul 8, 2026

Uh oh!

marekh19 Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

birosrichard commented Jun 29, 2026 •

edited

Loading

apify-service-account commented Jun 29, 2026 •

edited

Loading