Toggle to Dark Theme Websites.

Custom HTML properties:

-- we can define our own custom properties in HTML element

-- and then CSS can fetch the value to that property and stlye it accordingly.

[data-x = 'value]{
............
}

Dark mode

HMTL:

 <main data-theme='dark' > </main>
  or
 <div class='App' data-theme='dark'> </div>

CSS:

:root{
 --bg-color:pink;
 --text-color: blue;
}

[data-theme='dark'] {
 --bg-color:red;
 --text-color:green;
}