diff --git a/site/deconference.html b/site/deconference.html
index 03146d2..0de7e7c 100644
--- a/site/deconference.html
+++ b/site/deconference.html
@@ -1,6 +1,16 @@
 <!doctype html>
 <html lang="sr">
   <head>
+    <script>
+      (function () {
+        const theme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (theme === "dark" || (!theme && prefersDark))
+          document.documentElement.classList.add("dark");
+      })();
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -36,7 +46,7 @@
     <title>Dekonferencija Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/deconference" />
   </head>
-  <body class="theme light">
+  <body>
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
diff --git a/site/scripts/main.js b/site/scripts/main.js
index bb3c960..94d8172 100644
--- a/site/scripts/main.js
+++ b/site/scripts/main.js
@@ -9,22 +9,23 @@ const imgs = document.getElementsByTagName("img");
 const main = document.getElementsByTagName("main")[0];
 const isMenuOpen = () => hamburger.classList.contains("open");
 const theme = window.localStorage.getItem("theme");
-const body = document.getElementsByClassName("theme")[0];
 
 /* Functions */
 
 const changeToDarkTheme = () => {
-  body.classList = "theme dark"
-  window.localStorage.setItem("theme", "dark");
+  document.documentElement.classList.add("dark");
   themeBtn?.setAttribute("title", "turn the light on");
-  Array.from(imgs).forEach((img) => img.src = img.src.replace("-light", "-dark"));
+  Array.from(imgs).forEach((img) => {
+    if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
+  });
 }
 
 const changeToLightTheme = () => {
-  body.classList = "theme light"
-  window.localStorage.setItem("theme", "light");
+  document.documentElement.classList.remove("dark");
   themeBtn?.setAttribute("title", "turn the light off");
-  Array.from(imgs).forEach((img) => img.src = img.src.replace("-dark", "-light"));
+  Array.from(imgs).forEach((img) => {
+    if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
+  });
 }
 
 const closeMenu = () => {
diff --git a/site/styles/style.css b/site/styles/style.css
index e1bd6a1..686553d 100644
--- a/site/styles/style.css
+++ b/site/styles/style.css
@@ -11,7 +11,7 @@
   --bg: var(--light-bg);
 }
 
-body.dark {
+html.dark {
   --border: var(--dark-border);
   --text: var(--dark-text);
   --bg: var(--dark-bg);
diff --git a/template/page-en.html b/template/page-en.html
index 7fa2832..b213d7f 100644
--- a/template/page-en.html
+++ b/template/page-en.html
@@ -1,6 +1,16 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <script>
+      (function () {
+        const theme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (theme === "dark" || (!theme && prefersDark))
+          document.documentElement.classList.add("dark");
+      })();
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -36,7 +46,7 @@
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
   </head>
-  <body class="theme light">
+  <body>
     <header>
       <a id="logo" href="/en/index">
         <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
diff --git a/template/page-sr.html b/template/page-sr.html
index d56a1bf..0290182 100644
--- a/template/page-sr.html
+++ b/template/page-sr.html
@@ -1,6 +1,16 @@
 <!doctype html>
 <html lang="sr">
   <head>
+    <script>
+      (function () {
+        const theme = localStorage.getItem("theme");
+        const prefersDark = window.matchMedia(
+          "(prefers-color-scheme: dark)",
+        ).matches;
+        if (theme === "dark" || (!theme && prefersDark))
+          document.documentElement.classList.add("dark");
+      })();
+    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -36,7 +46,7 @@
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
   </head>
-  <body class="theme light">
+  <body>
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
