diff --git a/_config.yml b/_config.yml
index 4a92f3e55..d886c326d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,7 +7,7 @@ lang: en-US # default lang
 timezone: Asia/Jakarta # set your timezone
 image: assets/img/ogp.png # This image used for Open Graph more info https://ogp.me/
 repo: https://github.com/piharpi/jekyll-klise # site repo [optional]
-mode: dark # default theme "dark" | "light"
+mode: dark # default theme "dark" | "light" | "system" (follow system theme)
 
 # Profile settings
 author:
diff --git a/assets/js/main.js b/assets/js/main.js
index b58aca9eb..2ee48249c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -2,6 +2,8 @@
   // Theme switch
   const body = document.body;
   const lamp = document.getElementById("mode");
+  const themeMode = localStorage.getItem("theme");
+  const systemDarkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
   const toggleTheme = (state) => {
     if (state === "dark") {
@@ -15,9 +17,25 @@
     }
   };
 
-  lamp.addEventListener("click", () =>
-    toggleTheme(localStorage.getItem("theme"))
-  );
+  const systemThemeToToggle = (e) => {
+    if (e.matches) {
+      toggleTheme("light")
+    } else {
+      toggleTheme("dark")
+    }
+  }
+    
+  if (themeMode !== "system") {
+    lamp.addEventListener("click", () =>
+      toggleTheme(localStorage.getItem("theme"))
+    );
+  } else {
+    lamp.remove();
+    systemThemeToToggle(systemDarkModePreference);
+    systemDarkModePreference.addEventListener("change", e => {
+      systemThemeToToggle(e);
+    });
+  }
 
   // Blur the content when the menu is open
   const cbox = document.getElementById("menu-trigger");