Skip to content

Conversation

@yush-1018
Copy link

This PR adds a night mode (dark mode) toggle feature to the documentation website, resolving issue #82.

Changes Made

  • Added a floating toggle button in the bottom-right corner
  • Implemented comprehensive dark mode styling for all page elements
  • Added localStorage support to persist user's theme preference
  • Included smooth animations and transitions
  • Created documentation file explaining the implementation

Features

✅ One-click toggle between light and dark modes
✅ Persistent theme preference (survives page reloads)
✅ Floating button with moon/sun icons
✅ Comprehensive dark styling for:

  • Background and text colors
  • Navigation sidebar
  • Code blocks and syntax highlighting
  • Tables, links, and headings
  • Header bar

Implementation Details

  • File Modified: includes/header.html
  • New File: NIGHT_MODE_IMPLEMENTATION.md (documentation)
  • Technology: Pure CSS + Vanilla JavaScript (no dependencies)
  • Browser Support: All modern browsers with localStorage support

Visual Design

  • Light Mode: Original theme maintained
  • Dark Mode:
    • Background: #1a1a1a
    • Text: #e0e0e0
    • Sidebar: #2d2d2d
    • Accent colors preserved from original theme

Testing

Tested functionality:

  • Toggle button appears and functions correctly
  • Dark mode applies to all page elements
  • Theme preference persists after page reload
  • Navigation between pages maintains theme
  • Icons change appropriately (moon ↔️ sun)
  • Hover animations work smoothly

Similar Implementation

This implementation follows the same pattern as popular documentation sites like Docker docs and GitHub docs.

Fixes #82

@yush-1018
Copy link
Author

Hi @kevinrue! 👋

I've implemented the night mode feature similar to Docker docs.

Features:
🌙 Floating toggle button (bottom-right corner)
💾 Persistent theme preference (localStorage)
🎨 Complete dark mode styling
✨ Smooth animations

How it works:

  • Moon icon → switch to dark mode
  • Sun icon → switch to light mode
  • Preference auto-saves and persists

Modified includes/header.html with pure CSS + vanilla JS (no dependencies).

Let me know if you need any changes! 🚀

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.

add night mode

1 participant