다크 라이트

Author: kenu

public/css/style2.css

@@ -13,6 +13,11 @@ body {
   font-family: Arial, sans-serif;
 }
 
+body.dark {
+  background-color: #121212;
+  color: #f5f5f5;
+}
+
 #wrap {
   max-width: 1200px;
   margin: auto;
@@ -30,6 +35,12 @@ footer {
   background-color: #f9f9f9;
 }
 
+body.dark header,
+body.dark .main,
+body.dark footer {
+  background-color: #1e1e1e;
+}
+
 header {
   display: flex;
   justify-content: space-between;
@@ -58,6 +69,10 @@ nav a {
   color: black;
 }
 
+body.dark nav a {
+  color: #f5f5f5;
+}
+
 aside {
   flex-grow: 1;
 }
@@ -79,6 +94,20 @@ aside {
   margin-top: 2.2rem;
 }
 
+#theme-toggle {
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+body.dark #theme-toggle {
+  background: #333;
+  color: #f5f5f5;
+  border-color: #555;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   header,

public/js/okdevtv.js

@@ -18,6 +18,11 @@ $(function () {
     console.log(data)
     $('#words').text(data.content)
   })
+
+  initTheme()
+  $('#theme-toggle').on('click', function () {
+    toggleTheme()
+  })
 })
 
 function sendMessage() {
@@ -98,3 +103,45 @@ if (!String.linkify) {
       .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>')
   }
 }
+
+function initTheme() {
+  try {
+    const saved = localStorage.getItem('okdevtv-theme')
+    let theme = saved
+    if (!theme) {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme = 'dark'
+      } else {
+        theme = 'light'
+      }
+    }
+    applyTheme(theme)
+  } catch (e) {
+    applyTheme('light')
+  }
+}
+
+function toggleTheme() {
+  const isDark = document.body.classList.contains('dark')
+  const next = isDark ? 'light' : 'dark'
+  applyTheme(next)
+  try {
+    localStorage.setItem('okdevtv-theme', next)
+  } catch (e) {}
+}
+
+function applyTheme(theme) {
+  if (theme === 'dark') {
+    document.body.classList.add('dark')
+    const btn = document.getElementById('theme-toggle')
+    if (btn) {
+      btn.textContent = 'Light'
+    }
+  } else {
+    document.body.classList.remove('dark')
+    const btn = document.getElementById('theme-toggle')
+    if (btn) {
+      btn.textContent = 'Dark'
+    }
+  }
+}

views/index.ejs

@@ -53,6 +53,9 @@
               <%= (user) ? 'My Page' : 'Login' %>
             </a>
           </li>
+          <li>
+            <button id="theme-toggle" type="button">Dark</button>
+          </li>
         </ul>
       </nav>
       <aside>