Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode

The dashboard was very good, I'm going to use it in a service management system project that I'm developing, to contribute to the video code, I added the function that stores the last theme chosen by the user in the browser, this way when reloading the theme remains the same as the user chose. In the current code, the theme becomes clear every time the page reloads.

I separated the code responsible for the dark theme in another js and called it dark.js, so my current code looks like this:


const themeToggler = document.querySelector(".theme-toggler");
const darkThemeVariablesClass = 'dark-theme-variables';

// Verifique se já existe um tema salvo no localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.add(savedTheme);
}

themeToggler.addEventListener('click', () => {
document.body.classList.toggle(darkThemeVariablesClass);

// Verifique se o tema atual é escuro e salve-o no localStorage
if (document.body.classList.contains(darkThemeVariablesClass)) {
localStorage.setItem('theme', darkThemeVariablesClass);
} else {
// Caso contrário, remova o tema do localStorage
localStorage.removeItem('theme');
}

themeToggler.querySelector('span:nth-child(1)').classList.toggle('active');
themeToggler.querySelector('span:nth-child(2)').classList.toggle('active');
});



One suggestion I intend to implement is to align the beginning of the logo with the menu icons, and align the center of the profile photo with the user's name

this is best I can recommend for my up coming projects 😇😇😇😇😇😇☺☺☺☺☺

Big thanks from Cambodia🥰

Give me code on free

source code give me

People are buffled you dont need some shiny css framework to be able to design frontend :-)

excelente tutorial, indio!!

Awesome stuff. But whould be nice with the "active" changing when selecting in the sidebar. Now its static with the "Customer" always active. Also i found a bug in the responsive part. When changing the width to mobile size and toggle the menu and then drag the windowsize back to desktop the layout gets messed up. all the elements does not fall back into place. Maybe its becuse when you close the sidebar its get set to display none, and when changing size its still null so the grid gets messed up? So i just tested to set the display to nothing and now it works. So when hitting the close button it does display:''; instead of display:'none;

please give code i want see and fix error

good bro just change your vscode theme .

Table for begginers:


//fill orders in table
Orders.forEach(order =>{
const tr = document.createElement('tr');
const trContent = `
<td>${order.productName}</td>
<td>${order.productNumber}</td>
<td>${order.paymentStatus}</td>
<td class="${order.shipping === 'Declined' ? 'danger' :
order.shipping === 'Pending' ? 'warning' :
'primary'}">${order.shipping}</td>
<td class="primary">Details</td>
`;
tr.innerHTML = trContent;
document.querySelector('table tbody').appendChild(tr);


})

lovely video. learnt a lot of new things

老外的教程简单明了 确实有可供借鉴之处。good

How do I leave dark mode if it is activated on all pages ?

can you give me please code sourse od css Because the link in the description is not working

Bro can you do it using React?

Super

Where is the source code

How do you make the active highlight for the sidebar nav items change when you click the different pages?

This tutorial is great!!! Thanks for sharing

I tried copying everything he did and the results is different

All the code is wrong

hey how would i add this to my main website?

It really helped me build such a great UI and understood responsiveness concepts very well. Learnt something new. Looking forward to have such content in future too.

hello , i have an issue , is there anyway to contact you ? you can pick which ever platform you prefer , i just need help with the code,thanks

thank you so much for the video.

Thank you.

how i can get the source code for this project?

Beautiful beautiful beautiful 🎉. Thanks thanks thanks

Great man, I love your this 👍.

this project was very useful for my first-year web project.❤❤ Thank you!!!!!

Terminado y con algunas modificaciones es perfecto
gracias....

get in touch there's something I would like us to work on asap. Thanks

Please check email :)

do You have repository this project?

amazing!

Appriciated

Nice ❤

This is the first seeing this method of writing css

The guy is from Ghana! Respect!

Hi new subscriber here and I wanted to ask how did you come to construct this, cause you had all the set values(color, font weight, and so on) down for this video but was the way you did it at first trial?