1 files changed, 44 insertions, 6 deletions
diff --git a/layouts/recordings/single.html b/layouts/recordings/single.html
index 3e9a825..c3632d1 100644
--- a/layouts/recordings/single.html
+++ b/layouts/recordings/single.html
@@ -5,18 +5,34 @@
   <title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
-    body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7}
+    :root{
+      --bg:#0c0c12;
+      --text:#e5e5eb;
+      --muted:#a1a1b5;
+      --border:#2e2e43;
+      --btn-bg:#1c1c2a;
+      --btn-text:#f6f6ff;
+    }
+    body.light{
+      --bg:#ffffff;
+      --text:#1c1c1c;
+      --muted:#666;
+      --border:#ddd;
+      --btn-bg:#f3f3f3;
+      --btn-text:#333;
+    }
+    body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7;background:var(--bg);color:var(--text);transition:background .2s,color .2s}
     header,footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 20px}
-    a{text-decoration:none} a:hover{text-decoration:underline}
-    .muted{color:#666;font-size:.9rem}
+    a{text-decoration:none;color:inherit} a:hover{text-decoration:underline}
+    .muted{color:var(--muted);font-size:.9rem}
     .nav{display:flex;gap:8px;flex-wrap:wrap}
-    .btn{border:1px solid #ccc;border-radius:8px;padding:6px 10px}
+    .btn{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--btn-bg);color:var(--btn-text)}
     h1{margin:0 0 6px}
     .content :is(h1,h2,h3){margin-top:1.2em}
     .content img, .content video{max-width:100%;height:auto}
     /* 모바일에서 줄바꿈 조정 */
     @media (max-width: 768px) {
-      .content br {
+      .content br:not(.keep) {
         display: none;
       }
       .content p {
@@ -35,7 +51,10 @@
       {{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }}
       <a class="btn" href="{{ $back }}">← Back</a>
     </div>
-    <div class="muted">{{ .Date.Format "2006-01-02" }}</div>
+    <div class="nav">
+      <button id="theme-toggle" class="btn" type="button">Light mode</button>
+      <span class="muted">{{ .Date.Format "2006-01-02" }}</span>
+    </div>
   </header>
 
   {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
@@ -88,5 +107,24 @@
   </script>
   {{ end }}
 
+  <script>
+    (function(){
+      const stored = localStorage.getItem('theme');
+      if(stored === 'light') document.body.classList.add('light');
+      const btn = document.getElementById('theme-toggle');
+      const updateLabel = () => {
+        if(!btn) return;
+        btn.textContent = document.body.classList.contains('light') ? 'Dark mode' : 'Light mode';
+      };
+      updateLabel();
+      if(btn){
+        btn.addEventListener('click', ()=>{
+          document.body.classList.toggle('light');
+          localStorage.setItem('theme', document.body.classList.contains('light') ? 'light' : 'dark');
+          updateLabel();
+        });
+      }
+    })();
+  </script>
 </body>
 </html>