sedona icon indicating copy to clipboard operation
sedona copied to clipboard

feat: Add dark/light theme toggle to documentation website

Open Subham-KRLX opened this issue 2 months ago • 8 comments

Implements Material theme palette toggle with three modes:

Automatic mode (follows system preference) Light mode (default scheme) Dark mode (slate scheme) Users can now toggle between themes using the icon in the header. All modes preserve the existing deep orange primary and green accent colors.

Closes #2444

Subham-KRLX avatar Nov 09 '25 06:11 Subham-KRLX

can you show screenshots of both modes?

jiayuasu avatar Nov 09 '25 06:11 jiayuasu

Screenshot 2025-11-09 at 12 15 09 PM Screenshot 2025-11-09 at 12 14 55 PM

Subham-KRLX avatar Nov 09 '25 06:11 Subham-KRLX

Wonder why it's showing the old website (before the remodel). The branch is branched off recently, so it should have the commits. Maybe there's an extra step you need to take to apply the fancy formatting?

Here's what the current website looks like: https://sedona.apache.org/latest/

image

petern48 avatar Nov 09 '25 07:11 petern48

Anyways, this part of the screenshot doesn't look right (e.g "Apache Sedona" is shown twice). I'm not sure why it looks like that looking at your changes 🤔

image

petern48 avatar Nov 09 '25 07:11 petern48

Thanks for reviewing @petern48!

I'm not sure why the screenshot is showing the old website design or the duplicate "Apache Sedona" text. My changes only modified the theme.palette section in mkdocs.yml to add the light/dark/auto mode toggle - I didn't touch any template files or other styling. When I tested locally with uv run mkdocs serve, the site rendered correctly with the current design and the theme toggle working as expected in the header. Could this be a caching issue or something with how the preview is being generated? The duplicate title seems odd since I only added palette configuration, not any HTML/template changes.

Subham-KRLX avatar Nov 09 '25 07:11 Subham-KRLX

I agree the behavior is odd. Regardless of your good intentions, we need to make sure this change only does what we want it to do any not modify things unintentionally. To check, you should build the docs on main (ie. without your changes) and compare it to the display of the docs after you apply these changes. Post screenshots here.

When I tested locally with uv run mkdocs serve, the site rendered correctly with the current design and the theme toggle working as expected in the header. Could this be a caching issue or something with how the preview is being generated?

This is your screenshot. If it really did render correctly, why don't you attach a screenshot of that? If that's the case, what was the screenshot you sent earlier than?

petern48 avatar Nov 09 '25 16:11 petern48

@petern48 I verified the layout issues you mentioned
Screenshot 2025-11-10 at 11 01 33 AM they’re not caused by my changes. Master branch: Layout issues present no theme toggle My branch: Same layout issues, but theme toggle works perfectly I only modified the palette section in mkdocs.yml (no template or layout changes). The issues appear to come from the local mkdocs serve setup, not this PR. Attaching screenshots for reference. The theme toggle correctly switches between light, dark, and auto modes. Uploading Screenshot 2025-11-10 at 10.49.28 AM.png…

Subham-KRLX avatar Nov 10 '25 05:11 Subham-KRLX

Hi @jbampton! Here are the commands I used to build and preview the website locally:

Setup and Build bash

1. Checkout the branch

git checkout theme-toggle-final

2. Install dependencies (as per Sedona docs)

python3 -m pip install --upgrade uv uv sync --group docs

3. Build and serve the website

uv run mkdocs build uv run mkdocs serve The site runs at http://127.0.0.1:8000/ with the theme toggle working correctly in the header.

Changes Only mkdocs.yml was modified (27 lines added to enable theme toggle):

bash git diff master...theme-toggle-final --name-only

Output: mkdocs.yml

Replication Steps To replicate from scratch:

bash git clone https://github.com/apache/sedona.git cd sedona git remote add subham https://github.com/Subham-KRLX/sedona.git git fetch subham git checkout subham/theme-toggle-final python3 -m pip install --upgrade uv uv sync --group docs uv run mkdocs serve iam okay to provide screenshots if needed.

Subham-KRLX avatar Dec 14 '25 03:12 Subham-KRLX