Skip to content

fix: improve theme toggle contrast - #318

Open
DarshanKudrigi wants to merge 1 commit into
OpenScienceLabs:mainfrom
DarshanKudrigi:fix/issue-315-theme-toggle
Open

DarshanKudrigi wants to merge 1 commit into
OpenScienceLabs:mainfrom
DarshanKudrigi:fix/issue-315-theme-toggle

Conversation

@DarshanKudrigi

Copy link
Copy Markdown

Summary

Fixes #315 by improving the visibility and contrast of the footer theme toggle in both light and dark modes.

Changes Made

  • Improved the toggle track contrast using a white background and black border in light mode.
  • Updated the toggle thumb to use contrasting colours for better visibility.
  • Added a visible keyboard focus indicator using :focus-visible.
  • Preserved the existing theme-switching mechanism using data-mode="dim".
  • Added smooth transitions and vertical alignment for a more consistent appearance.
  • Removed the sun/moon pseudo-elements to keep the toggle design simple and clear.

Screenshots

Before

Screenshot 2026-10-21 135500
Screenshot 2026-10-21 135450

After

Screenshot 2026-10-21 135559
Screenshot 2026-10-21 135606

Testing

  • Verified toggle visibility in light mode.
  • Verified toggle visibility in dark mode.
  • Confirmed theme switching works correctly.
  • Checked keyboard focus visibility.
  • Confirmed no unrelated files were modified.

Scope

This change is limited to theme/css/footer.css.

@netlify

netlify Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for opensciencelabsweb failed.

Name Link
🔨 Latest commit 6f9fb0a
🔍 Latest deploy log https://app.netlify.com/projects/opensciencelabsweb/deploys/6ad8789364f88f33c34714b9

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Theme toggle has insufficient contrast in dark and light modes

1 participant