How can I add a light/dark toggle to my Dawn website header using code?

Store Design
, , , , , , ,

Topic summary

A user seeks to implement a functional light/dark mode toggle in the header of their Dawn theme Shopify store. Their initial code creates a toggle button with visual movement but fails to change the website’s background color and disrupts the theme layout, causing overlapped pages.

Proposed Solution:

  • Add HTML toggle button to header.liquid
  • Style with CSS in base.css (toggle appearance, dark mode background color)
  • Implement JavaScript in custom JS file to add/remove ‘dark-mode’ class on body element when toggle is clicked

Current Status:

  • The toggle button now displays and functions mechanically
  • Background color still not changing despite code implementation
  • User requests verification of their code implementation via shared preview URL
  • Additional request: Remove the “Light/Dark Toggle” title text and position button to the right of the “Contact Us” button

Issue Remains Unresolved: The core functionality of actually switching between light and dark color schemes is not working, suggesting possible CSS class targeting or JavaScript implementation errors.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Is the any way to make a light and dark toggle in my Dawn website? I want it in the header. I’ve tried this before, but I couldn’t get the website change colour.

I also prefer code.

2

@James203 welcome to the Shopify Community,

You didn’t shared the complete information like the store url or the screenshot any?

thanks

3

Hi James,

If you want Light/Dark Toggle For Dawn theme,

Watch this tutorial , I hope this helps youhttps://youtu.be/8hjPhZeVGVM

4

sorry. This code what i have only shows the toggle movement, plus it messes up my theme layout.. resulting in overlapped half cut pages.

HTML

Light/Dark Toggle
Button

CSS

@import url(“https://fonts.googleapis.com/css2?family=Montserrat&display=swap”);

  • {box-sizing: border-box;}

body {
font-family: “Montserrat”, sans-serif;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
min-height: 100vh;
margin: 0;
transition: background 0.2s linear;
}

body.dark {background-color: #292c35;} /* #9b59b6 */

body.dark h1, body.dark .support a {color: #fff;}

.checkbox {
opacity: 0;
position: absolute;
}

.checkbox-label {
background-color: #111;
width: 50px;
height: 26px;
border-radius: 50px;
position: relative;
padding: 5px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.fa-moon {color: #f1c40f;}

.fa-sun {color: #f39c12;}

.checkbox-label .ball {
background-color: #fff;
width: 22px;
height: 22px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
transform: translateX(24px);
}

/* Support me if you like it */
.support {
position: absolute;
right: 20px;
bottom: 20px;
}

.support a {
color: #292c35;
font-size: 32px;
backface-visibility: hidden;
display: inline-block;
transition: transform 0.2s ease;
}

.support a:hover{
transform: scale(1.1);
}

JS

const checkbox = document.getElementById(“checkbox”)
checkbox.addEventListener(“change”, () => {
document.body.classList.toggle(“dark”)
})

i want it on the right of ‘contact us’ button. I also want to get rid of the title ‘light/dark toggle button’.

Here’s the link to my website for reference https://4qph6x2e6puwp5us-80385835338.shopifypreview.com

1 Like
5

hi, i tried doing your solution but it wouldnt change the theme colour to dark. and i didnt get the dark mode button.

6

Try This Code I hope this is helpful for you,
you’ll need to use a combination of HTML, CSS, and JavaScript.

Here’s a step-by-step guide to achieve this:

HTML Structure:

In your theme’s header file (typically header.liquid), add a toggle button for light/dark mode.

For example:

CSS Styling:(Add this code base.css file at

the bottom)

Add CSS to style the toggle button and define the appearance for light and dark modes.

.theme-toggle {
  position: relative;
  width: 40px;
  height: 20px;
}

.theme-toggle input[type="checkbox"] {
  display: none;
}

.theme-toggle .theme-switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc; /* Default background color */
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.theme-toggle input[type="checkbox"]:checked + .theme-switch {
  background-color: #333; /* Dark mode background color */
}

**JavaScript Functionality(**Add this Code Custom.js file at the bottom

)

Add JavaScript to toggle between light and dark modes when the toggle button is clicked. This code should be placed either in a separate JavaScript file or within tags in your theme file.

document.addEventListener('DOMContentLoaded', function () {
  const themeSwitch = document.getElementById('theme-switch');
  
  themeSwitch.addEventListener('change', function () {
    if (this.checked) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  });
});

Save Changes.

7

the button is working, but its not changed the background colour.

i think ive done the code right, could you double check to see https://4qph6x2e6puwp5us-80385835338.shopifypreview.com

8

Thank youuuuuuuuuu