Skip to content

Add Theme Toggling with Ant Design CSS and LocalStorage Persistence - #14

Open
smdbs01 wants to merge 2 commits into
AlphaOSU:masterfrom
smdbs01:feat/dark-mode-toggle
Open

Add Theme Toggling with Ant Design CSS and LocalStorage Persistence#14
smdbs01 wants to merge 2 commits into
AlphaOSU:masterfrom
smdbs01:feat/dark-mode-toggle

Conversation

@smdbs01

@smdbs01 smdbs01 commented Nov 24, 2024

Copy link
Copy Markdown

What's Done

Serve both light and dark Ant Design CSS files from the public folder. Implement theme toggling using JoseRFelix/react-css-theme-switcher, with user preferences stored in localStorage for basic persistence.

This PR fixes issue #6.

Noteworthy Changes

  1. Dependency Updates in package.json:
    • Updated antd: The original lock file indicated version 4.24.1 was installed, suggesting that the ^5.17.0 specifier was an unintended change.
    • Adjusted @types/styled-components: Restricted to <=5.1.32 as versions 5.1.33+ introduced breaking changes (see StackOverflow).

Future Improvements

  1. Dark Mode Support for Custom Components:
    • Added a dark class to the html tag when Dark Mode is preferred. Non-Ant Design components can now adopt the dark theme using CSS variables by defining values in :root and :root.dark.
  2. SVG Refactor:
    • The sun and moon SVGs should be moved to a separate directory for better organization and reusability.

@smdbs01
smdbs01 marked this pull request as ready for review November 24, 2024 07:41
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.

1 participant