From 92efa787054049a36186ee4e9908c5b747f0037a Mon Sep 17 00:00:00 2001
From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com>
Date: Fri, 21 Nov 2025 01:02:30 +0900
Subject: modified hugo.toml, modified recordings/recordings-plain.html,
 modified recordings/single.html

---
 hugo.toml                                |   1 +
 layouts/recordings/recordings-plain.html | 100 ++++++++++++++++++++++++++-----
 layouts/recordings/single.html           |  50 ++++++++++++++--
 3 files changed, 129 insertions(+), 22 deletions(-)

diff --git a/hugo.toml b/hugo.toml
index 708c8a6..4a46805 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -11,6 +11,7 @@ buildFuture = true
   [markup.goldmark]
     [markup.goldmark.renderer]
       hardWraps = true
+      unsafe = true
 
 [params]
 fancyTitle = "THESIAH" # title for frontpage, may include image
diff --git a/layouts/recordings/recordings-plain.html b/layouts/recordings/recordings-plain.html
index d3c273e..fcd67ff 100644
--- a/layouts/recordings/recordings-plain.html
+++ b/layouts/recordings/recordings-plain.html
@@ -5,6 +5,26 @@
     <title>{{ .Title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
+      :root {
+        --bg: #0d0d12;
+        --card: #171721;
+        --text: #e6e6f2;
+        --muted: #acacc1;
+        --border: #2b2b3c;
+        --badge-bg: #242437;
+        --badge-text: #f4f4ff;
+        --hover: #1f1f2f;
+      }
+      body.theme-light {
+        --bg: #f7f7f9;
+        --card: #ffffff;
+        --text: #141416;
+        --muted: #656575;
+        --border: #ddddf0;
+        --badge-bg: #efeff5;
+        --badge-text: #13131a;
+        --hover: #f2f2fb;
+      }
       body {
         font-family:
           system-ui,
@@ -16,6 +36,9 @@
         max-width: 900px;
         margin: 32px auto;
         padding: 0 16px;
+        background: var(--bg);
+        color: var(--text);
+        transition: background 0.2s ease, color 0.2s ease;
       }
       h1 {
         margin-bottom: 12px;
@@ -26,12 +49,13 @@
       }
       a {
         text-decoration: none;
+        color: inherit;
       }
       a:hover {
         text-decoration: underline;
       }
       .meta {
-        color: #666;
+        color: var(--muted);
         margin-top: 4px;
       }
       video {
@@ -46,19 +70,25 @@
       }
       .badge {
         font-size: 0.8rem;
-        border: 1px solid #ccc;
-        border-radius: 6px;
-        padding: 2px 6px;
+        border: 1px solid var(--border);
+        border-radius: 999px;
+        padding: 3px 10px;
         margin-left: 6px;
+        background: var(--badge-bg);
+        color: var(--badge-text);
       }
       .folder-section {
         margin: 16px 0;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        background: #f9f9f9;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        background: var(--card);
+        box-shadow: 0 12px 28px rgba(8, 8, 15, 0.25);
+      }
+      body.theme-light .folder-section {
+        box-shadow: 0 18px 32px rgba(0, 0, 0, 0.08);
       }
       .folder-header {
-        padding: 8px 12px;
+        padding: 10px 14px;
         cursor: pointer;
         font-weight: 600;
         display: flex;
@@ -66,26 +96,26 @@
         align-items: center;
       }
       .folder-header:hover {
-        background: #f0f0f0;
+        background: var(--hover);
       }
       .folder-name {
-        color: #333;
+        color: var(--text);
       }
       .folder-count {
-        color: #666;
+        color: var(--muted);
         font-size: 0.9rem;
         font-weight: normal;
       }
       .folder-content {
-        padding: 0 12px 12px;
+        padding: 0 14px 14px;
         margin: 0;
-        border-top: 1px solid #eee;
-        background: white;
+        border-top: 1px solid var(--border);
+        background: var(--card);
       }
       .folder-content li {
         margin: 8px 0;
         padding: 4px 0;
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid var(--border);
       }
       .folder-content li:last-child {
         border-bottom: none;
@@ -97,6 +127,18 @@
       li.folder-section[data-restricted="true"].allowed {
         display: block;
       }
+      .top-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+      #theme-toggle {
+        border: none;
+        cursor: pointer;
+        font-weight: 600;
+      }
     </style>
     <script>
       // 즉시 실행: 제한된 폴더 숨기기 (FOUC 방지)
@@ -156,7 +198,12 @@
     </script>
   </head>
   <body>
-    <h1>{{ .Title }}</h1>
+    <div class="top-bar">
+      <div>
+        <h1>{{ .Title }}</h1>
+      </div>
+      <button id="theme-toggle" class="badge" style="border:none;cursor:pointer">Light mode</button>
+    </div>
 
     <!-- 섹션 소개 글 -->
     <div class="content">{{ .Content }}</div>
@@ -665,5 +712,26 @@
         });
       });
     </script>
+    <script>
+      (function() {
+        const stored = localStorage.getItem('theme');
+        if (stored === 'light') {
+          document.body.classList.add('theme-light');
+        }
+        const toggle = document.getElementById('theme-toggle');
+        const updateLabel = () => {
+          if (!toggle) return;
+          toggle.textContent = document.body.classList.contains('theme-light') ? 'Dark mode' : 'Light mode';
+        };
+        updateLabel();
+        if (toggle) {
+          toggle.addEventListener('click', () => {
+            document.body.classList.toggle('theme-light');
+            localStorage.setItem('theme', document.body.classList.contains('theme-light') ? 'light' : 'dark');
+            updateLabel();
+          });
+        }
+      })();
+    </script>
   </body>
 </html>
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>
-- 
cgit v1.2.3