Darkmode (and Darkest mode) themes by velitchko · Pull Request #4 · austrovis/austrovis.github.io

velitchko · 2025-12-12T10:16:45Z

Added darkmode (and darkest mode) feature.

Copilot

Pull request overview

This PR implements a dark mode and "darkest mode" theming system for the AustroVis website using custom Tailwind CSS variants. The implementation adds theme-aware styling across all components and pages.

Key changes:

Adds custom Tailwind CSS variants (dark: and darkest:) for theme switching
Applies comprehensive dark mode styling to all components and pages
Introduces a ClientLayout wrapper component that imports a ThemeToggle component
Updates the application layout to support theme-aware backgrounds and text colors

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
app/globals.css	Defines custom Tailwind variants for dark and darkest themes, removes previous CSS variable approach
app/layout.tsx	Refactors to use ClientLayout wrapper, adds theme-aware styling to body element
components/ClientLayout.tsx	New wrapper component that orchestrates Header, Footer, and ThemeToggle components
components/Header.tsx	Adds dark/darkest mode styling for header background, borders, text, and Discord icon
components/Footer.tsx	Adds 'use client' directive and comprehensive dark mode styling for all footer elements
components/NewsletterSignup.tsx	Applies dark mode styling to newsletter signup section background and text
components/EventCard.tsx	Adds extensive dark mode styling for event cards including backgrounds, borders, buttons, and text
app/page.tsx	Applies dark mode styling across hero section, about section, and event listings
app/register/page.tsx	Adds comprehensive dark mode styling for registration form including inputs, labels, buttons, and success messages

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-12T10:25:07Z

+@variant dark (.dark &);
+@variant darkest (.darkest &);



The dark mode implementation uses custom Tailwind variants (dark: and darkest:) that require the corresponding class to be added to the html element. However, there's no mechanism in place to add these classes. The theme variants defined in globals.css expect a parent element with .dark or .darkest class, but the html element in layout.tsx doesn't have any class attribute. Without the ThemeToggle component adding these classes dynamically, the dark mode styling will never be applied.

Suggested change

@variant dark (.dark &);

@variant darkest (.darkest &);

Copilot · 2025-12-12T10:25:07Z

      <div className="max-w-3xl mx-auto text-center">
        <h2 className="text-2xl md:text-3xl font-bold mb-3">Stay Updated</h2>
-        <p className="text-white/70 mb-6 text-base">
+        <p className="text-white/70 dark:text-[#b9bbbe] darkest:text-white/70 mb-6 text-base">


