Fix Theme

themes/plain/layouts/_default/baseof.html

@@ -42,10 +42,6 @@
   <main>
   {{- block "main" . }}{{- end }}
   </main>
-  <div class="utils">
-    <div id="copy">&copy;morgan.kr</div>
-    <div id="toggleColor">Toggle Darkmode</div>
-  </div>
   <script>
     console.log("Sending statistics to server. Personal info is redacted afterwards.");
     console.log(fetch(`https://log.blog.morgan.kr/?url=${encodeURIComponent(document.location)}&referer=${encodeURIComponent(document.referrer)}`));

themes/plain/layouts/_default/list.html

@@ -21,4 +21,9 @@
 {{- if .IsHome }}
   <a href="/blogs" style="font-size:10px; color: #AAA; bottom: 12px; position: fixed;">-</a>
 {{- end }}
+
+  <div class="utils">
+    <div id="copy">&copy;morgan.kr</div>
+    <div id="toggleColor">Toggle Darkmode</div>
+  </div>
 {{ end }}

themes/plain/layouts/partials/style.html

@@ -26,7 +26,7 @@
   }
 
   :root[color-mode="dark"] {
-      --primary-bg-color: #242424;
+      --primary-bg-color: #181816;
       --primary-text-color: white;
       --link-color: #8cc2dd;
       --blockquote-text-color: #ccc;
@@ -39,18 +39,21 @@
   }
 
   body {
-      font-family: "SUSE", "Inter", "Pretendard", sans-serif;
-      font-size: 1.1rem;
-      letter-spacing: 0.28px;
-      margin: auto;
-      padding: 20px;
-      max-width: 780px;
-      text-align: left;
-      background-color: var(--primary-bg-color);
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      line-height: 1.8;
-      color: var(--primary-text-color);
+    font-family: "SUSE", "Inter", "Pretendard", sans-serif;
+    font-size: 1.1rem;
+    letter-spacing: 0.28px;
+    margin: auto;
+    padding: 20px;
+    max-width: 780px;
+    text-align: left;
+    background-color: var(--primary-bg-color);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    line-height: 1.8;
+    color: var(--primary-text-color);
+  }
+
+  main {
   }
 
   h1 { font-size: 26px; }
@@ -188,17 +191,17 @@
 </style>
 
 <script type="text/javascript">
+  const userPref = localStorage.getItem("theme");
+  if (userPref === "dark") {
+    document.documentElement.setAttribute("color-mode", "dark");
+  } else if (userPref === "light") {
+    document.documentElement.setAttribute("color-mode", "light");
+  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("color-mode", "dark");
+  }
+
   document.addEventListener("DOMContentLoaded", function() {
     const toggleButton = document.getElementById("toggleColor")
-    const userPref = localStorage.getItem("theme");
-
-    if (userPref === "dark") {
-      document.documentElement.setAttribute("color-mode", "dark");
-    } else if (userPref === "light") {
-      document.documentElement.setAttribute("color-mode", "light");
-    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      document.documentElement.setAttribute("color-mode", "dark");
-    }
 
     toggleButton.addEventListener("click", function() {
       if (document.documentElement.getAttribute("color-mode") === "dark") {