Add dark mode

[AustinAbbott]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @AustinAbbott, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience by introducing a dark mode feature. It provides a user-friendly toggle to switch between themes, ensures theme preferences are saved and applied consistently across the site, and includes a robust set of CSS changes to support the new aesthetic. The addition of an automated Playwright test guarantees the reliability of the new functionality.

Highlights

• Dark Mode Implementation: Introduced a new dark mode feature, allowing users to toggle between light and dark themes, with persistence across sessions and pages.
• Theme Toggle Component: Added a dedicated ThemeToggleButton.astro component, providing a user interface for theme switching with appropriate SVG icons.
• Global Theme Management: Integrated an inline JavaScript script in BaseHead.astro to detect and apply the user's preferred theme (from local storage or system preference) and ensure theme consistency during Astro's view transitions.
• Comprehensive CSS Theming: Updated global.css with new CSS variables for dark mode, including colors, backgrounds, and shadows, and refactored numerous px units to rem for improved responsiveness and scalability.
• Automated Verification: Added a Playwright script (verify_dark_mode.py) to automate the testing and verification of the dark mode toggle functionality, including screenshot captures.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[cloudflare-workers-and-pages]

Deploying dev-blog with    Cloudflare Pages

Latest commit:	b5dd89a
Status:	🚫  Build failed.

View logs

[gemini-code-assist]

Code Review

This pull request successfully introduces a dark mode feature, complete with a theme toggle and respect for system preferences. The implementation is generally well-done, leveraging CSS variables and converting pixel values to relative rem units for better scalability. However, I've identified a critical bug in the CSS that prevents users from switching to light mode if their system preference is dark. Additionally, there's an opportunity to refactor the theme-switching JavaScript logic to eliminate code duplication and improve maintainability. I've also noted a minor CSS redundancy in the header component. Addressing these points will make the new feature more robust and easier to maintain.

I am having trouble creating individual review comments. Click here to see my feedback.

src/styles/global.css (33-46)

This @media (prefers-color-scheme: dark) block introduces a critical bug. If a user's system preference is dark, this rule applies the dark theme variables. However, if that user then uses the theme toggle to switch to light mode, the JavaScript will remove the html.dark class, but this media query will remain active. This forces the dark theme to persist and prevents the user from switching to light mode.

The JavaScript logic in BaseHead.astro already correctly handles the prefers-color-scheme check to set the initial theme. This CSS block is therefore both redundant and buggy and should be removed.

src/components/ThemeToggleButton.astro (79-85)

The theme-switching logic in handleToggleClick is a separate implementation from the applyTheme function in src/components/BaseHead.astro. This duplication of logic can lead to inconsistencies and maintenance issues.

To centralize theme management, you can expose the applyTheme function from BaseHead.astro and call it from here.

1. In src/components/BaseHead.astro, after the applyTheme function definition (around line 76), add this line to expose it globally:

   window.applyTheme = applyTheme;

2. Then, you can simplify this handleToggleClick function to use the shared applyTheme function, ensuring a single source of truth for theme changes.

  const handleToggleClick = () => {
    const isDark = document.documentElement.classList.contains("dark");
    // Calls the global applyTheme function exposed from BaseHead.astro
    window.applyTheme?.(isDark ? "light" : "dark");
  };

jules-scratch/verification/verify_dark_mode.py (8)

The base URL http://localhost:4321 is hardcoded. For better flexibility across different testing environments, consider reading this value from an environment variable. This would allow the script to be run against different deployments without code changes.

src/components/Header.astro (107-113)

This CSS rule block is problematic and should be removed:

1. The styles for .social-links a are already covered by the nav a rule on line 91, making this part redundant.
2. The styles for #theme-toggle are not appropriate for a <button> element and won't apply correctly due to Astro's style scoping (it would need to be :global(#theme-toggle)). The ThemeToggleButton component already contains its own, more suitable styles.

Removing this block will clean up the CSS and rely on the correct, existing styles.