Light-dark mode project

These are the corresponding files for my three-part video series on creating your own custom light-dark mode theme with CSS variables and a little JavaScript.

Getting Started

Follow these instructions to code along with the project.

1. Navigate to the branch you want to download. (“Main” is the finished code.)
2. Click the green Code button to download the files for your desired branch.
3. Ensure you have Node JS on your machine. If you’re not sure, open a terminal and type node -v. You should get a number back if node is already installed. You’ll need at least node 12.0.0 to run ViteJS, the bundler used by the project. If you don’t have node or don’t have at least 12.0.0, go to nodejs.org, click either version to download it, and install it on your machine like any other program using the default settings.
4. Open the code in any code editor (VSCode is a great free option!)
5. Open a terminal and cd to the project directory. If you’re in VSCode, you can open a local terminal from the Terminal menu option.
6. Type npm install to install the required dependencies. Wait for them to install.
7. Type npm run dev to start the local development server (http://localhost:3000/ by default).
8. Code!

Helpful Links

• Live example: https://codinginpublic.dev/projects/light-dark/
• My channel: https://www.youtube.com/c/CodinginPublic