The text-white/70 opacity combined with the dark background colors may not provide sufficient contrast for accessibility compliance. Consider testing these color combinations against WCAG AA standards (4.5:1 for normal text) to ensure users with visual impairments can read the content comfortably. This applies to text on backgrounds like dark:bg-[#2f3136] and darkest:bg-black.

Suggested change

<p className="text-white/70 dark:text-[#b9bbbe] darkest:text-white/70 mb-6 text-base">

<p className="text-white dark:text-white darkest:text-white mb-6 text-base">

Copilot · 2025-12-12T10:25:07Z

@@ -1,20 +1,7 @@
 @import "tailwindcss";



The custom Tailwind variants for dark and darkest modes lack documentation explaining their purpose and usage. Consider adding comments that explain these variants work by checking for .dark or .darkest classes on a parent element, and that the ThemeToggle component is responsible for applying these classes to the html element.

Suggested change

/*

* Custom Tailwind variants for dark and darkest modes.

* These variants work by checking for `.dark` or `.darkest` classes on a parent element.

* The ThemeToggle component is responsible for applying these classes to the <html> element.

*/

Copilot · 2025-12-12T10:25:08Z

        </div>
        {!isPast && (
-          <span className="px-3 py-1 text-xs font-medium bg-black text-white rounded-full transition-all duration-300 group-hover:scale-110 group-hover:shadow-md">
+          <span className="px-3 py-1 text-xs font-medium bg-black dark:bg-white darkest:bg-white text-white dark:text-black darkest:text-black rounded-full transition-all duration-300 group-hover:scale-110 group-hover:shadow-md">


The darkest mode styling uses identical values to the dark mode in many cases (e.g., 'dark:bg-white darkest:bg-white'). Consider whether you actually need three separate themes or if dark and darkest could share more styles. If they should be distinct, ensure darkest provides a visibly different experience. The repeated identical values suggest this distinction might not be necessary.

Copilot · 2025-12-12T10:25:08Z

-            <h3 className="text-xl font-bold mb-2">AustroVis</h3>
-            <p className="text-sm text-black/60 max-w-md">
+            <h3 className="text-xl font-bold mb-2 text-black dark:text-white darkest:text-white">AustroVis</h3>
+            <p className="text-sm max-w-md text-black/50 dark:text-[#b9bbbe] darkest:text-white/50">


The text opacity changed from text-black/60 to text-black/50 for consistency, but this is inconsistent with other parts of the codebase where text-black/60 is still used in dark mode variants (e.g., line 22 uses text-black/60 dark:text-[#b9bbbe] darkest:text-white/60). Consider using consistent opacity values throughout the component for better design consistency.

Suggested change

<p className="text-sm max-w-md text-black/50 dark:text-[#b9bbbe] darkest:text-white/50">

<p className="text-sm max-w-md text-black/60 dark:text-[#b9bbbe] darkest:text-white/50">

Copilot · 2025-12-12T10:25:08Z

                value={formData.name}
                onChange={handleChange}
-                className="w-full px-4 py-2 border border-black/20 rounded-lg focus:ring-2 focus:ring-black focus:border-black outline-none transition"
+                className="w-full px-4 py-2 border border-black/20 dark:border-[#40444b] darkest:border-white/20 rounded-lg focus:ring-2 focus:ring-black dark:focus:ring-white darkest:focus:ring-white focus:border-black dark:focus:border-white darkest:focus:border-white outline-none transition bg-white dark:bg-[#1e1f22] darkest:bg-[#0a0a0a] text-black dark:text-white darkest:text-white placeholder:text-black/40 dark:placeholder:text-[#72767d] darkest:placeholder:text-white/40"


The className strings are becoming extremely long and difficult to maintain due to the repetition of dark: and darkest: variants. Consider extracting commonly used color combinations into reusable CSS classes or using a library like clsx/classnames with constants for repeated patterns to improve maintainability and readability.

Copilot · 2025-12-12T10:25:09Z

@@ -57,12 +56,8 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" className="scroll-smooth">


The html element needs to support theme class names for the dark mode variants to work. Since the custom Tailwind variants are defined as '.dark &' and '.darkest &', the html element should have a mechanism to receive 'dark' or 'darkest' class dynamically. Consider updating this to include theme class handling, potentially by making this a client component or using a theme provider pattern.

Copilot · 2025-12-12T10:25:09Z

-          {children}
-        </main>
-        <Footer />
+      <body className={`${inter.variable} font-sans antialiased bg-white dark:bg-[#36393f] darkest:bg-black text-black dark:text-white darkest:text-white`}>


The implementation uses Discord-inspired color values (like #2f3136, #36393f, #40444b, #b9bbbe) for dark mode. While these are recognizable Discord colors, consider documenting this design decision or creating named color constants in a theme configuration file for better maintainability and to make it easier to adjust the theme in the future.

Suggested change

<body className={`${inter.variable} font-sans antialiased bg-white dark:bg-[#36393f] darkest:bg-black text-black dark:text-white darkest:text-white`}>

{/* Uses Discord-inspired dark mode color. See tailwind.config.js for 'discord-dark' color definition. */}

<body className={`${inter.variable} font-sans antialiased bg-white dark:bg-discord-dark darkest:bg-black text-black dark:text-white darkest:text-white`}>

Darkmode (and Darkest mode) themes

89dbaa3

Copilot AI review requested due to automatic review settings December 12, 2025 10:16

Copilot started reviewing on behalf of velitchko December 12, 2025 10:17 View session

velitchko merged commit fd1be0b into main Dec 12, 2025
6 checks passed

Copilot AI reviewed Dec 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Darkmode (and Darkest mode) themes#4

Darkmode (and Darkest mode) themes#4
velitchko merged 1 commit intomainfrom
feat/darkmode

velitchko commented Dec 12, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Copilot AI Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<p className="text-white/70 dark:text-[#b9bbbe] darkest:text-white/70 mb-6 text-base">
	<p className="text-white dark:text-white darkest:text-white mb-6 text-base">

+/*
+ * Custom Tailwind variants for dark and darkest modes.
+ * These variants work by checking for `.dark` or `.darkest` classes on a parent element.
+ * The ThemeToggle component is responsible for applying these classes to the <html> element.
+ */

	<p className="text-sm max-w-md text-black/50 dark:text-[#b9bbbe] darkest:text-white/50">
	<p className="text-sm max-w-md text-black/60 dark:text-[#b9bbbe] darkest:text-white/50">

	<body className={`${inter.variable} font-sans antialiased bg-white dark:bg-[#36393f] darkest:bg-black text-black dark:text-white darkest:text-white`}>
	{/* Uses Discord-inspired dark mode color. See tailwind.config.js for 'discord-dark' color definition. */}
	<body className={`${inter.variable} font-sans antialiased bg-white dark:bg-discord-dark darkest:bg-black text-black dark:text-white darkest:text-white`}>

Conversation

velitchko commented Dec 12, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants