🌙 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...
Read More Download PDFCode 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.

