Implemented dark mode in harbor website

[mythicalyash]

Here’s a clean, professional, ready-to-paste Pull Request description formatted the way maintainers expect on GitHub/GitLab:

---

✨ Add Comprehensive Dark Mode Support to Harbor Website

Summary

This PR introduces full dark mode support to the Harbor website, including a user-controlled theme toggle, automatic system preference detection, persistent theme selection, and flash-of-unstyled-content (FOUC) prevention. The implementation is accessible, performant, and visually consistent with the existing design system.

---

🚀 Changes Made

➕ New Files

• assets/sass/dark-mode.sass
  Complete dark mode styling using CSS custom properties.

• layouts/partials/theme-toggle.html
  Alpine.js–powered theme toggle component with accessibility support.

---

✏️ Modified Files

• layouts/_default/baseof.html

  • Added inline script to prevent FOUC
  • Integrated theme toggle into the navbar
  • Added Alpine.js dependency

• layouts/partials/navbar.html

  • Integrated theme toggle button into the navbar

• assets/sass/style.sass

  • Imported dark mode styles

---

✅ Features Implemented

Theme Toggle Button

• Sun / moon icon toggle in navbar
• Smooth transitions between light and dark themes
• Accessible with proper ARIA labels

System Preference Detection

• Automatically detects prefers-color-scheme on first visit
• Respects OS-level theme preference

Persistent Theme Selection

• Stores user preference in localStorage
• Maintains selection across sessions and page navigation

FOUC Prevention

• Inline script applies theme before initial render
• No flash of incorrect theme on page load

Comprehensive Dark Mode Styling

• Fully styled components:

  • Navbar, footer, cards
  • Tables, code blocks
  • Buttons, links, forms

• Proper contrast and visual hierarchy

• White text on colored buttons for readability

---

🎨 Visual Overview

Light Mode (unchanged)

• Clean white backgrounds
• Blue accents and borders

Dark Mode (new)

• Dark gray background (#1a1a1a)
• Pure black sections (#000000) for contrast
• Light body text (#e0e0e0) with white headings
• Blue accents preserved for brand consistency
• Optimized contrast ratios for accessibility

---

🧪 Testing Performed

• ✅ Theme toggle works across all pages
• ✅ System preference detected on first visit
• ✅ Theme persists across sessions
• ✅ FOUC prevention verified
• ✅ Visual inspection of all major components
• ✅ WCAG-compliant color contrast checks
• ✅ Responsive behavior in both themes

---

🌐 Browser Compatibility

• Tested on modern browsers supporting CSS custom properties
• Graceful fallback to light mode on older browsers

---

♿ Accessibility

• ARIA labels on theme toggle button
• WCAG AA color contrast compliance
• Fully keyboard accessible toggle

---

Images for reference