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

[James203]

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. 

[Liquid_xPert_SJ]

@James203  welcome to the Shopify Community,

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

thanks

[James203]

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

<h1>Light/Dark Toggle<br> Button</h1>

<div>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>

-------------------------------

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

 

[reallora]

Thank youuuuuuuuuu

[websensepro]

 Hi James,

 If you want Light/Dark Toggle For Dawn theme,

Watch this tutorial , I hope this helps you

[James203]

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

[websensepro]

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:

<div class="theme-toggle">
  <input type="checkbox" id="theme-switch">
  <label for="theme-switch" class="theme-switch"></label>
</div>

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 <script> 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.

[James203]

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