diff --git a/README.md b/README.md
index 6d104b4..34bbfec 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,8 @@ A simple notes app that runs entirely in your web browser. There is nothing to i
 2. Double-click `index.html`. It opens in your web browser (Chrome, Firefox, Edge, Safari, and others all work).
 3. Click **+ New** and start writing.
 
+Prefer a darker screen? Click **🌙 Dark mode** at the top of the editor (click **☀️ Light mode** to switch back). Your choice is remembered next time you open the app. Until you pick one, the app follows your computer's own light/dark setting.
+
 Shortcut: **Ctrl + Alt + N** (or **Cmd + Option + N** on a Mac) creates a new note.
 
 ## Where are my notes stored?
diff --git a/index.html b/index.html
index a18bd35..68e83bd 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,15 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Notes</title>
+<script>
+  // Apply the remembered light/dark choice before the page is drawn, so it doesn't flash.
+  try {
+    var savedTheme = localStorage.getItem("simple-notes-app.theme");
+    if (savedTheme === "dark" || savedTheme === "light") {
+      document.documentElement.setAttribute("data-theme", savedTheme);
+    }
+  } catch (e) {}
+</script>
 <style>
   :root {
     --bg: #f6f6f4;
@@ -14,9 +23,24 @@
     --accent: #3b6ef5;
     --selected: #e8eefe;
     --danger: #d64545;
+    color-scheme: light;
+  }
+  /* Dark colors: used when chosen with the toggle button, or when the
+     computer is set to dark mode and no choice has been made yet. */
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+    --bg: #1c1c1e;
+    --panel: #242426;
+    --border: #3a3a3c;
+    --text: #eee;
+    --muted: #999;
+    --accent: #6b93ff;
+    --selected: #2f3a55;
+    --danger: #ff6b6b;
   }
   @media (prefers-color-scheme: dark) {
-    :root {
+    :root:not([data-theme="light"]) {
+      color-scheme: dark;
       --bg: #1c1c1e;
       --panel: #242426;
       --border: #3a3a3c;
@@ -174,6 +198,7 @@
 <main id="editor">
   <div id="editor-top">
     <span id="status"></span>
+    <button id="theme-btn" type="button" title="Switch between light and dark mode"></button>
     <button id="delete-btn" class="danger">Delete</button>
   </div>
   <input id="title" type="text" placeholder="Title" aria-label="Note title">
@@ -190,6 +215,7 @@
 
   var STORAGE_KEY = "simple-notes-app.notes";
   var SELECTED_KEY = "simple-notes-app.selected";
+  var THEME_KEY = "simple-notes-app.theme";
 
   var notes = [];
   var selectedId = null;
@@ -204,6 +230,7 @@
   var statusEl = $("status");
   var deleteBtn = $("delete-btn");
   var placeholderEl = $("placeholder");
+  var themeBtn = $("theme-btn");
 
   // ---------- Storage ----------
 
@@ -387,8 +414,38 @@
     scheduleSave();
   }
 
+  // ---------- Light / dark mode ----------
+
+  var systemDark = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+
+  function currentTheme() {
+    var chosen = document.documentElement.getAttribute("data-theme");
+    if (chosen === "dark" || chosen === "light") return chosen;
+    return systemDark && systemDark.matches ? "dark" : "light";
+  }
+
+  function renderThemeButton() {
+    var dark = currentTheme() === "dark";
+    themeBtn.textContent = dark ? "☀️ Light mode" : "🌙 Dark mode";
+    themeBtn.setAttribute("aria-label", dark ? "Switch to light mode" : "Switch to dark mode");
+  }
+
+  function toggleTheme() {
+    var next = currentTheme() === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", next);
+    try { localStorage.setItem(THEME_KEY, next); } catch (e) {}
+    renderThemeButton();
+  }
+
   // ---------- Events ----------
 
+  themeBtn.addEventListener("click", toggleTheme);
+  if (systemDark) {
+    var onSystemChange = function () { renderThemeButton(); };
+    if (systemDark.addEventListener) systemDark.addEventListener("change", onSystemChange);
+    else if (systemDark.addListener) systemDark.addListener(onSystemChange);
+  }
+
   $("new-btn").addEventListener("click", newNote);
   $("placeholder-new").addEventListener("click", newNote);
   deleteBtn.addEventListener("click", deleteNote);
@@ -420,6 +477,15 @@
 
   // Keep multiple open tabs in sync.
   window.addEventListener("storage", function (e) {
+    if (e.key === THEME_KEY) {
+      if (e.newValue === "dark" || e.newValue === "light") {
+        document.documentElement.setAttribute("data-theme", e.newValue);
+      } else {
+        document.documentElement.removeAttribute("data-theme");
+      }
+      renderThemeButton();
+      return;
+    }
     if (e.key !== STORAGE_KEY) return;
     var keep = selectedId;
     load();
@@ -429,6 +495,7 @@
 
   // ---------- Start ----------
 
+  renderThemeButton();
   load();
   if (!findNote(selectedId)) {
     var first = sortedNotes()[0];