Fix: improved dark mode styles and theme toggle transparency #198

ashfyx716 · 2025-11-03T10:01:50Z

Summary

This pull request improves the dark mode styling across the blog website, ensuring a consistent and cohesive visual experience throughout all sections.

Changes Made

Added white borders to body buttons (visible only in dark mode).
Fixed dark background for post cards in both the Technology and Latest Blog sections.
Unified gradient styling under titles to match the homepage design.
Refined the theme toggle button by removing the opaque background for a cleaner appearance.

Testing

Verified the layout and color consistency in both light and dark themes.
Checked the appearance across the Home, Technology, and Community sections.
Ensured hover effects and text visibility remain clear in dark mode.

Screenshots (Before & After)

Please find below the visual comparison of changes made:

Before

Home page (light and dark mode)

Technology “Latest Blog” section in dark mode

After

Home page with improved dark mode styling

Technology “Latest Blog” section with proper dark theme

Theme Toggle Button

Transparent theme toggle button blending smoothly in both modes

Signed-off-by: Ashfaq Sayeed Shaik <[email protected]>

Copilot

Pull Request Overview

This PR implements a comprehensive dark mode theme for the blog application using next-themes. The changes introduce a theme toggle component, update all UI components with dark mode variants, and establish a consistent color system using CSS custom properties.

Key changes:

Added next-themes package (v0.4.6) and integrated ThemeProvider in the app root
Created a ThemeToggle component with sun/moon icons for theme switching
Updated all components with dark mode-specific styling using Tailwind's dark: prefix
Refactored CSS variables to support light/dark themes with consistent HSL color values

Reviewed Changes

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

Show a summary per file

File	Description
package.json	Added next-themes dependency
package-lock.json	Lockfile update for next-themes
pages/_app.tsx	Wrapped app with ThemeProvider
components/ThemeToggle.tsx	New theme toggle button component
components/header.tsx	Added ThemeToggle to header navigation
styles/index.css	Comprehensive dark mode CSS with variables, duplicate button styles removed and consolidated
pages/index.tsx	Updated Technology/Community buttons with dark mode borders
components/post-card.tsx	Added dark mode styling to blog post cards
components/hero-post.tsx	Updated hero post with dark theme support
components/topBlogs.tsx	Added dark mode to section headings and "see all" buttons
components/tweets.tsx	Dark mode styling for tweet cards
components/testimonials.tsx	Dark mode support for testimonial section
components/more-stories.tsx	Updated heading tag from h2 to h3 for consistency
components/navbar/main-nav.tsx	Dark mode styling for navigation menus and dropdowns

Comments suppressed due to low confidence (1)

components/header.tsx:71

The link opens in a new tab but doesn't inform screen reader users. Consider adding aria-label=\"Sign In (opens in new tab)\" or similar accessible text to the link element.

              <Button asChild className="ml-[8px]">
                <a
                  href="https://app.keploy.io/signin"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Sign In
                </a>
              </Button>

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

Copilot · 2025-11-03T10:05:35Z

styles/index.css

+/* === White border fix for dark mode buttons (like Technology & Community) === */
+.dark .btn, .dark .btn-sm {
+  border-color: #ffffff !important;
+  color: #ffffff !important;
 }
