Adding Darkmode functionality with animations and icons

[epcgrs]

This pull request introduces a site-wide dark mode theme toggle for improved accessibility and user experience, along with related styling updates. It adds a toggle button to the header, implements the logic for switching themes, and updates CSS to support both light and dark modes using CSS variables. Additionally, it improves color consistency across navigation and footer elements.

Dark mode feature and theme toggle:

• Added a theme toggle button to the site header (_includes/header.html) and included inline SVG icons for sun and moon in the document head (_includes/head.html). [1] [2]
• Implemented JavaScript logic in assets/js/script.js for toggling between dark and light themes, persisting user choice, and updating the theme icon accordingly.

Styling updates for theme support:

• Refactored global styles in assets/css/_global.scss to use CSS variables for background, text, and primary colors, supporting both dark and light modes via media queries and HTML classes.
• Updated navigation and footer link colors in assets/css/_header.scss and assets/css/_footer.scss to use the new CSS variables for better consistency across themes. [1] [2]
• Added styles for the new theme toggle button and icon animation in assets/css/_header.scss.

Other changes:

• Added the webrick gem to the Gemfile to ensure local development compatibility with Jekyll.

[Copilot]

Pull Request Overview

This PR implements a comprehensive dark mode feature for the Jekyll site with smooth animations and theme persistence. The implementation includes a toggle button in the header, automatic system preference detection, and consistent color theming across all components.

• Added theme toggle functionality with JavaScript logic for switching between light/dark modes
• Refactored CSS to use CSS variables for consistent theming across components
• Implemented smooth animations and icon transitions for the theme toggle button

Reviewed Changes

Copilot reviewed 7 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
assets/js/script.js	Implements complete dark mode toggle logic with localStorage persistence and system preference detection
assets/css/_global.scss	Refactors global styles to use CSS variables and adds theme-specific color schemes
assets/css/_header.scss	Updates navigation colors and adds styling for the theme toggle button with animations
assets/css/_footer.scss	Updates footer link colors to use new CSS variable system
_includes/header.html	Adds theme toggle button to site header
_includes/head.html	Includes inline SVG icons for sun/moon and enables JavaScript
Gemfile	Adds webrick gem for local development compatibility

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[epcgrs]

Copilot code are broken the feature hahah, please ignore copilot review.

[epcgrs]

Preview:

b0c2a21c9d97484bb6441b5b0fd977b0.1.mp4