Add dark mode

[nidhi752]

Short Description

Add a Dark Mode option so users can easily switch between light and dark themes on the site.

How This Feature Will Help

Dark Mode will make browsing easier on the eyes, especially in low-light settings. It lets users personalize their experience and improves accessibility by giving them the flexibility to choose what’s most comfortable.

Possible Solution

1. Add a toggle button for Dark Mode in the header or settings area.
2. Use CSS variables to define colors for both light and dark themes, then store the user’s choice in local storage to remember their preference.
3. Implement a function to check the saved preference and apply the right theme on load, making it seamless for users.

Examples/Similar Features

Popular sites like GitHub and Stack Overflow have a Dark Mode feature. Many open-source projects like React also document Dark Mode as a best practice for modern web design.

Can You Help With This Feature?

Yes, I’d be happy to contribute to setting up the CSS, JavaScript toggle, and testing across pages to make sure the theme looks consistent everywhere.

[jalajk3004]

i would like to contribute on this

[pombredanne]

Hey :) Where would this "dark mode" be living?

[snithehacker]

I would like to contribute to this

[snithehacker]

heyy I would like to contribute to this issue

[pawanshettyy]

This issue is still open ? any updates??

[barotmanav]

where dark mod be living ?

[sanks011]

Hey is this issue still open to contribute??

[Prachiii1301]

hey, is this issue still open? if yes, i would love to contribute on this issue!

[palakm-26]

hey @nidhi752 , is this issue still open? if yes i would like to contribute on this issue.

[nidhi752]

@palakm-26 hi, I was just raising the issue. I do not assign them.

[Mohit-Rajak]

Can I do dark mode with the help of only JS ?

[shreyashk003]

i can contribute

[rishuk58]

i can make this

[irshad12332123]

Hi! I'd love to work on this project. Could you please assign me this task? Also, I’d like some guidance on where the toggle button for dark and light mode should be placed for the best user experience. Looking forward to your response. Thanks!

[ksprabhatkumar]

if this issue isn't close i would like to work on this

[PrithvijitBose]

DARK MODE FEATURE IMPLEMENTATION:

Hey @nidhi752 @mjherzog I’d like to contribute and implement a fully featured Dark Mode that:

1. Reduces eye strain in low‑light environments
2. Offers a more personalized, accessible browsing experience
3. Aligns the site with modern UX expectations (GitHub, Stack Overflow, Twitter, etc.)

What I'll Do:

Step 1: Set Up Theme Variables

• Define global CSS variables (--bg-color, --text-color, etc.) for the light theme inside the :root selector.

• Create a .dark-theme or [data-theme="dark"] block with override variables for dark mode.

Step 2: Add Toggle Button

• Place a Dark Mode toggle switch (🌙/☀️ icon or toggle button) in the header or settings area.

• Style the button so it fits the existing UI seamlessly.

Step 3: Handle Theme Switching with JavaScript

• Write a function to toggle the theme class on the

  or tag.

• I will also try to Store the selected theme in localStorage so the user’s choice is remembered on future visits.

Step 4: Apply Theme on Page Load

As i already mentioned in Step 3

Add a small JS script that:

• Checks localStorage for saved preference.

• Applies the correct class (dark-theme or not) before the page renders to prevent white flashes.

Step 5(If needed):

• Briefly update the README or internal docs to explain how the theme toggle works and how contributors can maintain compatibility.

Why Choose Me?

• I’ve already implemented Dark Mode in one of my own projects — you can check it out here: [(https://prithvijitbose.github.io/Excuse-Generator/)]

• While I’m new to open source, I’m eager to learn and take full responsibility for this issue from setup to testing and docs.

Request for Guidance:

I’m new to open source contribution and very excited to get involved!

To get started quickly and implement this efficiently, I’d really appreciate your guidance on where I can find the relevant files/folders for:

1. Header or navigation (where I can add the toggle)
2. Global CSS files
3. Any JS logic that runs on page load

Once I know where everything is, I can jump in and start working on the Dark Mode feature immediately.

Please let me know if this sounds good and assign me the issue if possible. Looking forward to your guidance!

[revaarathore11]

@AyanSinhaMahapatra please assign me.