Basic knowledge of HTML (enough to make a simple website or HTML document). Knowledge of what HTML elements are, and the basics of how to use them
Basic knowledge of CSS, enough to be able to create/alter classes: .example-class { color: blue; font-size: 16px; }, and IDs, as well as basic knowledge of how CSS styling works
Basic knowledge of what Javascript is, and the ability to copy + paste Javascript into your website (either in a ".js" file or inside <script> tags in your HTML)
Note that you will also need to add some kind of class to the opening <body> tag of your HTML page that will signify the default theme (in this case the "light theme"). In this code, I will be assuming that your body tag looks like this: <body class="body--light-mode">
, however you can name the class whatever you want (for example: moonflute--light-mode, light-mode, default-theme, body--default-theme etc.), just make sure that all references to your "default theme" (in this case "light mode", with the class body--light-mode) and your "auxiliary theme" (in this case "dark mode" with the class body--dark-mode) are changed to your new class names!
Paste the below HTML somewhere on the page that you want to include a theme toggle on. Feel free to edit the HTML as desired.
CSS
Your CSS will have two parts: your default, or "light mode" CSS (or "dark mode" if your website has a darker theme by default, and you want to add a lighter theme), and then your auxiliary theme CSS (in this case, "dark mode" CSS). Your default CSS can look like anything you like, but just be sure to keep in mind that you want to write it with the ability to switch themes in mind.
If you write CSS that's too complicated, or doesn't pay attention to/consider CSS rule specificity, this will make things more difficult, but that goes for writing any CSS: over-complicated, tangled up CSS is difficult to work with. When you can, try to write CSS with re-usability and consistency in mind, such as using consistent naming patterns/conventions for your classes and IDs.
It's also a good idea to define CSS variables for greater consistency, but feel free to replace variables with hard-coded values (e.g. instead of .body--dark-mode {color: var(--dark-mode-color);} you can just replace var(--dark-mode-color) with whatever color you want: .body--dark-mode {color: yellowgreen;}).
Here is the dark mode CSS:
Jquery
You need Jquery for this code, but if you would prefer the vanilla Javascript version, see the next section.
If you don't have Jquery yet, but you want to add it, just add this import somewhere inside your <head></head> tags, since this version will definitely work with the code I've written.or if you want the most up to date, get the latest version by going to code.jquery.com and select the version you want; for example "Jquery Core" latest version "slim minified"):
You can either put this Jquery at the bottom of your HTML page (just before the </body> closing tag), or you can take only what is between the <script> tags and add that to a Javascript file that you would then import using something like <script src="/path/to/file.js" type="text/javascript"></script>
Vanilla Javascript
This is the same code as above but in plain Javascript instead of Jquery. I personally prefer the Jquery, because it is easier to read and faster to write. This Javascript should do the same thing, although it is marignally less robust than the Jquery above (mostly in reference to the 'DOMContentLoaded' bit, but I wouldn't actually worry about it).