diff --git a/assets/icons/toggle-left.svg b/assets/icons/toggle-left.svg
new file mode 100644
index 0000000..c3048d4
--- /dev/null
+++ b/assets/icons/toggle-left.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="8" cy="12" r="2" />
+  <rect x="2" y="6" width="20" height="12" rx="6" />
+</svg>
+
+
diff --git a/assets/icons/toggle-right.svg b/assets/icons/toggle-right.svg
new file mode 100644
index 0000000..d3edd63
--- /dev/null
+++ b/assets/icons/toggle-right.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="16" cy="12" r="2" />
+  <rect x="2" y="6" width="20" height="12" rx="6" />
+</svg>
+
+
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index c0d7c0a..7cb7e83 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -128,6 +128,7 @@
     flex-direction: column;
     margin-top: 25px;
     overflow-y: auto;
+    flex-grow: 1;
 
     @media (min-width: $on-desktop-large) {
         margin-top: 30px;
@@ -205,3 +206,30 @@
         }
     }
 }
+
+.theme-dark {
+    #dark-mode-toggle {
+        color: var(--accent-color);
+        font-weight: 700;
+
+        .icon-tabler-toggle-left {
+            display: none;
+        }
+
+        .icon-tabler-toggle-right {
+            display: unset;
+        }
+    }
+}
+
+#dark-mode-toggle {
+    margin-top: auto;
+    color: var(--body-text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon-tabler-toggle-right {
+        display: none;
+    }
+}
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 1166a58..c1ddeb1 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -26,7 +26,7 @@
         width: 25%;
         margin-right: 1%;
         padding: var(--main-top-padding) 15px;
-        max-height: 100vh;
+        height: 100vh;
     }
 
     @media (min-width: $on-desktop) {
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 825be31..3e886fb 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -20,7 +20,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --section-separation: 40px;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --body-background: #303030;
         --accent-color: #ecf0f1;
         --accent-color-darker: #bdc3c7;
@@ -64,7 +64,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --small-card-padding: 25px;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --card-background: #424242;
         --card-background-selected: rgba(255, 255, 255, 0.16);
         --card-text-color-main: rgba(255, 255, 255, 0.9);
@@ -108,7 +108,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --table-border-color: #dadada;
     --tr-even-background-color: #efefee;
 
-    @media (prefers-color-scheme: dark) {
+    .theme-dark {
         --code-background-color: #272822;
         --code-text-color: rgba(255, 255, 255, 0.9);
 
@@ -129,4 +129,4 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
         0px 0px 1px rgba(0, 0, 0, 0.04);
-}
\ No newline at end of file
+}
diff --git a/assets/ts/darkmode.ts b/assets/ts/darkmode.ts
new file mode 100644
index 0000000..0ca35c8
--- /dev/null
+++ b/assets/ts/darkmode.ts
@@ -0,0 +1,29 @@
+export default () => {
+    const toggleDarkMode = document.getElementById('dark-mode-toggle');
+    const darkModeKey = 'StackDarkMode';
+    const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
+
+    let darkMode = false;
+
+    if (darkModeEnabled) {
+        darkMode = true;
+    }
+    else {
+        darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+    }
+
+    document.body.style.setProperty('transition', 'background-color .3s ease');
+
+    toggleDarkMode.addEventListener('click', (e) => {
+        darkMode = !darkMode;
+
+        if (darkMode) {
+            document.body.classList.add('theme-dark');
+        }
+        else {
+            document.body.classList.remove('theme-dark');
+        }
+
+        localStorage.setItem(darkModeKey, darkMode.toString());
+    })
+}
\ No newline at end of file
diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index c7ddaab..8d60b07 100644
--- a/assets/ts/main.ts
+++ b/assets/ts/main.ts
@@ -9,9 +9,12 @@
 import { createGallery } from "./gallery"
 import { getColor } from './color';
 import menu from './menu';
+import darkmode from "./darkmode";
 
 let Stack = {
     init: () => {
+        darkmode();
+        
         /**
          * Bind menu event
          */
diff --git a/i18n/en.toml b/i18n/en.toml
index 7f2036e..f00f938 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -20,4 +20,7 @@
     other = "Not Found"
 
 [notFoundSubtitle]
-    other = "This page does not exist."
\ No newline at end of file
+    other = "This page does not exist."
+
+[darkModeToggle]
+    other = "Dark Mode"
\ No newline at end of file
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index d8852e4..a4e280c 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -20,4 +20,7 @@
     other = "404 错误"
 
 [notFoundSubtitle]
-    other = "页面不存在"
\ No newline at end of file
+    other = "页面不存在"
+
+[darkModeToggle]
+    other = "暗色模式"
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1151e4e..21cdb4e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -2,6 +2,19 @@
 <html lang="{{ .Site.LanguageCode }}">
     {{- partial "head/head.html" . -}}
     <body class="{{ block `body-class` . }}{{ end }}">
+        <script>
+            (function() {
+                const darkModeKey = 'StackDarkMode';
+                const darkModeItem = localStorage.getItem(darkModeKey);
+                const darkModeEnabled = localStorage.getItem(darkModeKey) === 'true';
+                const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
+
+                if(darkModeItem && darkModeEnabled || !darkModeItem && supportDarkMode){
+                    document.body.classList.add('theme-dark');
+                }
+            })();
+        </script>
+
         <div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
             {{ partial "sidebar/left.html" . }}
             <main class="main full-width">
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
index 8991153..c525031 100644
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@@ -39,5 +39,11 @@
             </a>
         </li>
         {{ end }}
+
+        <li id="dark-mode-toggle">
+            {{ (resources.Get "icons/toggle-left.svg").Content | safeHTML }}
+            {{ (resources.Get "icons/toggle-right.svg").Content | safeHTML }}
+            <span>{{ T "darkModeToggle" }}</span>
+        </li>
     </ol>
 </aside>
\ No newline at end of file