docs: Dark mode homepage by cloud-walker · Pull Request #7063 · recharts/recharts

cloud-walker · 2026-02-27T07:27:19Z

Description

Review the homepage details to improve the dark mode

Related Issue

#6825

Motivation and Context

I'm splitting up the first attempt #6882

How Has This Been Tested?

Visual regression tests

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
I have added a storybook story or VR test, or extended an existing story or VR test to show my changes

Summary by CodeRabbit

New Features
- Introduced theme-aware GitHub button that dynamically adapts to the current color mode.
Style
- Transitioned from hardcoded colors to CSS variables across charts and UI elements for consistent theming.
- Updated button and hover styling for improved visual consistency.
- Enhanced chart interactive elements with theme-based styling.

coderabbitai · 2026-02-27T07:27:30Z

Walkthrough

This PR updates the website's styling and components to use CSS variables instead of hardcoded colors, replaces a static GitHub iframe with a theme-aware button component, reorganizes imports for consistency, and refactors export statements from aggregated to individual re-exports.

Changes

Cohort / File(s)	Summary
Test Configuration `test-vr/tests/www/IndexView.spec-vr.tsx`, `www/package.json`	Updated test imports from Playwright to local fixtures; added react-github-btn dependency.
CSS Variables & Styling `www/src/styles/_scaffolding.css`, `www/src/views/IndexView/IndexView.css`	Replaced hardcoded colors with CSS variable tokens; updated button link styling and hover states; adjusted block border rendering from first block to subsequent blocks.
Component Styling Updates `www/src/utils/SuccessIcon.tsx`, `www/src/views/IndexView/IndexLineChart.tsx`, `www/src/layouts/RechartsLogo.tsx`	Replaced hardcoded hex colors with CSS variables for chart strokes and lines; added activeDot styling to Recharts components using design tokens.
Layout & Theme Integration `www/src/layouts/Frame.tsx`, `www/src/views/IndexView/index.tsx`	Reorganized import order; replaced static GitHub iframe with ColorModeWatcher-wrapped GitHubButton component for theme awareness.
Export Refactoring `www/src/views/index.ts`	Changed from aggregated export statement to individual module re-exports; preserved all public entity names and aliases.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

docs: dark mode #6828 — Introduces ColorModeWatcher component and theme-aware components that are now utilized in the GitHub button integration.
Convert SCSS to CSS, a11y fixes #6566 — Website styling system updates with CSS variables and design tokens, overlapping on _scaffolding.css and related stylesheet changes.
Logo as SVG file #6573 — Updates RechartsLogo component with activeDot prop, directly modifying the same component file.

Suggested reviewers

ckifer
PavelVanecek

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs: Dark mode homepage' accurately reflects the main objective of the PR, which focuses on improving dark mode styling for the homepage with CSS variable updates and theme adjustments.
Description check	✅ Passed	The description covers all required sections with adequate detail: it describes the changes (dark mode improvements), links to related issue `#6825`, explains the motivation (splitting from `#6882`), documents testing via visual regression tests, includes a screenshot, and indicates documentation was updated.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-02-27T07:42:15Z

Codecov Report

❌ Patch coverage is 97.95918% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 90.21%. Comparing base (d6ab58e) to head (1242ede).
⚠️ Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
www/src/utils/SuccessIcon.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7063   +/-   ##
=======================================
  Coverage   90.20%   90.21%           
=======================================
  Files         526      526           
  Lines       39648    39676   +28     
  Branches     5440     5441    +1     
=======================================
+ Hits        35766    35794   +28     
  Misses       3873     3873           
  Partials        9        9

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

codecov · 2026-02-27T07:45:12Z

Bundle Report

Bundle size has no change ✅

…er contrast

…k mode support

…troke color for consistency style: adjust IndexView block border styling for better layout control

coderabbitai

🧹 Nitpick comments (1)

www/src/views/IndexView/IndexLineChart.tsx (1)

52-73: Optional: extract shared dot styling to avoid duplication.

Both lines repeat identical dot/activeDot objects. A shared constant would reduce drift risk when tweaking styles later.

