How to add dark mode button to theme

So, I’ve been reading what part of the css I should refer to, but don’t know how to implement the button on the menu. Can anybody help? Thanks!
The code is supposed to be this one, isn’t it?

@media (prefers-color-scheme: dark) {...}

Hi,
Yes, this is code but it will work when your machine or OS is on dark mode. If you want to use button for dark more, you have to use Javascript code and html button.

1 Like

Thanks @ENAMUL_HAQUE. Where can I find the Javascript code & html button?

You can use this Javascript code on script

/*
* Dark Light Version
*/
var html = document.querySelector('html'),
darkLight = document.querySelector('.dark-light')
darkLight.addEventListener('click', function(){
   if(html.getAttribute('data-theme') === 'light'){
       html.setAttribute('data-theme', 'dark')
       localStorage.setItem('selected-theme', 'dark');
   }else{
       html.setAttribute('data-theme', 'light')
       localStorage.setItem('selected-theme', 'light');
   }
   console.log(html.hasAttribute('data-theme'))
})
if(typeof(Storage) !== 'undefined') {
   if (localStorage.getItem('selected-theme') == 'light') {
       document.documentElement.setAttribute('data-theme', 'light');
   }
   else if (localStorage.getItem('selected-theme') == 'dark') {
       document.documentElement.setAttribute('data-theme', 'dark');
   }
}

HTML code.

I used icons on partials folder

<div class="dark-light">
    <div class="icon-dark">
        {{> icons/light}}
    </div>
    <div class="icon-light">
        {{> icons/dark}}
    </div>
</div>

You can get two icons. You can manage using css.

CSS code

.dark-light {
    cursor: pointer;
    svg {
        color: var(--color-white);
    }
    .icon-light {
        display: block;
    }
    .icon-dark {
        display: none;
    }
}

[data-theme='dark'] {
    .dark-light {
        .icon-light {
            display: none;
        }
        .icon-dark {
            display: block;
        }
    }
}
1 Like

hi, my theme changes automatically based on the OS theme, this is triggered on theme change @media (prefers-color-scheme: dark) {..}

How can I trigger @media (prefers-color-scheme: dark) {..} with your example?