Skip to main content
 

A senior software engineer with a PhD degree in Computer Science from USC. Blends research experience in Software Engineering field with diverse practical training in the software industries of Vietnam, S.Korea and U.S. to offer solid skills in software design and development. Experiences include:

  • system security, cryptography, identity & access control
  • mining software repositories,
  • architecture design, recovery, and analysis,
  • software product line engineering

 

🌙 Dark Mode Implementation

This document explains the dark mode feature implementation for your Jekyll academic website.

✨ Features

🎨 Complete Theme System

🖱️ User Interaction

🎯 Comprehensive Coverage

📁 Files Added/Modified

New Files:

Modified Files:

🎨 CSS Architecture

CSS Custom Properties (Variables)

:root {
  /* Light Mode Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f6f6f6;
  --text-primary: #333333;
  --accent-color: #337ab7;
  /* ... more variables */
}

[data-theme="dark"] {
  /* Dark Mode Colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #e0e0e0;
  --accent-color: #4a9eff;
  /* ... more variables */
}

Theme Application

⚙️ JavaScript Functionality

DarkModeToggle Class

class DarkModeToggle {
  constructor() {
    this.init();
  }
  
  init() {
    this.createToggleButton();
    this.initializeTheme();
    this.bindEvents();
    this.watchSystemTheme();
  }
  
  toggleTheme() {
    const newTheme = this.currentTheme === 'light' ? 'dark' : 'light';
    this.applyTheme(newTheme);
  }
}

Key Features:

🎮 How to Use

For Users:

  1. Click the toggle button (🌙/☀️) in the top-right corner
  2. Use keyboard shortcut Ctrl+Shift+D (or Cmd+Shift+D on Mac)
  3. System preference is automatically detected on first visit
  4. Theme persists across browser sessions

For Developers:

Programmatic Control:

// Get current theme
const currentTheme = window.darkModeToggle.getCurrentTheme();

// Set theme programmatically
window.darkModeToggle.setTheme('dark');

// Check if dark mode is active
const isDark = window.darkModeToggle.isDarkMode();

Adding New Dark Mode Styles:

/* Use CSS custom properties */
.my-component {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Dark mode specific styles */
[data-theme="dark"] .my-component {
  /* Override specific properties if needed */
}

🔧 Customization

Color Scheme:

Edit CSS variables in stylesheets/dark-mode.css:

:root {
  --bg-primary: #ffffff;      /* Light background */
  --text-primary: #333333;    /* Light text */
  --accent-color: #337ab7;    /* Light accent */
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;      /* Dark background */
  --text-primary: #e0e0e0;    /* Dark text */
  --accent-color: #4a9eff;    /* Dark accent */
}

Toggle Button Position:

.theme-toggle {
  position: fixed;
  top: 20px;        /* Distance from top */
  right: 20px;      /* Distance from right */
  z-index: 1000;    /* Layer order */
}

Transition Speed:

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

📱 Mobile Optimization

Responsive Design:

Mobile-Specific Styles:

@media (max-width: 768px) {
  .theme-toggle {
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
  }
}

♿ Accessibility Features

ARIA Support:

Keyboard Navigation:

🖨️ Print Optimization

@media print {
  [data-theme="dark"] {
    /* Force light mode for printing */
    --bg-primary: #ffffff;
    --text-primary: #333333;
  }
  
  .theme-toggle {
    display: none !important;
  }
}

🧪 Testing

Manual Testing:

  1. Visit the site and test toggle functionality
  2. Check theme persistence across page reloads
  3. Test keyboard shortcuts
  4. Verify mobile responsiveness
  5. Test system preference detection

Browser Compatibility:

Demo Page:

Visit /dark-mode-demo.html to see all features in action.

🚀 Performance

Optimizations:

Bundle Size:

🔮 Future Enhancements

Potential Additions:

🐛 Troubleshooting

Common Issues:

  1. Toggle button not visible:
    • Check if dark-mode.css is loaded
    • Verify JavaScript is executing
    • Check for CSS conflicts
  2. Theme not persisting:
    • Check browser’s localStorage support
    • Verify no privacy mode blocking storage
    • Check for JavaScript errors
  3. Styles not applying:
    • Verify CSS custom properties support
    • Check for CSS syntax errors
    • Ensure proper CSS specificity

Debug Steps:

  1. Open browser developer tools
  2. Check console for JavaScript errors
  3. Inspect <html> element for data-theme attribute
  4. Verify CSS custom properties are defined
  5. Test in different browsers

📊 Analytics Integration

Theme Usage Tracking:

// Track theme usage (example)
function trackThemeUsage(theme) {
  if (typeof gtag !== 'undefined') {
    gtag('event', 'theme_change', {
      'theme': theme,
      'page_title': document.title
    });
  }
}

🎉 Conclusion

The dark mode implementation provides a modern, accessible, and user-friendly theme switching experience. It enhances user experience while maintaining excellent performance and compatibility across all devices and browsers.

Key Benefits:

Note: This implementation follows modern web standards and best practices for theme switching, ensuring compatibility and maintainability for years to come.