♻️ Suggested refactor

 export default function IndexLineChart() {
+  const dotStyle = {
+    fill: 'var(--color-surface-base)',
+  };
+  const activeDotStyle = {
+    stroke: 'var(--color-surface-base)',
+  };
+
   return (
     <LineChart style={{ width: '100%', aspectRatio: 1.618, maxWidth: 800, margin: 'auto' }} responsive data={data}>
       <CartesianGrid stroke="var(--color-border-3)" strokeDasharray="5 5" />
       <XAxis dataKey="name" stroke="var(--color-text-3)" />
       <YAxis width="auto" stroke="var(--color-text-3)" />
       <Line
         type="monotone"
         dataKey="uv"
         stroke="var(--color-chart-1)"
-        dot={{
-          fill: 'var(--color-surface-base)',
-        }}
-        activeDot={{
-          stroke: 'var(--color-surface-base)',
-        }}
+        dot={dotStyle}
+        activeDot={activeDotStyle}
       />
       <Line
         type="monotone"
         dataKey="pv"
         stroke="var(--color-chart-2)"
-        dot={{
-          fill: 'var(--color-surface-base)',
-        }}
-        activeDot={{
-          stroke: 'var(--color-surface-base)',
-        }}
+        dot={dotStyle}
+        activeDot={activeDotStyle}
       />
       <RechartsDevtools />
     </LineChart>
   );
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@www/src/views/IndexView/IndexLineChart.tsx` around lines 52 - 73, The two
<Line> components (dataKey="uv" and dataKey="pv") duplicate the same dot and
activeDot style objects; extract a shared constant (e.g., const sharedDotStyle =
{ dot: { fill: 'var(--color-surface-base)' }, activeDot: { stroke:
'var(--color-surface-base)' } }) and replace the inline dot/activeDot props on
the Line components with the shared constant (or spread it into each <Line>) so
both lines reference the same style object and avoid drift.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@www/src/views/IndexView/IndexLineChart.tsx`:
- Around line 52-73: The two <Line> components (dataKey="uv" and dataKey="pv")
duplicate the same dot and activeDot style objects; extract a shared constant
(e.g., const sharedDotStyle = { dot: { fill: 'var(--color-surface-base)' },
activeDot: { stroke: 'var(--color-surface-base)' } }) and replace the inline
dot/activeDot props on the Line components with the shared constant (or spread
it into each <Line>) so both lines reference the same style object and avoid
drift.

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d6ab58e and 1242ede.

⛔ Files ignored due to path filters (4)

package-lock.json is excluded by !**/package-lock.json
test-vr/__snapshots__/tests/www/IndexView.spec-vr.tsx-snapshots/Index-Line-Chart-1-chromium-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/IndexView.spec-vr.tsx-snapshots/Index-Line-Chart-1-firefox-linux.png is excluded by !**/*.png
test-vr/__snapshots__/tests/www/IndexView.spec-vr.tsx-snapshots/Index-Line-Chart-1-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (10)

test-vr/tests/www/IndexView.spec-vr.tsx
www/package.json
www/src/layouts/Frame.tsx
www/src/layouts/RechartsLogo.tsx
www/src/styles/_scaffolding.css
www/src/utils/SuccessIcon.tsx
www/src/views/IndexView/IndexLineChart.tsx
www/src/views/IndexView/IndexView.css
www/src/views/IndexView/index.tsx
www/src/views/index.ts

PavelVanecek

I'm still hoping for the native theme switcher so that we don't have to modify hundreds of example files

cloud-walker added 7 commits February 27, 2026 19:01

style: update button hover background color to use color-mix for bett…

cce06db

…er contrast

style: reorder exports for improved readability

dcf1b2a

style: update chart colors and button hover background for better dar…

734330e

…k mode support

feat: add GitHub star button using react-github-btn in IndexView

234d5f6

style: reorganize imports in Frame component and update SuccessIcon s…

c2227ab

…troke color for consistency style: adjust IndexView block border styling for better layout control

style: remove border-top from block for improved layout consistency

be9dbb5

fix: update import statement in IndexView.spec-vr.tsx for consistency

1242ede

cloud-walker force-pushed the dark-mode-home branch from d5e46e3 to 1242ede Compare February 27, 2026 18:03

cloud-walker marked this pull request as ready for review February 27, 2026 18:03

coderabbitai bot reviewed Feb 27, 2026

View reviewed changes

PavelVanecek approved these changes Mar 2, 2026

View reviewed changes

PavelVanecek merged commit 6ebdad8 into recharts:main Mar 2, 2026
42 checks passed

cloud-walker deleted the dark-mode-home branch March 2, 2026 21:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: Dark mode homepage#7063

docs: Dark mode homepage#7063
PavelVanecek merged 7 commits intorecharts:mainfrom
cloud-walker:dark-mode-home

cloud-walker commented Feb 27, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 27, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 27, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 27, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

PavelVanecek left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

cloud-walker commented Feb 27, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

codecov bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Feb 27, 2026

Bundle Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

PavelVanecek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloud-walker commented Feb 27, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 27, 2026 •

edited

Loading

codecov bot commented Feb 27, 2026 •

edited

Loading