Skip to content

Conversation

@HRmemon
Copy link

@HRmemon HRmemon commented Jul 22, 2025

Fixes #82

Summary

This PR implements dark mode support as requested in #82. It adds a toggle in the header that allows users to switch between light and dark themes.

Features

  • 🌓 Dark mode toggle checkbox in the header (next to "Sync scroll")
  • 💾 Theme preference saved to localStorage
  • 🎨 CSS variables for easy theme customization
  • 📝 Full markdown rendering support in dark mode
  • 🖥️ Monaco Editor theme switching (vs ↔ vs-dark)

Implementation Details

  • Converted hardcoded colors to CSS variables for maintainability
  • Dark theme uses #212121 background and #E8E8E8 text for optimal readability
  • Integrated GitHub markdown CSS (both light and dark variants)
  • Theme preference persists across page reloads using existing localStorage infrastructure
  • Minimal changes to existing codebase structure

Visual Changes

  • Light mode remains unchanged (default)
  • Dark mode provides sufficient contrast as requested
  • All markdown elements (tables, code blocks, blockquotes, etc.) properly styled

Testing

  • Toggle between light/dark modes
  • Theme preference persists after page reload
  • All markdown elements render correctly in both themes
  • Table borders and styling work in dark mode
  • Code blocks display with appropriate syntax highlighting
  • Tested on Chrome, Firefox, and Safari

This addresses all the requirements mentioned in the issue:

  • ✅ Toggle to switch between light and dark themes
  • ✅ Sufficient contrast for readability
  • ✅ Accommodates users who prefer dark mode
  • ✅ Helps evaluate how content appears in different themes

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.

Feature Request: Add Support for Light and Dark Mode Themes

2 participants