From 993c96ecc53b1653924fe23266fcfcfaa7c6a89d Mon Sep 17 00:00:00 2001
From: yush-1018 <light1ooo7710@gmail.com>
Date: Mon, 26 Jan 2026 22:13:27 +0530
Subject: [PATCH] Add night mode (dark mode) toggle feature - Resolves #82

---
 NIGHT_MODE_IMPLEMENTATION.md |  74 ++++++++++++++++
 includes/header.html         | 160 +++++++++++++++++++++++++++++++++++
 2 files changed, 234 insertions(+)
 create mode 100644 NIGHT_MODE_IMPLEMENTATION.md

diff --git a/NIGHT_MODE_IMPLEMENTATION.md b/NIGHT_MODE_IMPLEMENTATION.md
new file mode 100644
index 0000000..f04a2eb
--- /dev/null
+++ b/NIGHT_MODE_IMPLEMENTATION.md
@@ -0,0 +1,74 @@
+# Night Mode Implementation
+
+## Overview
+This document explains the night mode (dark mode) feature added to the Bioconductor Package Review Documentation website.
+
+## Implementation Details
+
+### Files Modified
+- `includes/header.html` - Added dark mode toggle button, CSS styles, and JavaScript functionality
+
+### Features
+1. **Toggle Button**: A floating button in the bottom-right corner that allows users to switch between light and dark modes
+   - Moon icon (🌙) for light mode
+   - Sun icon (☀️) for dark mode
+   - Smooth hover animation
+
+2. **Persistent Theme**: User's theme preference is saved in browser's localStorage
+   - Theme persists across page reloads and navigation
+   - Automatically applies saved theme on page load
+
+3. **Dark Mode Styling**: Comprehensive dark theme covering:
+   - Background colors (dark gray/black)
+   - Text colors (light gray/white)
+   - Navigation sidebar
+   - Code blocks
+   - Tables
+   - Links and headings
+   - Header bar
+
+### Color Scheme
+**Light Mode** (Default):
+- Background: White
+- Text: #333E50
+- Primary: #6faef5
+- Headings: #5c677e
+
+**Dark Mode**:
+- Background: #1a1a1a
+- Text: #e0e0e0
+- Sidebar: #2d2d2d
+- Code blocks: #2d2d2d
+- Links: #6faef5
+- Headings: #87b13f
+
+### How It Works
+1. JavaScript creates a toggle button on page load
+2. Checks localStorage for saved theme preference
+3. Applies dark mode class to body if preference is 'dark'
+4. Button click toggles the 'dark-mode' class on body element
+5. CSS rules with `.dark-mode` selector override default styles
+6. Theme preference is saved to localStorage on each toggle
+
+### Browser Compatibility
+- Works in all modern browsers that support:
+  - localStorage API
+  - CSS3
+  - ES6 JavaScript
+  - Font Awesome icons (already included)
+
+### Testing
+To test the implementation:
+1. Build the bookdown site
+2. Open in a browser
+3. Click the toggle button in bottom-right corner
+4. Verify dark mode applies correctly
+5. Reload page to verify theme persists
+6. Navigate to different pages to ensure consistency
+
+## Future Enhancements
+Possible improvements:
+- System preference detection (prefers-color-scheme media query)
+- Keyboard shortcut for toggling
+- Smooth transition animations between themes
+- Additional color scheme options
diff --git a/includes/header.html b/includes/header.html
index 66bd201..1f32d91 100644
--- a/includes/header.html
+++ b/includes/header.html
@@ -5,4 +5,164 @@
   crossorigin="anonymous"
   referrerpolicy="no-referrer"
   />
+  
+  <style>
+    /* Dark mode toggle button */
+    .dark-mode-toggle {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 1000;
+      background: #6faef5;
+      border: none;
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 20px;
+    }
+    
+    .dark-mode-toggle:hover {
+      transform: scale(1.1);
+      box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+    }
+    
+    /* Dark mode styles */
+    body.dark-mode {
+      background-color: #1a1a1a;
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .book .book-body .page-wrapper .page-inner section.normal {
+      background-color: #1a1a1a;
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .book .book-summary {
+      background-color: #2d2d2d;
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .book .book-summary ul.summary li a {
+      color: #b0b0b0;
+    }
+    
+    body.dark-mode .book .book-summary ul.summary li.active > a {
+      color: #6faef5;
+    }
+    
+    body.dark-mode .book .book-summary ul.summary li > a:hover {
+      color: #6faef5;
+    }
+    
+    body.dark-mode .book .book-body .page-wrapper .page-inner section.normal a {
+      color: #6faef5;
+    }
+    
+    body.dark-mode h1, 
+    body.dark-mode h2, 
+    body.dark-mode h3, 
+    body.dark-mode h4, 
+    body.dark-mode h5, 
+    body.dark-mode h6 {
+      color: #87b13f;
+    }
+    
+    body.dark-mode .book .book-body .page-wrapper .page-inner section.normal code {
+      background: #2d2d2d;
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .book .book-body .page-wrapper .page-inner section.normal pre {
+      background: #2d2d2d;
+      border: 1px solid #404040;
+    }
+    
+    body.dark-mode div.book-header.fixed[style] {
+      background-color: #2d2d2d !important;
+    }
+    
+    body.dark-mode .book .book-header h1 a, 
+    body.dark-mode .book .book-header h1 a:hover {
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .book .book-header .btn {
+      color: #b0b0b0;
+    }
+    
+    body.dark-mode .book .book-header .btn:hover {
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode .summaryblock {
+      background-color: #2d2d2d;
+      color: #e0e0e0;
+      border-color: #6faef5;
+    }
+    
+    body.dark-mode .part > span {
+      color: #b0b0b0;
+    }
+    
+    body.dark-mode p.caption {
+      color: #b0b0b0;
+    }
+    
+    body.dark-mode table {
+      background-color: #2d2d2d;
+      color: #e0e0e0;
+    }
+    
+    body.dark-mode table thead {
+      background-color: #404040;
+    }
+    
+    body.dark-mode table tr:nth-child(even) {
+      background-color: #252525;
+    }
+    
+    body.dark-mode .dark-mode-toggle {
+      background: #404040;
+    }
+  </style>
+  
+  <script>
+    // Dark mode toggle functionality
+    document.addEventListener('DOMContentLoaded', function() {
+      // Create toggle button
+      const toggleButton = document.createElement('button');
+      toggleButton.className = 'dark-mode-toggle';
+      toggleButton.setAttribute('aria-label', 'Toggle dark mode');
+      toggleButton.innerHTML = '<i class="fas fa-moon"></i>';
+      document.body.appendChild(toggleButton);
+      
+      // Check for saved theme preference or default to light mode
+      const currentTheme = localStorage.getItem('theme') || 'light';
+      if (currentTheme === 'dark') {
+        document.body.classList.add('dark-mode');
+        toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+      }
+      
+      // Toggle theme on button click
+      toggleButton.addEventListener('click', function() {
+        document.body.classList.toggle('dark-mode');
+        
+        // Update icon and save preference
+        if (document.body.classList.contains('dark-mode')) {
+          toggleButton.innerHTML = '<i class="fas fa-sun"></i>';
+          localStorage.setItem('theme', 'dark');
+        } else {
+          toggleButton.innerHTML = '<i class="fas fa-moon"></i>';
+          localStorage.setItem('theme', 'light');
+        }
+      });
+    });
+  </script>
 </head>