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:

or

CSS:

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

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