Dark Light Mode Page | Dark Theme Page | Light & Dark Modes | Toggle Light/dark | Page In Darkmode | Switch To Dark Theme | Dark/light Switch Page | Dark-light Toggle Plz | Theme Switch Html | Change Theme In Html | Toggle Theme Html | Html Theme Change | Switch Theme Code | Theme Toggle Html | How To Switch Themes | Html Theme Swap | Dark Mode Toggle | Dark Mode Switch | Toggle Night Mode | Switch To Dark | Dark Theme Enable | Enable Dark Mode | Night Mode On Off | Turn On/off Dark | Html Night Mode | Html Dark Theme | Dark Mode Html | Night Mode In Html | Html Nighttime View | Enable Night Mode Html | How Do Html Nightmode | Night Mode For Html

HTML / CSS / JS Open Kit Simulator ↗ All recipes

About this recipe

Libraries / imports

No imports detected

Hardware / pins

No physical pins or components referenced

Key API calls

localStorage() document.body() document.getElementById() addEventListener()

How to run

Press Render preview — renders live in a sandboxed iframe with mocked /api/*.

Editor html edits auto-save

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Theme</title>
<style>
  :root { --bg:#fff; --fg:#0f172a; --accent:#0ea5e9; }
  body.dark { --bg:#0b1220; --fg:#f1f5f9; }
  body { background:var(--bg); color:var(--fg); font-family:system-ui;
         margin:0; min-height:100vh; padding:32px;
         transition:background .3s, color .3s; }
  button{ background:var(--accent); color:#fff; border:0; padding:10px 18px;
          border-radius:10px; font-weight:800; cursor:pointer; }
</style></head><body>
<h1>Hello, world</h1>
<p>Try the toggle — your choice is remembered next time you open the page.</p>
<button id="t">🌙 Toggle theme</button>
<script>
  const saved = localStorage.getItem('theme');
  if (saved === 'dark') document.body.classList.add('dark');
  document.getElementById('t').addEventListener('click', () => {
    document.body.classList.toggle('dark');
    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
  });
</script></body></html>

Output ready

Output will appear here after you click Run.

About this recipe

Libraries / imports

Hardware / pins

Key API calls

How to run

We use cookies to make DIY KIT work.