Description:

Many users prefer dark or low-contrast themes for readability and eye comfort, especially in dark environments. Currently, scratchpad-scribe uses a default light theme. Adding a dark mode (or multiple themes) and letting users toggle will enhance usability and accessibility.

Feature Details / Scope:

• Add a toggle (e.g. a button or switch) in the UI to switch between light and dark themes.
• Use CSS variables / Tailwind theming to define colors for both modes.
• Persist the user’s preference (e.g. using localStorage or IndexedDB), so the choice remains on page load.
• (Optional / bonus) Allow automatic theme based on system preferences (via prefers-color-scheme media query).
• Ensure all components (text, backgrounds, borders, icons) look correct & maintain readability in both modes.
• Update unit / visual tests as needed (if tests exist).
• Update documentation / README to mention theme toggle feature.

Acceptance Criteria:

• The UI displays a toggle (e.g. switch) that allows switching between light and dark themes.
• Upon switching, the entire app’s color scheme updates seamlessly.
• The selected theme persists across page reloads / sessions.
• The default theme respects user’s system preference (if not overridden).
• No visual regressions: text remains readable, contrast ratios acceptable.
• Documentation updated to mention this new feature.

Suggested Implementation / Hints:

1. Leverage Tailwind CSS’s built-in theming or custom CSS variables.
2. Use localStorage.setItem('theme', ...) to persist preference.
3. Use window.matchMedia('(prefers-color-scheme: dark)') to detect default.
4. Enclose style toggling logic in a React context or hook so components can re-render on theme change.
5. Test in both dark and light modes (desktop + mobile).

Estimated Difficulty: 🟢 Low to Medium
This should be doable by contributors familiar with React + Tailwind + frontend theming.

Why this is beneficial:

Improves user experience in dark / low-light settings.

Modern apps are expected to support dark mode.

KEY NOTE - This issue if officially subjected to @Stonebanks-js and only assigned under the maintainers review

CC - @DhanushNehru