Add dark mode support by Abhinandankaushik · Pull Request #148 · apache/datafusion-site

Abhinandankaushik · 2026-02-05T14:38:39Z

Added dark mode support and toggle button for changing the mode (eg. ligh,dark)
also improve readability by adding some extra line of CSS

closes : feat: Dark Mode support on blog website #146

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…n-site

…ankaushik/datafusion-site into feat/dark-mode-support

Copilot

Pull request overview

This pull request implements dark mode support for the Apache DataFusion blog website, addresses multiple spelling errors across historical blog posts, and introduces automated spell checking via a new GitHub Actions workflow.

Changes:

Implements a comprehensive dark mode feature with toggle button, CSS variables, and localStorage persistence
Corrects 9 spelling errors across 7 blog posts (retrieve, libraries, performance, Aggregate, initialization, threshold, publicly, including, MemoryManager)
Adds automated typo checking workflow using the typos tool to prevent future spelling errors

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
content/theme/templates/styles.html	Adds references to dark mode CSS and JavaScript files
content/theme/templates/menu.html	Adds theme toggle button to navigation bar with accessibility attributes
content/js/darkmode.js	Implements dark mode toggle functionality with localStorage persistence and system preference detection
content/css/darkmode.css	Provides comprehensive dark mode styling with GitHub-inspired color palette and responsive design
content/blog/*.md (7 files)	Corrects spelling errors in blog posts
_typos.toml	Configures typo checker with custom dictionary and ignore patterns
.github/workflows/typo-check.yml	Adds GitHub Actions workflow for automated spell checking on blog posts

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

content/js/darkmode.js

content/theme/templates/menu.html

content/css/darkmode.css

content/js/darkmode.js

_typos.toml

content/js/darkmode.js

_typos.toml

Jefffrey · 2026-02-06T02:02:56Z

Could you rebase the branch to remove the typo changes, and attach some screenshots of this working locally?

Might need a bit of a workaround to fix local testing: Unpin infra repo commit hash in Makefile #144

Abhinandankaushik · 2026-02-06T09:03:00Z

hey @Jefffrey
as you instructed i have fix the merge conflict and here is the new feature screenshots

light-mode:

after-dark-mode:

i try to make website look little good if this changes are not suitable i will change it as it's original design

Jefffrey · 2026-02-06T09:10:12Z

I think the CSS theme is changing too much between dark/light mode here; can we keep the changes related to colour only and not introduce changes like the boxes around each post?

Abhinandankaushik · 2026-02-06T09:12:42Z

I think the CSS theme is changing too much between dark/light mode here; can we keep the changes related to colour only and not introduce changes like the boxes around each post?

yeah sure i will do that

…nkaushik/datafusion-site into feat/dark-mode-support

Abhinandankaushik · 2026-02-06T10:52:39Z

hey @Jefffrey
here is the fixed screenshot of the website :
Light-Mode :

Dark-Mode :

if this is okay i will push this changes ?

Abhinandankaushik · 2026-02-06T20:07:29Z

hey @Jefffrey
please review it when you get time
and let me know if any further changes are required or not
Thank's

Jefffrey · 2026-02-09T06:58:10Z

Some of the example boxes have hard to read text in dark mode:

See the dark red text, doesn't really work well with the dark background

Also I'm seeing some odd behaviour where some sizes change between the themes:

Screen.Recording.2026-02-09.at.15.55.48.mov

See CASE

And also hovering over images brightens them:

Screen.Recording.2026-02-09.at.15.56.08.mov

Abhinandankaushik · 2026-02-09T07:18:11Z

Thankyou for your feedback i will surely fixed all this bugs and update you.

Abhinandankaushik · 2026-02-09T19:55:14Z

hey @Jefffrey
i have made some changes from you feedback and here are the demo video of that changes :

Video.Project.5.mp4

Please review it when you get time and let me know if any further improvement are required or not .
Thank's

Abhinandankaushik · 2026-02-17T06:51:58Z

hey @Jefffrey can you please review this one
i create it around one week ago and it still in pending
i understand that your are busy but please if you can take a little time from you schedule to review it would be great .
Thankyou!

Jefffrey · 2026-02-18T13:37:10Z

Apologies, I have a large backlog to work through at the moment so it'll be a while before I'm able to take a look at this again

Abhinandankaushik · 2026-02-23T15:20:19Z

hey @Jefffrey just quick followup when you get free please review this pr i am waiting for your response ,
Thankyou

Abhinandankaushik · 2026-03-05T14:05:33Z

hey @Jefffrey i understand that you are busy with your work and if you get time please take a review on my pr please,
Thankyou

Abhinandankaushik · 2026-03-12T06:26:37Z

hey @Jefffrey i have open this pr a month before and it's still not reviewed please if you have a time to review this pr then please do that , i am not complaining i understand that you are busy with lots of work but please can you address this as well Thankyou

kevinjqliu · 2026-03-13T18:52:55Z

Hey @Abhinandankaushik i tested this out locally. I found a few issues, attached screenshots below.

In dark mode, the button is a gear, should be a sun

In dark mode, code blocks are still light:

I asked claude to fix the issues. heres the fix, 25a6bd5
feel free to cherrypick it

alamb

Looks good to me -- thank you @Abhinandankaushik 🙏

I tried it out locally and they both seem to work quite well

_typos.toml

alamb · 2026-03-13T20:41:34Z

In dark mode, the button is a gear, should be a sun

I think I interpreted it t be a dark sun 🤔 😆

* simplify dark mode script flow while keeping persisted theme behavior * add accessible toggle state with aria-pressed * switch toggle icons to stable sun/moon glyphs to avoid icon fallback issues * reduce dark mode CSS to MVP essentials and remove non-essential overrides * keep code block readability in dark mode with explicit highlight styles

kevinjqliu

LGTM

heres a side by side comparison

content/js/dark-mode.js

Co-authored-by: Kevin Liu <kevinjqliu@users.noreply.github.com>

Abhinandankaushik · 2026-03-14T07:06:59Z

Hey @kevinjqliu Thank's for figuring out this issues

kevinjqliu · 2026-03-14T18:58:12Z

np! thanks for adding this feature 😄

@alamb we fixed the dark sun, please take another look when you get a chance

alamb · 2026-03-16T11:04:45Z

Looks good!

alamb · 2026-03-16T11:05:39Z

Thanks again @Abhinandankaushik and @kevinjqliu

alamb · 2026-03-16T11:46:18Z

It's live on https://datafusion.apache.org/blog/!

Abhinandankaushik and others added 13 commits February 4, 2026 17:20

fixed:about

f6e88b9

Update content/theme/templates/menu.html

e104587

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge remote-tracking branch 'upstream/main'

89aaef9

Merge branch 'main' of https://github.com/Abhinandankaushik/datafusio…

ec241e7

…n-site

added spell check action

1b2cfa6

added spell check github-action

5125719

fixed blog-typos and added flase-positive in the list

e6995c0

typo lower-case issue fixed

2b3c715

added dark-mode support

de5426c

fix blog-typos and added false-positive into the list

5fac75f

typos fix-attempt-1

fa6c303

Merge branch 'ci/add-typos-spellcheck' of https://github.com/Abhinand…

092883b

…ankaushik/datafusion-site into feat/dark-mode-support

addec dark-mode

e8b8781

Copilot AI review requested due to automatic review settings February 5, 2026 14:38

Copilot started reviewing on behalf of Abhinandankaushik February 5, 2026 14:41 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

Merge branch 'main' into feat/dark-mode-support

d7d9801

Abhinandankaushik added 2 commits February 6, 2026 16:15

removed extra box-style and added simple dark-mode feature

1f773c7

Merge branch 'feat/dark-mode-support' of https://github.com/Abhinanda…

a7c36a1

…nkaushik/datafusion-site into feat/dark-mode-support

This was referenced Feb 7, 2026

Unpin infra repo commit hash in Makefile #144

Closed

fixed makefile which pinned old issue #149

Merged

fixed all dark-mode issues

8160f80

Abhinandankaushik added 2 commits February 10, 2026 01:08

finalyze dark-mode properties

b9a5be3

Merge remote-tracking branch 'upstream/main' into feat/dark-mode-support

9737883

Abhinandankaushik mentioned this pull request Feb 11, 2026

feat: Dark Mode support on blog website #146

Closed

alamb changed the title ~~Feat/dark mode support~~ Add dark mode support Mar 13, 2026

alamb approved these changes Mar 13, 2026

View reviewed changes

_typos.toml Show resolved Hide resolved

kevinjqliu approved these changes Mar 14, 2026

View reviewed changes

content/js/dark-mode.js Outdated Show resolved Hide resolved

content/js/dark-mode.js Outdated Show resolved Hide resolved

Abhinandankaushik and others added 2 commits March 14, 2026 12:34

Update content/js/dark-mode.js

c243a6b

Co-authored-by: Kevin Liu <kevinjqliu@users.noreply.github.com>

Update content/js/dark-mode.js

9d7630f

Co-authored-by: Kevin Liu <kevinjqliu@users.noreply.github.com>

alamb merged commit 8c89c73 into apache:main Mar 16, 2026
4 checks passed

Conversation

Abhinandankaushik commented Feb 5, 2026 • edited by alamb Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

Uh oh!

Jefffrey commented Feb 6, 2026

Uh oh!

Abhinandankaushik commented Feb 6, 2026

Uh oh!

Jefffrey commented Feb 6, 2026

Uh oh!

Abhinandankaushik commented Feb 6, 2026

Uh oh!

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

Uh oh!

Uh oh!

Abhinandankaushik commented Feb 6, 2026

Uh oh!

Jefffrey commented Feb 9, 2026

Uh oh!

Abhinandankaushik commented Feb 9, 2026

Uh oh!

Abhinandankaushik commented Feb 9, 2026

Uh oh!

Abhinandankaushik commented Feb 17, 2026

Uh oh!

Jefffrey commented Feb 18, 2026

Uh oh!

Abhinandankaushik commented Feb 23, 2026

Uh oh!

Abhinandankaushik commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Abhinandankaushik commented Mar 12, 2026

Uh oh!

kevinjqliu commented Mar 13, 2026

Uh oh!

alamb left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alamb commented Mar 13, 2026

Uh oh!

kevinjqliu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Abhinandankaushik commented Mar 14, 2026

Uh oh!

kevinjqliu commented Mar 14, 2026

Uh oh!

alamb commented Mar 16, 2026

Uh oh!

Uh oh!

alamb commented Mar 16, 2026

Uh oh!

alamb commented Mar 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Abhinandankaushik commented Feb 5, 2026 •

edited by alamb

Loading

Abhinandankaushik commented Feb 6, 2026 •

edited

Loading

Abhinandankaushik commented Mar 5, 2026 •

edited

Loading