Dark mode support

[songz]

[evo777]

Dark mode for C0d3 is good.

[shockz09]

dark mode will be a good feature to implement , if i will get time from exams , i will try for sure :shipit:

[flacial]

off-topic: shipit invaded GitHub @mino323

[flacial]

What do you think about migrating from Bootstrap to https://tailwindcss.com/?

[shockz09]

@flacial

tailwind css will be much better in my opinion

[evo777]

Tailwind CSS is good.

[songz]

I added darkmode support to my note taking site, this is what I did: https://github.com/songz/noteapp/pull/30/files

[SlyBouhafs]

I think there's an easy way to achieve dark mode, if we have css color variables for light and dark mode, depending on what the client prefers, we can switch between light mode and dark mode using a toggle button by changing the data-theme attribute. Something like this:

html[data-theme="dark"] {
  --color-bg: #000000;
}

html[data-theme="light"] {
  --color-bg: #ffffff;
}

.element {
  background-color: var(--color-bg);
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
  }
}

This way, all we have to do is write new color variables and update our elements to use those colors to make the toggle switch work.