From 10ca744ca271c20942a83f5455cfdbfc0a8cdc53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Richard=20Biro=C5=A1?= Date: Mon, 29 Jun 2026 16:43:48 +0200 Subject: [PATCH 01/10] feat: dark mode switch design token --- apify-docs-theme/src/theme/custom.css | 96 +++++++++++++-------------- src/components/Cards.module.css | 2 +- 2 files changed, 49 insertions(+), 49 deletions(-) diff --git a/apify-docs-theme/src/theme/custom.css b/apify-docs-theme/src/theme/custom.css index e13fbed652..87a6ec889d 100644 --- a/apify-docs-theme/src/theme/custom.css +++ b/apify-docs-theme/src/theme/custom.css @@ -1,13 +1,13 @@ @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: #0f0f0f; + --ifm-background-color: #020202; + --ifm-background-surface-color: #1d1d1d; - --ifm-font-color-base: #f2f3fb; + --ifm-font-color-base: #dfdfdf; - --ifm-pre-background: #242736; + --ifm-pre-background: #1d1d1d; --ifm-color-primary: #5d9df1; --ifm-link-color: #5d9df1; @@ -24,54 +24,54 @@ html[data-theme='dark'] { --docsearch-text-color: #8d92af; /* 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-Neutral_Text: #dfdfdf; + --color-Neutral_TextMuted: #a3a3a3; + --color-Neutral_Border: #2a2a2a; + --color-Neutral_Hover: #313131; + --color-Neutral_Background: #020202; + --color-Neutral_BackgroundMuted: #0f0f0f; + --color-Neutral_ChipBackground: #606060; + --color-Neutral_ChipBackgroundActive: #959595; + --color-Neutral_SeparatorSubtle: #161616; --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-neutral-text: #dfdfdf; + --color-neutral-text-muted: #a3a3a3; + --color-neutral-text-subtle: #888888; + --color-neutral-text-disabled: #454545; + --color-neutral-text-on-primary: #161616; + --color-neutral-icon-on-primary: #161616; + --color-neutral-background: #020202; + --color-neutral-background-muted: #0f0f0f; + --color-neutral-background-subtle: #1d1d1d; + --color-neutral-background-white: #f3f3f3; + --color-neutral-card-background: #0f0f0f; + --color-neutral-border: #2a2a2a; + --color-neutral-separator-subtle: #161616; + --color-neutral-hover: #313131; + --color-neutral-disabled: #383838; + --color-neutral-overflow: #2a2a2a; + --color-neutral-icon: #d8d8d8; + --color-neutral-icon-subtle: #6d6d6d; + --color-neutral-icon-disabled: #454545; + --color-neutral-field-border: #454545; + --color-neutral-action-secondary: #2a2a2a; + --color-neutral-action-secondary-hover: #454545; + --color-neutral-action-secondary-active: #454545; + --color-neutral-chip-background: #606060; + --color-neutral-chip-background-hover: #7b7b7b; + --color-neutral-chip-background-active: #959595; + --color-neutral-chip-background-disabled: #959595; + --color-neutral-large-tooltip-background: #2a2a2a; + --color-neutral-large-tooltip-border: #383838; + --color-neutral-small-tooltip-background: #2a2a2a; + --color-neutral-small-tooltip-border: #383838; + --color-neutral-overlay: #101114; + --color-neutral-field-background: #0f0f0f; + --color-neutral-text-placeholder: #7b7b7b; --color-primary-text: #6f9dff; --color-primary-text-interactive: #6f9dff; --color-primary-icon: #3970d7; diff --git a/src/components/Cards.module.css b/src/components/Cards.module.css index 312601b9e5..563788aea2 100644 --- a/src/components/Cards.module.css +++ b/src/components/Cards.module.css @@ -8,7 +8,7 @@ } html[data-theme='dark'] .card-hoverable:hover { - background-color: rgb(30, 40, 59); + background-color: var(--color-neutral-hover); } .card-image-container { From 1b7dd842eec8fb3e5344ab6bb0c8333213f28f21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Richard=20Biro=C5=A1?= Date: Wed, 1 Jul 2026 11:35:10 +0200 Subject: [PATCH 02/10] feat: replace GitHubButton with custom GitButton component for improved dark mode support --- package.json | 1 - src/components/GitButton.tsx | 37 ++++++++++-- .../OpenSourceCards/OpenSourceCards.tsx | 60 +++++-------------- src/components/SdkSection/SdkSection.tsx | 16 ++--- 4 files changed, 53 insertions(+), 61 deletions(-) diff --git a/package.json b/package.json index e1f1feb8eb..db553879c4 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/components/GitButton.tsx b/src/components/GitButton.tsx index dc83c1897b..756040b6c5 100644 --- a/src/components/GitButton.tsx +++ b/src/components/GitButton.tsx @@ -1,9 +1,36 @@ +import BrowserOnly from '@docusaurus/BrowserOnly'; import { useColorMode } from '@docusaurus/theme-common'; -import type { GitHubButtonProps } from 'github-buttons'; -import type { PropsWithChildren } from 'react'; -import GitHubButton from 'react-github-btn'; -export default function GitButton(props: PropsWithChildren) { +interface GitButtonProps { + href: string; + ariaLabel: string; +} + +function GitButtonInner({ href, ariaLabel }: GitButtonProps) { const { colorMode } = useColorMode(); - return ; + const src = `https://buttons.github.io/buttons.html#${new URLSearchParams({ + href, + 'data-icon': 'octicon-mark-github', + 'data-text': 'Star', + 'data-size': 'large', + 'data-show-count': 'true', + 'data-color-scheme': colorMode, + 'aria-label': ariaLabel, + }).toString()}`; + + return ( +