🌙 Dark Mode Feature Demo

How to Use Dark Mode:

Click the toggle button in the top-right corner (🌙/☀️)
Keyboard shortcut: Press Ctrl+Shift+D (or Cmd+Shift+D on Mac)
Auto-detection: Follows your system preference on first visit
Persistence: Your choice is saved and remembered

Features

✅ What's Included

Complete dark theme for all site elements
Smooth transitions between themes
System preference detection
Keyboard shortcuts
Mobile-responsive toggle button
Print-friendly (always light mode for printing)
Accessibility improvements

🎨 Theme Elements

Navigation bar and header
Floating navigation menu
All text and typography
Social media buttons
Publication sections
Code blocks and pre elements
Form elements
Scrollbars

Sample Content

Publication Example

Architectural Decay in Software Systems

Authors: Duc Minh Le, Nenad Medvidovic

Venue: IEEE International Conference on Software Architecture (ICSA 2021)

This paper presents a comprehensive study of architectural decay in long-lived software systems...

Code Example

function toggleTheme() {
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';
  applyTheme(newTheme);
}

// CSS Custom Properties
:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --text-primary: #e0e0e0;
}

Form Example

🎉 Dark Mode is Now Active!

The dark mode feature is fully implemented and ready to use. Try switching between themes to see the smooth transitions and consistent styling across all elements.