-
-.btn-sm {
-    @apply px-4 py-2;
+.dark .btn:hover, .dark .btn-sm:hover {
+  background-color: rgba(255, 255, 255, 0.1);
 }


Duplicate dark mode button styling exists at lines 136-143 and 268-287. The first instance handles .btn and .btn-sm, while the second handles .btn, .btn-outline, .btn-sm, .nav-btn, button, and a.btn. These should be consolidated into a single rule to avoid maintainability issues and ensure consistent styling across all button variants.

Copilot · 2025-11-03T10:05:35Z

styles/index.css

 .hamburger.active svg > :first-child {
-  opacity: 0;
-  y: 11;
+  opacity: 0; y: 11;


[nitpick] Multiple CSS property declarations should be on separate lines for better readability and maintainability. This applies to this line and similar patterns throughout the file (lines 79, 112-113).

Suggested change

opacity: 0; y: 11;

opacity: 0;

y: 11;

Copilot · 2025-11-03T10:05:35Z

styles/index.css

+:root .blog-card, :root .post-card, :root .blog-tile {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+.dark .blog-card, .dark .post-card, .dark .blog-tile {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}


The :root scoped styling for blog cards (lines 257-260) appears redundant since these classes already apply bg-card and text-card-foreground via Tailwind on line 252. The dark mode override (lines 261-264) uses the same CSS variables, making these explicit declarations unnecessary.

Suggested change

:root .blog-card, :root .post-card, :root .blog-tile {

background-color: hsl(var(--card));

color: hsl(var(--card-foreground));

}

.dark .blog-card, .dark .post-card, .dark .blog-tile {

background-color: hsl(var(--card));

color: hsl(var(--card-foreground));

}

Copilot · 2025-11-03T10:05:36Z

styles/index.css

 .hamburger svg > :first-child,
 .hamburger svg > :nth-child(2),
 .hamburger svg > :nth-child(3) {
  transform-origin: center;


Line 108 is missing the transform: rotate(0deg); property that was removed. This property was part of the original hamburger animation state and should be retained to ensure the default state is explicitly defined for the non-active hamburger menu.

Suggested change

transform-origin: center;

transform-origin: center;

transform: rotate(0deg);

Copilot · 2025-11-03T10:05:36Z

pages/_app.tsx

-import dynamic from 'next/dynamic'
-
+import dynamic from 'next/dynamic';
+import { ThemeProvider } from "next-themes"; // 👈 added this


The inline comment // 👈 added this should be removed. Code comments should explain 'why' rather than 'what was added', and this type of comment is typically only useful during the review process.

Suggested change

import { ThemeProvider } from "next-themes"; // 👈 added this

import { ThemeProvider } from "next-themes";

Copilot · 2025-11-03T10:05:36Z

components/post-card.tsx

      ref={ref}
      style={springStyles}
+      className="
+        bg-white dark:bg-[#1a1a1a] 


The hardcoded color #1a1a1a should use the CSS custom property instead (e.g., dark:bg-[hsl(var(--card))] or define a Tailwind color token) to maintain consistency with the design system established in the CSS variables.

Suggested change

bg-white dark:bg-[#1a1a1a]

bg-white dark:bg-[hsl(var(--card))]

Copilot · 2025-11-03T10:05:37Z

components/topBlogs.tsx

          <Link
            href="/technology"
-            className="text-orange-500 hover:text-orange-600 font-semibold flex items-center transition-colors duration-300"
+            className="see-all-btn inline-flex items-center font-semibold px-5 py-2 rounded-lg border border-gray-300 dark:border-white text-orange-500 dark:text-white bg-transparent dark:bg-[#2b2b30] hover:bg-orange-100 dark:hover:bg-[#3a3a40] hover:text-orange-600 dark:hover:border-orange-400 transition-all duration-300"


Multiple hardcoded colors (#2b2b30, #3a3a40) are used instead of CSS custom properties. Consider using dark:bg-card and dark:hover:bg-muted or defining these as Tailwind theme colors to maintain consistency with the design system.

Suggested change

className="see-all-btn inline-flex items-center font-semibold px-5 py-2 rounded-lg border border-gray-300 dark:border-white text-orange-500 dark:text-white bg-transparent dark:bg-[#2b2b30] hover:bg-orange-100 dark:hover:bg-[#3a3a40] hover:text-orange-600 dark:hover:border-orange-400 transition-all duration-300"

className="see-all-btn inline-flex items-center font-semibold px-5 py-2 rounded-lg border border-gray-300 dark:border-white text-orange-500 dark:text-white bg-transparent dark:bg-card hover:bg-orange-100 dark:hover:bg-muted hover:text-orange-600 dark:hover:border-orange-400 transition-all duration-300"

Copilot · 2025-11-03T10:05:37Z

components/testimonials.tsx

+      </h3>
+
+      {/* === Testimonials Section === */}
+      <div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[hsl(220,14%,18%)] transition-colors duration-500">


The dark background uses a hardcoded HSL value hsl(220,14%,18%) that matches the --card variable. This should use dark:bg-card instead for consistency with the design system.

Suggested change

<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[hsl(220,14%,18%)] transition-colors duration-500">

<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-card transition-colors duration-500">

Copilot · 2025-11-03T10:05:37Z

components/tweets.tsx

      target="_blank"
      rel="noopener noreferrer"
-      className="bg-white border border-gray-200 p-6 rounded-lg shadow-sm hover:shadow-lg transition-shadow duration-300 m-2 block"
+      className="bg-white dark:bg-[#1f1f23] border border-gray-200 dark:border-gray-700 p-6 rounded-lg shadow-sm hover:shadow-lg hover:scale-[1.02] transition-all duration-300 m-2 block"


The hardcoded color #1f1f23 should use the CSS custom property dark:bg-card to maintain consistency with the design system.

Suggested change

className="bg-white dark:bg-[#1f1f23] border border-gray-200 dark:border-gray-700 p-6 rounded-lg shadow-sm hover:shadow-lg hover:scale-[1.02] transition-all duration-300 m-2 block"

className="bg-white dark:bg-card border border-gray-200 dark:border-gray-700 p-6 rounded-lg shadow-sm hover:shadow-lg hover:scale-[1.02] transition-all duration-300 m-2 block"

ashfyx716 · 2025-11-03T10:07:17Z

@copilot open a new pull request to apply changes based on the comments in this thread

ashfyx716 · 2025-11-03T10:09:01Z

Hi @amaan-bhati ,

I've implemented fixes to improve dark mode consistency and the theme toggle design across the site.
All changes have been tested locally, and screenshots (before & after) are attached in the PR description.
Could you please review and approve when possible?
Thank you!

Copilot AI review requested due to automatic review settings November 3, 2025 10:01

Fix: improved dark mode styles and theme toggle transparency

3fb7cbe

Signed-off-by: Ashfaq Sayeed Shaik <[email protected]>

Copilot AI reviewed Nov 3, 2025

View reviewed changes

ashfyx716 force-pushed the fix/dark-mode branch from 1d8d6a9 to 3fb7cbe Compare November 3, 2025 10:07

ashfyx716 mentioned this pull request Nov 3, 2025

[blog-website] Add Dark/Light Mode Support with Toggle keploy/keploy#3083

Open

	transform-origin: center;
	transform-origin: center;
	transform: rotate(0deg);

	import { ThemeProvider } from "next-themes"; // 👈 added this
	import { ThemeProvider } from "next-themes";

	bg-white dark:bg-[#1a1a1a]
	bg-white dark:bg-[hsl(var(--card))]

	className="see-all-btn inline-flex items-center font-semibold px-5 py-2 rounded-lg border border-gray-300 dark:border-white text-orange-500 dark:text-white bg-transparent dark:bg-[#2b2b30] hover:bg-orange-100 dark:hover:bg-[#3a3a40] hover:text-orange-600 dark:hover:border-orange-400 transition-all duration-300"
	className="see-all-btn inline-flex items-center font-semibold px-5 py-2 rounded-lg border border-gray-300 dark:border-white text-orange-500 dark:text-white bg-transparent dark:bg-card hover:bg-orange-100 dark:hover:bg-muted hover:text-orange-600 dark:hover:border-orange-400 transition-all duration-300"

	<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[hsl(220,14%,18%)] transition-colors duration-500">
	<div className="relative flex mb-8 h-[700px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-card transition-colors duration-500">

	className="bg-white dark:bg-[#1f1f23] border border-gray-200 dark:border-gray-700 p-6 rounded-lg shadow-sm hover:shadow-lg hover:scale-[1.02] transition-all duration-300 m-2 block"
	className="bg-white dark:bg-card border border-gray-200 dark:border-gray-700 p-6 rounded-lg shadow-sm hover:shadow-lg hover:scale-[1.02] transition-all duration-300 m-2 block"

Fix: improved dark mode styles and theme toggle transparency #198

Are you sure you want to change the base?

Fix: improved dark mode styles and theme toggle transparency #198

Uh oh!

Conversation

ashfyx716 commented Nov 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

ashfyx716 commented Nov 3, 2025

Uh oh!

ashfyx716 commented Nov 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant