[Feature Request]: Add Dark Mode / Night Mode support #5
Description
Currently, the website only supports a light theme. Adding a Night Mode (Dark Mode) would improve the user experience, especially for users who prefer working in low-light environments or want to reduce eye strain.
I would like to implement a theme toggle that allows users to switch between Light and Dark modes.
Proposed Approach:
I plan to implement this using CSS Variables (Custom Properties) and a small JavaScript snippet to handle the state.
Here is the technical breakdown:
CSS Variables: * Define a set of variables for colors (e.g., --bg-color, --text-color, --card-bg, --link-color) inside :root.
Create a [data-theme='dark'] selector (or a .dark-mode class) that overrides these variables with darker hex codes.
Toggle Component: * Add a toggle switch or button (using a Sun/Moon icon) in the navigation bar or header.
Persistence: * Use localStorage to remember the user's theme preference so it persists across page reloads.
(Optional) Use window.matchMedia('(prefers-color-scheme: dark)') to detect the user's system preference on the first visit.
Implementation Steps:
Refactor current hard-coded colors in the CSS file to use the new variables.
Add the toggle UI element.
Add the JavaScript logic to toggle the attribute on the or tag.
I am happy to work on this! Please let me know if you have any specific design preferences or if there are specific UI frameworks I should be mindful of before I start.