How to add dark mode button to theme

Themes
1

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) {...}
2

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.

3

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

4

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
5

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?