Lamp Toggle — Light/Dark Mode CSS Animation with Source Code
The Lamp Toggle is a creative, thematic approach to implementing light and dark mode switching. Instead of a plain checkbox or a sun/moon icon, users click a glowing lamp button that illuminates the entire page. It uses CSS transitions on the background-color and a radial-gradient overlay to simulate a room being lit by a single overhead light source.
How It Works
A CSS class light-mode is toggled on the <body> element using classList.toggle() in JavaScript. All visual changes — the background brightening, the dark room overlay fading out, and the button glowing — are driven entirely by CSS sibling/descendant selectors targeting .light-mode body sub-elements and CSS transition properties.
Use Cases
- Creative portfolio sites with thematic dark/light switching
- Interactive demos and code showcases
- E-commerce product pages with ambient lighting effects
- Games or storytelling websites with atmosphere changes
How to Use in Your Project
- Open the Source Code tab and copy the complete code
- Paste the HTML into your page and the CSS into your stylesheet
- Link the JS snippet to your
<script>block - Customize the light-mode background color (
#fdfbf7) and the lamp glow color (#f1c40f) to match your brand
Frequently Asked Questions
Can I use this for a real website dark mode toggle?
Absolutely. Simply extend the .light-mode CSS rules to encompass all your website’s text and background color variables. The JavaScript classList.toggle() is the same pattern used by professional dark-mode implementations. You can also persist the preference using localStorage.setItem('theme', 'light').
How do I change the glow color of the lamp in light mode?
In the CSS, find .body.light-mode .lamp-btn and change the box-shadow colors. Replace the rgba(241, 196, 15, ...) values (yellow) with your desired glow color.
Can I animate the transition more smoothly?
The speed of all transitions is controlled by the transition property on each element. Increase the 0.6s value to 1s or 1.5s for a slower, dreamier fade. The ease timing function provides a natural deceleration.
