Simplest way to Add Dark Theme to any Website

The Problem

I like fancy websites. You know websites that have great UI/UX, impressive load time speed, pretty animations, Scalable Vector Images, Dark theme and light theme toggle button.

But the problem is... I suck at CSS and JS (at this moment, I'm working on it duh 🙄). As a result, many tutorials and blog articles on how to implement these fancy features on a website aren't exactly for me.

The question is: what's the simplest, most basic way to add dark theme functionality to my website?
I'm also not interested in copying code I don't understand.

The Solution

The best way to learn they say is by building, so I woke up two days ago and was like, lets do this!
My personal website could use a redesign so I said to myself, I'll rebuild my website and add that a dark theme functionality to it.

I chose to follow a minimalist design for he website. After writing some basic HTML and CSS, I added the dark theme functionality with the following CSS code:

/* Light mode by System theme */
@media (prefers-color-scheme: light) {
    body {
        background-color: inherit;
        color: inherit;
    }
}

/* Dark mode by System theme*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: whitesmoke;
    }
}

prefers-color-scheme checks if the user has selected light or dark theme. The user can do this either via the operating system settings or via the browser settings.