Add Dark/Light Mode Toggle to Writers Program site #43

AmanKashyap0807 · 2025-11-03T18:16:03Z

Description

This PR implements a dark/light mode toggle for the Writers Program website, enhancing accessibility and modern UI standards.

Related Issue

Fixes #3075

What I implemented

Enabled class-based dark/light mode using Tailwind’s class strategy (see [tailwind.config.js].
Added a theme toggle UI (CSS class .header-theme-toggle) in header.
Implemented site-wide dark-mode overrides scoped under the .dark namespace to preserve Keploy brand colors while improving contrast for readability (header, menu icon, home, home-social, footer, inputs, buttons, contact, etc.) — see [main.css].
User choice is saved to localStorage and re-applied on page load so dark/light selection survives reloads and navigation.
I used a simple native (aria-pressed + keyboard handlers) and a tiny JS module to toggle the top-level .dark class and save the choice to localStorage. ( This keeps the site dependency‑free, small while still meeting accessibility needs.
The bunny graphic originally had a white background, which looked off in dark mode. I used photo editing tools to make the image background transparent so it fits visually in both modes.

Acceptance Criteria Checklist

Toggle button is visible and accessible.

Dark and light modes switch seamlessly across the app.
Mode persists across page reloads and navigation/Text, background, and components have proper contrast in both modes/Components from UI libraries integrate without breaking the theme.
https://github.com/user-attachments/assets/163ac91c-01a4-4e9f-802d-5cd9b4968e86

Open to Feedback

If you’d like this implemented differently (e.g., toggle position, style), let me know—I can update it as per your suggestions!

Thanks

Thank you for your time in reviewing this contribution! Looking forward to feedback and suggestions.

github-actions

Thank you and congratulations 🎉 for opening your very first pull request in writers-program

Copilot

Pull Request Overview

This PR implements a dark mode theme toggle feature for the Keploy contribution website using Tailwind CSS. The implementation includes a theme toggle button, dark mode styles, and various UI improvements.

Key Changes:

Added Tailwind CSS configuration and PostCSS build pipeline for generating theme utilities
Implemented a theme toggle button with localStorage persistence and keyboard accessibility
Updated footer styling with improved newsletter input design and horizontal social icons layout

Reviewed Changes

Copilot reviewed 8 out of 10 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
tailwind.config.js	New Tailwind configuration with Keploy brand colors and dark mode class strategy
postcss.config.js	PostCSS configuration for Tailwind and autoprefixer processing
package.json	Added build scripts and dependencies for Tailwind CSS, PostCSS, and autoprefixer
js/theme-toggle.js	New JavaScript module handling theme toggle logic with localStorage and keyboard support
css/tailwind.css	Tailwind directives and custom dark mode styles for various UI sections
css/tw.css	Generated Tailwind utility classes and dark mode overrides
css/main.css	Refactored header controls, theme toggle button styles, and footer component styling
index.html	Added theme toggle button, updated bunny image, integrated Tailwind CSS, and changed newsletter icon
styles.html	Added theme toggle button and integrated Tailwind CSS with cache-busting parameters

Comments suppressed due to low confidence (1)

index.html:260

Corrected spelling of 'Prorgam' to 'Program'.

              <h3> An Open-Source Prorgam for Students, Professionals, and Freelancers</h3>

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

Copilot · 2025-11-03T18:18:21Z

css/tailwind.css

+@tailwind components;
+@tailwind utilities;


Missing @tailwind base; directive. Tailwind CSS typically requires all three directives (base, components, utilities) for proper functionality. Without the base layer, CSS resets and default styles won't be applied, which may lead to inconsistent styling across browsers.

Copilot · 2025-11-03T18:18:21Z

index.html

+  <link rel="stylesheet" href="css/main.css?v=dlm2">
+  <link rel="stylesheet" href="css/tw.css?v=dlm2">


Cache-busting version parameters are inconsistent between index.html (v=dlm2) and styles.html (v=dlm1). Consider using a consistent versioning strategy across all HTML files or implementing a build-time variable to maintain synchronization.

Copilot · 2025-11-03T18:18:22Z

css/main.css

+
+/* When dark theme is active, don't show the opaque white chip — keep it transparent/dark */
+.dark .header-menu-toggle.opaque {
+    background-color: rgba(255,255,255,0.0); /* subtle translucent so it doesn't pop as white */


Using rgba(255,255,255,0.0) is unnecessarily verbose for a fully transparent background. Use transparent instead for better readability and maintainability.

Suggested change

background-color: rgba(255,255,255,0.0); /* subtle translucent so it doesn't pop as white */

background-color: transparent; /* subtle translucent so it doesn't pop as white */

Copilot · 2025-11-03T18:18:22Z

package.json

+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "npx postcss css/tailwind.css -o css/main.css",


The build:css script outputs to css/main.css, which will overwrite the existing main.css file that contains custom styles. This appears to be a mistake since build:tw correctly outputs to css/tw.css. The build:css script should likely be removed or renamed to avoid confusion and prevent accidental overwriting of main.css.

Suggested change

"build:css": "npx postcss css/tailwind.css -o css/main.css",

Copilot · 2025-11-03T18:18:22Z

css/main.css

+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 33%;


The submit button positioning uses top: 33% with transform: translateY(-50%), resulting in a final vertical position of approximately 8% from the top. This appears incorrect for centering the button vertically within the input field. Change top: 33% to top: 50% for proper vertical centering.

Suggested change

top: 33%;

top: 50%;

amaan-bhati

Hey @AmanKashyap0807 Thanks for raising this pr, can you please provide a preview in forn of a video for the whole page. Also, please take a look at the copilot review added in the pr.

AmanKashyap0807 · 2025-12-16T05:46:54Z

Hello, Amaan, sir I hope all is well with you, and I sincerely apologize for not receiving your mail. I'm hoping you recall I've nearly finished adding a dark/light mode to the writers program website. In accordance with your message, I'll send you the entire page video and ask that you let me know if there are any changes. Warm regards, Aman Kashyap

…

On Tue, Nov 25, 2025 at 11:34 PM Amaan Bhati ***@***.***> wrote: ***@***.**** commented on this pull request. Hey @AmanKashyap0807 <https://github.com/AmanKashyap0807> Thanks for raising this pr, can you please provide a preview in forn of a video for the whole page. Also, please take a look at the copilot review added in the pr. — Reply to this email directly, view it on GitHub <#43 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BJBVK727K4VYDIUTQKMTE6D36SK4TAVCNFSM6AAAAACLANSWWSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTKMBWGI2TMNJXGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

AmanKashyap0807 added 6 commits October 31, 2025 07:03

postcss build completed

03d25b7

dark mode implemented (now need to fix some more things)

fac4b84

transparent bunny added and some minor fixes

7587934

footer 2 section corrected, copyright section left

aa8c515

footer is compatible with dark theme

ef29143

tailwind corrected for footer

97cc339

Copilot AI review requested due to automatic review settings November 3, 2025 18:16

github-actions bot reviewed Nov 3, 2025

View reviewed changes

Copilot AI reviewed Nov 3, 2025

View reviewed changes

resolved issues recommended by copilot agent during pull request

ddaeb75

amaan-bhati self-requested a review November 25, 2025 18:03

amaan-bhati reviewed Nov 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Dark/Light Mode Toggle to Writers Program site #43

Add Dark/Light Mode Toggle to Writers Program site #43

Uh oh!

AmanKashyap0807 commented Nov 3, 2025

Uh oh!

github-actions bot left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

Copilot AI Nov 3, 2025

Uh oh!

amaan-bhati left a comment

Uh oh!

AmanKashyap0807 commented Dec 16, 2025 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		<link rel="stylesheet" href="css/main.css?v=dlm2">
		<link rel="stylesheet" href="css/tw.css?v=dlm2">

	background-color: rgba(255,255,255,0.0); /* subtle translucent so it doesn't pop as white */
	background-color: transparent; /* subtle translucent so it doesn't pop as white */

		@tailwind components;
		@tailwind utilities;

Add Dark/Light Mode Toggle to Writers Program site #43

Are you sure you want to change the base?

Add Dark/Light Mode Toggle to Writers Program site #43

Uh oh!

Conversation

AmanKashyap0807 commented Nov 3, 2025

Description

Related Issue

What I implemented

Acceptance Criteria Checklist

Open to Feedback

Thanks

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes:

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!

amaan-bhati left a comment

Choose a reason for hiding this comment

Uh oh!

AmanKashyap0807 commented Dec 16, 2025 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants