diff --git a/themes/plain/layouts/_default/baseof.html b/themes/plain/layouts/_default/baseof.html
index d6f3390..ee5e9ec 100644
--- a/themes/plain/layouts/_default/baseof.html
+++ b/themes/plain/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html color-mode="light">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,7 +8,7 @@
 
   <meta name="title" content="{{ with .Title }}{{ . }}{{ else }}{{ .Site.Title }}{{ end }}" />
   <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
-  <meta name="keywords" content="{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}" />
+  <meta name="keywords" content='{{ if .IsPage}}{{ range $index, $tag := .Params.tags }}{{ $tag }},{{ end }}{{ else }}{{ range $plural, $terms := .Site.Taxonomies }}{{ range $term, $val := $terms }}{{ printf "%s," $term }}{{ end }}{{ end }}{{ end }}' />
 
   {{- partial "style.html" . -}}
 
@@ -34,7 +34,7 @@
 <body>
   {{ if .IsHome }}
     <header>
-      <a href="{{ "" | relURL }}" class="title">
+      <a href='{{ "" | relURL }}' class="title">
         <h2>{{ .Site.Title }}</h2>
       </a>
     </header>
@@ -42,6 +42,10 @@
   <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)}`));
diff --git a/themes/plain/layouts/partials/style.html b/themes/plain/layouts/partials/style.html
index 5ef552a..2e6b806 100644
--- a/themes/plain/layouts/partials/style.html
+++ b/themes/plain/layouts/partials/style.html
@@ -1,25 +1,57 @@
 <!-- <link rel="stylesheet" href="/css/syntax.css"> -->
+
 <style>
   @import "/css/syntax.css" not (prefers-color-scheme: dark);
   @import "/css/syntax-dark.css" (prefers-color-scheme: dark);
+  @font-face {
+    font-family: SUSE;
+    src: url("/suse.woff2");
+  }
 </style>
+
 <style>
-  body {
-    font-family: "Inter", "Pretendard", sans-serif;
-    font-size: 16px;
-    margin: auto;
-    padding: 20px;
-    max-width: 720px;
-    text-align: left;
-    background-color: white;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    line-height: 1.8;
+  :root[color-mode="light"] {
+      --primary-bg-color: white;
+      --primary-text-color: black;
+      --link-color: #3273dc;
+      --blockquote-border-color: #999;
+      --blockquote-text-color: #222;
+      --code-bg-color: #EDEDED;
+      --title-color: black;
+      --post-author-color: #BB0;
+      --post-date-color: #444;
+      --post-divider-color: black;
+      --textarea-bg-color: white;
+      --textarea-text-color: black;
   }
 
-  /* h1, h2, h3, h4, h5, h6, b, strong {
-    font-weight: 400;
-  } */
+  :root[color-mode="dark"] {
+      --primary-bg-color: #242424;
+      --primary-text-color: white;
+      --link-color: #8cc2dd;
+      --blockquote-text-color: #ccc;
+      --code-bg-color: #555;
+      --title-color: #FFF;
+      --post-date-color: #AAA;
+      --post-divider-color: white;
+      --textarea-bg-color: #252525;
+      --textarea-text-color: #ddd;
+  }
+
+  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);
+  }
 
   h1 { font-size: 26px; }
   h2 { font-size: 24px; }
@@ -28,138 +60,154 @@
   h5 { font-size: 18px; }
 
   a {
-    color: #3273dc;
+      color: var(--link-color);
   }
 
   .katex { 
-    font-size: 16px !important;
-    padding: 0 2px;
+      font-size: 16px !important;
+      padding: 0 2px;
   }
 
   .date {
-    font-family: monospace;
-    font-size: 14px;
+      font-family: monospace;
+      font-size: 14px;
   }
 
   .title {
-    color: black;
-    text-decoration: none;
+      color: var(--title-color);
+      text-decoration: none;
   }
 
   ul.blog-posts {
-    font-size: 16px;
-    color: #0;
-    list-style-type: none;
-    padding: unset;
+      font-size: 16px;
+      color: #0;
+      list-style-type: none;
+      padding: unset;
   }
 
   ul.blog-posts li a:visited {
-    color: #8b6fcb;
+      color: #8b6fcb;
   }
 
   .post-header {
-    margin: 10px 0;
-    padding-bottom: 12px;
-    padding-top: 18px;
+      margin: 10px 0;
+      padding-bottom: 12px;
+      padding-top: 18px;
   }
 
   .post-header .post-title {
-    font-size: 24px;
-    font-weight: bold;
+      font-size: 24px;
+      font-weight: bold;
   }
-  
+
   .post-header .post-author {
-    font-size: 14px;
-    color: #BB0;
+      font-size: 14px;
+      color: var(--post-author-color);
   }
 
   .post-header .post-date {
-    font-family: monospace;
-    color: #444;
-    font-size: 14px;
+      font-family: monospace;
+      color: var(--post-date-color);
+      font-size: 12px;
+      font-weight: 450;
   }
 
   .post-divider {
-    background-color: black;
-    height: 1px;
-    width: 100%;
-    margin-bottom: 40px;
+      background-color: var(--post-divider-color);
+      height: 1px;
+      width: 100%;
+      margin-bottom: 40px;
   }
 
   table {
-    width: 100%;
+      width: 100%;
   }
 
   img {
-    max-width: 100%;
+      max-width: 100%;
   }
 
   code {
-    padding: 1px 4px;
-    margin: auto 2px;
-    background-color: #EDEDED;
-    font-size: 14px;
-    border-radius: 4px;
+      padding: 1px 4px;
+      margin: auto 2px;
+      background-color: var(--code-bg-color);
+      font-size: 14px;
+      border-radius: 4px;
   }
 
   pre code {
-    background-color: unset;
-    display: block;
-    padding: 20px;
-    white-space: pre-wrap;
-    font-size: 14px;
-    overflow-x: auto;
+      background-color: unset;
+      display: block;
+      padding: 20px;
+      white-space: pre-wrap;
+      font-size: 14px;
+      overflow-x: auto;
   }
 
   div.highlight pre {
-    border-radius: 10px;
+      border-radius: 10px;
   }
-  
+
   div.highlight code {
-    color: unset;
+      color: unset;
   }
 
   blockquote {
-    border-left: 1px solid #999;
-    color: #222;
-    padding-left: 20px;
-    font-style: italic;
+      border-left: 1px solid var(--blockquote-border-color);
+      color: var(--blockquote-text-color);
+      padding-left: 20px;
+      font-style: italic;
   }
-  
-  @media (prefers-color-scheme: dark) {
-    body {
-      background-color: #222;
-      color: white;
-    }
 
-    a {
-      color: #8cc2dd;
-    }
+  textarea,
+  input {
+      background-color: var(--textarea-bg-color);
+      color: var(--textarea-text-color);
+  }
+  .utils {
+    border-top: 1px solid;
+    border-top-color: var(--border-color);
+    margin-top: 32px;
+    padding-top: 12px;
+    display: flex;
+  }
 
-    blockquote {
-      color: #ccc;
-    }
+  .utils #copy {
+    font-size: 10px;
 
-    code {
-      background-color: #555;
-    }
+    align-self: flex-start;
+    margin-right: auto;  
+  }
 
-    textarea,
-    input {
-      background-color: #252525;
-      color: #ddd;
-    }
-
-    .title {
-      color: #FFF;  
-    }
-
-    .post-header .post-date {
-      color: #AAA;
-    }
-
-    .post-divider {
-      background-color: white;
-    }
+  .utils #toggleColor {
+    font-size: 8px;
 
+    align-self: flex-start;
+    margin-left: auto; 
+  }
 </style>
+
+<script type="text/javascript">
+  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") {
+        document.documentElement.setAttribute("color-mode", "light");
+        localStorage.setItem("theme", "light");
+      } else {
+        document.documentElement.setAttribute("color-mode", "dark");
+        localStorage.setItem("theme", "dark");
+      }
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/themes/plain/static/suse.woff2 b/themes/plain/static/suse.woff2
new file mode 100644
index 0000000..5d15e8e
Binary files /dev/null and b/themes/plain/static/suse.woff2 differ
