What it shows
A button runs a few lines of JavaScript that switch a CSS class, and localStorage keeps the choice for the next visit. It is a first step from static pages to interactive ones.
The science
JavaScript runs in the browser and can change the page. Adding or removing a class on the body with classList.toggle lets CSS rules for that class apply or stop applying, which changes all colours at once. The localStorage object saves small text values in the browser, so the choice survives closing the page.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- A notebook and a pencil
Safety
This project uses safe, everyday materials. Still, read the rules below with a parent before you start.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create mode.html with <h1>Reading page</h1>, a paragraph of text, and <button id="mode">Dark mode</button> inside body.
In a <style> block set body { background: white; color: #222; transition: 0.3s; } and add body.dark { background: #111; color: #eee; }.
Before the closing </body> add a <script> tag.
Inside it write var btn = document.getElementById("mode"); to find the button.
Write btn.onclick = function () { document.body.classList.toggle("dark"); localStorage.setItem("dark", document.body.classList.contains("dark")); };.
Below it write if (localStorage.getItem("dark") === "true") { document.body.classList.add("dark"); } to restore the choice at load.
Open the page, click the button, then refresh with F5 and check that the dark colours remain.
If it does not remember in your browser, open the page from a small local server or another browser, because some browsers limit storage for files opened directly.
What you should see
Clicking the button flips the page between light and dark colours, and after a refresh the page opens in the last chosen mode.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What does classList.toggle do?
Adds the class if absent and removes it if present.
2Why does one class change many colours?
The CSS rules for body.dark apply to the whole page.
3What is localStorage?
A small store in the browser for saving text between visits.
4Why is the script placed at the end of body?
So the button exists before the script looks for it.
Take it further
Choose the first mode automatically with window.matchMedia("(prefers-color-scheme: dark)").matches.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn
Find out more about computing and coding
Free, well-known places to explore the subject further. Ask a grown-up before you sign up for anything or type your name anywhere.