Dark Mode

1- Adicione um data tag atribute na tag html:

<html lang=”pt-br” data-theme=”light” else “dark”>

2-Adicione um root variable para dark e light mode:

html[data-theme=’light’]{
–bg:#f5f6f7; */
–color-text:#9c9c9c;
–color-shadow:-3px -2px 4px 0px #fff, 4px 2px 6px 0px #ccc; */
}
html[data-theme=’dark’]{
–bg:#121A2F;
–color-text:#fff;
–color-shadow:-3px -2px 4px 0px #777, 4px 2px 6px 0px #000;
–color-title:#406dc0;
}

3-adicione um checkbox no html:

<input type=”checkbox” class=”custom-control-input” id=”theme” name=”theme”>

4- Chame a root variable:

body{
background: var(–bg)!important;
color: var(–color-text);
width: 100%;
}
.card{
width: 100%;
background: var(–bg)!important;
color: var(–color-text);
box-shadow: var(–color-shadow);
}

5-Chame um checkbox no JS e adiciono um change event:

let checkbox = document.querySelector(‘input[name=theme]’);
checkbox.addEventListener(‘change’,function(){
if (this.checked){
document.documentElement.setAttribute(‘data-theme’,’dark’);
} else {
document.documentElement.setAttribute(‘data-theme’,’light’);
}
});

Fonte: https://www.instagram.com/p/CSCTm0Ktd2c/?utm_medium=share_sheet