Skip to content

feat: dark mode switch design token #2704

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

Draft
birosrichard wants to merge 10 commits into
base: master
Choose a base branch
from
Draft

feat: dark mode switch design token #2704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
10ca744
feat: dark mode switch design token
birosrichard Jun 29, 2026
1b7dd84
feat: replace GitHubButton with custom GitButton component for improv…
birosrichard Jul 1, 2026
e7bceb5
fix: more dark mode changes
birosrichard Jul 1, 2026
fda2f50
feat: update card components
birosrichard Jul 1, 2026
c0ae6d3
feat: update acadene landing page
birosrichard Jul 1, 2026
f738f85
fix: lint
birosrichard Jul 1, 2026
bd5faa9
fix: md lint
birosrichard Jul 2, 2026
7a7047c
fix: update tip syntax for clarity
birosrichard Jul 2, 2026
7b3da78
fix: add title to admonition to pass Vale lint
birosrichard Jul 2, 2026
a3d4416
feat: use only shared dark palette
birosrichard Jul 3, 2026
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
2 changes: 1 addition & 1 deletion apify-docs-theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"dependencies": {
"@apify/docs-search-modal": "^1.3.3",
"@apify/ui-icons": "^1.19.0",
"@apify/ui-library": "^1.97.2",
"@apify/ui-library": "^1.151.0",
"@docusaurus/theme-common": "^3.7.0",
"@stackql/docusaurus-plugin-hubspot": "^1.1.0",
"algoliasearch": "^5.19.0",
Expand Down
14 changes: 14 additions & 0 deletions apify-docs-theme/src/theme/Root.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';
import { cssColorsVariablesBrandDark } from '@apify/ui-library';

// Only the brand dark tokens are injected - the ui-library light tokens shift
// the palette from the current design, so light mode keeps its existing colors.
// Same approach as apify-blog-theme#223.
export default function Root({ children }) {
return (
<>
<style>{`html[data-theme='dark'] { ${cssColorsVariablesBrandDark} }`}</style>
{children}
</>
);
}
288 changes: 77 additions & 211 deletions apify-docs-theme/src/theme/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,77 @@
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');

html[data-theme='dark'] {
--ifm-navbar-background-color: #1a1b23;
--ifm-background-color: #1a1b23;
--ifm-background-surface-color: #242736;
--ifm-navbar-background-color: var(--color-neutral-background-muted);
--ifm-background-color: var(--color-neutral-background);
--ifm-background-surface-color: var(--color-neutral-background-subtle);

--ifm-font-color-base: #f2f3fb;
--ifm-font-color-base: var(--color-neutral-text);

--ifm-pre-background: #242736;
--ifm-pre-background: var(--color-neutral-background-subtle);

--ifm-color-primary: #5d9df1;
--ifm-link-color: #5d9df1;
--ifm-heading-color: #f2f3fb;
--ifm-navbar-link-color: #f2f3fb;
--ifm-color-primary: var(--color-primary-action);
--ifm-link-color: var(--color-primary-text-interactive);
--ifm-heading-color: var(--color-neutral-text);
--ifm-navbar-link-color: var(--color-neutral-text);

--ifm-line-height-base: 1.65;

--ifm-code-background: var(--ifm-pre-background) !important;
--ifm-footer-title-color: #f2f3fb;
--ifm-footer-link-color: #8d92af;
--ifm-footer-title-color: var(--color-neutral-text);
--ifm-footer-link-color: var(--color-neutral-text-muted);

--docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
--docsearch-text-color: #8d92af;
--docsearch-text-color: var(--color-neutral-text-muted);

/* TRON colors */
--color-Neutral_Text: #f3f4fa;
--color-Neutral_TextMuted: #b0b8d1;
--color-Neutral_Border: #d1d5e4;
--color-Neutral_Hover: #2a2d39;
--color-Neutral_Background: #1a1b21;
--color-Neutral_BackgroundMuted: #252832;
--color-Neutral_ChipBackground: #555d76;
--color-Neutral_ChipBackgroundActive: #8c93a8;
--color-Neutral_SeparatorSubtle: #31384d;
--color-Primary_ChipText: #8ebcff;
--color-Primary_ChipBackground: #1a3a78;
--color-Primary_TextInteractive: #6f9dff;

/* EXPERIMENT: tokens for shared components */
--color-neutral-text: #f3f4fa;
--color-neutral-text-muted: #b2b8cc;
--color-neutral-text-subtle: #8c93a8;
--color-neutral-text-disabled: #575d71;
--color-neutral-text-on-primary: #1a1b21;
--color-neutral-icon-on-primary: #1a1b21;
--color-neutral-background: #1a1b21;
--color-neutral-background-muted: #252832;
--color-neutral-background-subtle: #2a2d39;
--color-neutral-background-white: #f3f4fa;
--color-neutral-card-background: #1e2027;
--color-neutral-border: #414758;
--color-neutral-separator-subtle: #343847;
--color-neutral-hover: #2d313e;
--color-neutral-disabled: #343847;
--color-neutral-overflow: #2a2d39;
--color-neutral-icon: #b2b8cc;
--color-neutral-icon-subtle: #6e758a;
--color-neutral-icon-disabled: #575d71;
--color-neutral-field-border: #343847;
--color-neutral-action-secondary: #575d71;
--color-neutral-action-secondary-hover: #6e758a;
--color-neutral-action-secondary-active: #343847;
--color-neutral-chip-background: #575d71;
--color-neutral-chip-background-hover: #6e758a;
--color-neutral-chip-background-active: #8c93a8;
--color-neutral-chip-background-disabled: #8c93a8;
--color-neutral-large-tooltip-background: #2a2d39;
--color-neutral-large-tooltip-border: #343847;
--color-neutral-small-tooltip-background: #1a1b21;
--color-neutral-small-tooltip-border: #252832;
--color-neutral-overlay: #101114cc;
--color-neutral-field-background: #101114;
--color-neutral-text-placeholder: #6e758a;
--color-primary-text: #6f9dff;
--color-primary-text-interactive: #6f9dff;
--color-primary-icon: #3970d7;
--color-primary-action: #5990ff;
--color-primary-action-hover: #80a9ff;
--color-primary-action-active: #3970d7;
--color-primary-black-action: #ffffff;
--color-primary-black-action-hover: #d1d5e4;
--color-primary-black-action-active: #f3f4fa;
--color-primary-field-border-active: #3970d7;
--color-primary-chip-background: #1a3a78;
--color-primary-chip-background-hover: #194594;
--color-primary-chip-text: #8ebcff;
--color-primary-shadow-active: #295cbb;
--color-success-text: #3bb358;
--color-success-icon: #23a64a;
--color-success-background-subtle: #0f2b14;
--color-success-background-subtle-hover: #14441f;
--color-success-background-subtle-active: #006e29;
--color-success-border: #068a35;
--color-success-border-subtle: #006e29;
--color-success-action: #23a64a;
--color-success-action-hover: #3bb358;
--color-success-action-active: #068a35;
--color-success-chip-background: #14441f;
--color-success-chip-background-hover: #00531e;
--color-success-chip-text: #6ccd7c;
--color-warning-text: #f9ce4b;
--color-warning-icon: #f5bc38;
--color-warning-background-subtle: #3f1b07;
--color-warning-border-subtle: #8a4f05;
--color-warning-field-border: #cf9117;
--color-warning-chip-background: #5d2e0e;
--color-warning-chip-background-hover: #6d3806;
--color-warning-chip-text: #f9ce4b;
--color-danger-text: #ff7157;
--color-danger-icon: #ef6045;
--color-danger-background-subtle: #40191b;
--color-danger-background-subtle-hover: #672523;
--color-danger-background-subtle-active: #aa3229;
--color-danger-border: #cf4436;
--color-danger-border-subtle: #aa3229;
--color-danger-field-border: #ef6045;
--color-danger-action: #ef6045;
--color-danger-action-hover: #ff7157;
--color-danger-action-active: #cf4436;
--color-danger-chip-background: #672523;
--color-danger-chip-background-hover: #812420;
--color-danger-chip-text: #fe9e8a;
--button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
--color-Neutral_Text: var(--color-neutral-text);
--color-Neutral_TextMuted: var(--color-neutral-text-muted);
--color-Neutral_Border: var(--color-neutral-border);
--color-Neutral_Hover: var(--color-neutral-hover);
--color-Neutral_Background: var(--color-neutral-background);
--color-Neutral_BackgroundMuted: var(--color-neutral-background-muted);
--color-Neutral_ChipBackground: var(--color-neutral-chip-background);
--color-Neutral_ChipBackgroundActive: var(--color-neutral-chip-background-active);
--color-Neutral_SeparatorSubtle: var(--color-neutral-separator-subtle);
--color-Primary_ChipText: var(--color-primary-chip-text);
--color-Primary_ChipBackground: var(--color-primary-chip-background);
--color-Primary_TextInteractive: var(--color-primary-text-interactive);
}

:root {
/*
* Light-mode color tokens. The ui-library light token set is not injected
* (its palette shifts from the current design and its card hover color is
* broken - identical to the card background), so light values are pinned
* here. Dark mode gets its tokens from cssColorsVariablesBrandDark,
* injected in Root.jsx, which overrides these.
*/
--color-neutral-background: #ffffff;
--color-neutral-background-muted: #f9f9fa;
--color-neutral-background-subtle: #f4f4f5;
--color-neutral-border: #d2d3d6;
--color-neutral-card-background: #ffffff;
--color-neutral-card-background-hover: #f1f2f7;
--color-neutral-chip-background: #e4e5e6;
--color-neutral-chip-background-active: #c9cbcf;
--color-neutral-field-border: #c9cbcf;
--color-neutral-hover: #edeeef;
--color-neutral-icon: #4f5257;
--color-neutral-overflow: #e4e5e6;
--color-neutral-separator-subtle: #e4e5e6;
--color-neutral-text: #1f2123;
--color-neutral-text-muted: #3d3f43;
--color-neutral-text-on-primary: #ffffff;
--color-neutral-text-placeholder: #a9acb1;
--color-neutral-text-subtle: #6d7178;
--color-primary-action: #246dff;
--color-primary-action-hover: #4788ff;
--color-primary-black-action: #242528;
--color-primary-black-action-hover: #292b2e;
--color-primary-chip-background: #e0ebff;
--color-primary-chip-text: #0043ca;
--color-primary-text-interactive: #246dff;

/* use default system font based on https://devhints.io/css-system-font-stack */
--ifm-font-family-base:
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
Expand All @@ -135,6 +82,7 @@ html[data-theme='dark'] {
--ifm-list-item-margin: 0.4rem !important;
--ifm-list-left-padding: 3.2rem !important;
--ifm-font-weight-semibold: 600;
--ifm-background-color: var(--color-neutral-background);
--ifm-font-color-base: #242736;

--ifm-navbar-sidebar-width: 100vw;
Expand Down Expand Up @@ -187,105 +135,22 @@ html[data-theme='dark'] {
--ifm-h5-font-size: 1.4rem;
--ifm-h6-font-size: 1.2rem;

/* Override package's identical light-mode card hover color */
--color-neutral-card-background-hover: var(--color-neutral-hover);

/* TRON colors */
--color-Neutral_Text: #242836;
--color-Neutral_TextMuted: #3f475d;
--color-Neutral_Border: #d0d5e9;
--color-Neutral_Hover: #f3f4fa;
--color-Neutral_Background: #ffffff;
--color-Neutral_BackgroundMuted: #f8f9fc;
--color-Neutral_ChipBackground: #e0e3f2;
--color-Neutral_ChipBackgroundActive: #c1c6dd;
--color-Neutral_SeparatorSubtle: #e0e3f2;
--color-Primary_ChipText: #1a57da;
--color-Primary_ChipBackground: #e1eaff;
--color-Primary_TextInteractive: #3970d7;

/* EXPERIMENT: tokens for shared components */
--color-neutral-text: #242836;
--color-neutral-text-muted: #3f475d;
--color-neutral-text-subtle: #6c7590;
--color-neutral-text-disabled: #c0c6de;
--color-neutral-text-on-primary: #ffffff;
--color-neutral-icon-on-primary: #ffffff;
--color-neutral-background: #ffffff;
--color-neutral-background-muted: #f8f9fc;
--color-neutral-background-subtle: #f3f4fa;
--color-neutral-background-white: #ffffff;
--color-neutral-card-background: #ffffff;
--color-neutral-border: #d0d5e9;
--color-neutral-separator-subtle: #e0e3f2;
--color-neutral-hover: #eef0f8;
--color-neutral-disabled: #f3f4fa;
--color-neutral-overflow: #e0e3f2;
--color-neutral-icon: #555d76;
--color-neutral-icon-subtle: #8a93ae;
--color-neutral-icon-disabled: #b0b8d1;
--color-neutral-field-border: #c0c6de;
--color-neutral-action-secondary: #d0d5e9;
--color-neutral-action-secondary-hover: #e0e3f2;
--color-neutral-action-secondary-active: #c0c6de;
--color-neutral-chip-background: #e0e3f2;
--color-neutral-chip-background-hover: #d0d5e9;
--color-neutral-chip-background-active: #c0c6de;
--color-neutral-chip-background-disabled: #d0d5e9;
--color-neutral-large-tooltip-background: #ffffff;
--color-neutral-large-tooltip-border: #e0e3f2;
--color-neutral-small-tooltip-background: #191b22;
--color-neutral-small-tooltip-border: #242836;
--color-neutral-overlay: #191b2280;
--color-neutral-field-background: #f8f9fc;
--color-neutral-text-placeholder: #969eb8;
--color-primary-text: #1672eb;
--color-primary-text-interactive: #1672eb;
--color-primary-icon: #1672eb;
--color-primary-action: #1672eb;
--color-primary-action-hover: #5290f9;
--color-primary-action-active: #1a57da;
--color-primary-black-action: #272d3e;
--color-primary-black-action-hover: #2b3143;
--color-primary-black-action-active: #0a0b0f;
--color-primary-field-border-active: #1672eb;
--color-primary-chip-background: #e1eaff;
--color-primary-chip-background-hover: #d8e2ff;
--color-primary-chip-text: #1a57da;
--color-primary-shadow-active: #b2c6ff;
--color-success-text: #008a27;
--color-success-icon: #008a27;
--color-success-background-subtle: #e4f5e5;
--color-success-background-subtle-hover: #cfe9d1;
--color-success-background-subtle-active: #80da8d;
--color-success-border: #00ab46;
--color-success-border-subtle: #80da8d;
--color-success-action: #008a27;
--color-success-action-hover: #00ab46;
--color-success-action-active: #086e08;
--color-success-chip-background: #daefdc;
--color-success-chip-background-hover: #cfe9d1;
--color-success-chip-text: #086e08;
--color-warning-text: #a96600;
--color-warning-icon: #f5b315;
--color-warning-background-subtle: #f9f0db;
--color-warning-border-subtle: #f5b315;
--color-warning-field-border: #f5b315;
--color-warning-chip-background: #f7e8c4;
--color-warning-chip-background-hover: #f7dfb1;
--color-warning-chip-text: #8c4e02;
--color-danger-text: #e3231d;
--color-danger-icon: #e3231d;
--color-danger-background-subtle: #fff0ec;
--color-danger-background-subtle-hover: #fedad1;
--color-danger-background-subtle-active: #ffb39f;
--color-danger-border: #fa4d37;
--color-danger-border-subtle: #ffb39f;
--color-danger-field-border: #fa4d37;
--color-danger-action: #e3231d;
--color-danger-action-hover: #fa4d37;
--color-danger-action-active: #bb0401;
--color-danger-chip-background: #ffe3dc;
--color-danger-chip-background-hover: #fedad1;
--color-danger-chip-text: #bb0401;
--button-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
--color-Neutral_Text: var(--color-neutral-text);
--color-Neutral_TextMuted: var(--color-neutral-text-muted);
--color-Neutral_Border: var(--color-neutral-border);
--color-Neutral_Hover: var(--color-neutral-hover);
--color-Neutral_Background: var(--color-neutral-background);
--color-Neutral_BackgroundMuted: var(--color-neutral-background-muted);
--color-Neutral_ChipBackground: var(--color-neutral-chip-background);
--color-Neutral_ChipBackgroundActive: var(--color-neutral-chip-background-active);
--color-Neutral_SeparatorSubtle: var(--color-neutral-separator-subtle);
--color-Primary_ChipText: var(--color-primary-chip-text);
--color-Primary_ChipBackground: var(--color-primary-chip-background);
--color-Primary_TextInteractive: var(--color-primary-text-interactive);
}

@font-face {
Expand Down Expand Up @@ -469,6 +334,7 @@ footer .col {

.navbar__sub {
padding: 0.8rem var(--ifm-spacing-horizontal);
background: var(--color-neutral-background-muted);
height: 58px;
}

Expand Down Expand Up @@ -613,7 +479,7 @@ aside .icon svg[class*='iconExternalLink'] {
margin-right: 1.6rem;
padding-right: 2rem;
position: relative;
border-right: 1px solid var(--color-Neutral_SeparatorSubtle);
border-right: 1px solid var(--color-neutral-border);
justify-content: center;
}

Expand Down Expand Up @@ -914,12 +780,12 @@ html .plugin-docs .theme-doc-markdown h3 {

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
color: #b3b8d2;
color: var(--color-neutral-text);
}

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
color: #f2f3fb;
color: var(--color-neutral-text);
}

.theme-doc-sidebar-menu .menu__link--active,
Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
},
"dependencies": {
"@apify/ui-icons": "^1.26.0",
"@apify/ui-library": "^1.131.1",
"@apify/ui-library": "^1.151.0",
"@docusaurus/core": "~3.9.2",
"@docusaurus/faster": "~3.9.2",
"@docusaurus/plugin-client-redirects": "~3.9.2",
Expand All @@ -92,7 +92,6 @@
"raw-loader": "^4.0.2",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-github-btn": "^1.4.0",
"styled-components": "^6.4.1",
"unist-util-visit": "^5.0.0"
},
Expand Down
Loading
Loading