diff --git a/assets/css/cookies.css b/assets/css/cookies.css
deleted file mode 100644
index da2d1416..00000000
--- a/assets/css/cookies.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.cookies-message {
-  margin: 10px 0px;
-  font-size: 1.6rem;
-  text-align: center;
-  color: #232323;
-}
-
-.cookies-container {
-  position: fixed;
-  width: 100%;
-  bottom: 20px;
-  z-index: 1000;
-  display: none;
-}
-
-.cookies-content {
-  box-shadow: 0 1px 5px #6e6197;
-  background-color: #fff;
-  border: 1px solid #6e6197;
-  max-width: 50%;
-  border-radius: 5px;
-  padding: 10px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transform: translateY(1rem);
-  animation: slideUp 0.5s forwards;
-}
-
-.cookies-accept-button {
-  background-color: #6e6197;
-  color: #fff;
-  font-size: 1.6rem;
-  padding: 10px;
-  border-radius: 5px;
-  border: none;
-  margin: 0 10px;
-  font-weight: 700;
-}
-.cookies-accept-button:hover {
-  cursor: pointer;
-}
-
-@keyframes slideUp {
-  to {
-    transform: initial;
-    opacity: initial;
-  }
-}
-
-/*# sourceMappingURL=cookies.css.map */
diff --git a/assets/css/cookies.css.map b/assets/css/cookies.css.map
deleted file mode 100644
index c4b6b4a7..00000000
--- a/assets/css/cookies.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../sass/cookies.sass"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;EACI;IACI;IACA","file":"cookies.css"}
\ No newline at end of file
diff --git a/assets/css/dark_mode.css b/assets/css/dark_mode.css
deleted file mode 100644
index 979aa84a..00000000
--- a/assets/css/dark_mode.css
+++ /dev/null
@@ -1,70 +0,0 @@
-.body-dark-mode {
-  background-color: #232226;
-  color: #ffffff;
-}
-.body-dark-mode .header__subtitle {
-  color: #ffffff;
-}
-.body-dark-mode .header .github-corner {
-  color: #232226;
-}
-.body-dark-mode .main .cookies-content {
-  background-color: #3e3e3f;
-}
-.body-dark-mode .main .cookies-content .cookies-message {
-  color: #ffffff;
-}
-.body-dark-mode .main .cookies-content a {
-  color: #EEE7F9;
-}
-.body-dark-mode .main .card {
-  background-color: #3e3e3f;
-}
-.body-dark-mode .main .card__title {
-  color: #EEE7F9;
-}
-.body-dark-mode .main .card__description {
-  color: #ffffff;
-}
-.body-dark-mode .main .search .searchbar {
-  background-color: #3e3e3f;
-  color: #ffffff;
-}
-.body-dark-mode .main .search .searchbar__input {
-  color: #ffffff;
-}
-.body-dark-mode .main #tags-filter {
-  background-color: #3e3e3f;
-  color: #ffffff;
-}
-
-.button-dark-mode {
-  background-color: #6e6197;
-  color: #ffffff;
-  border: none;
-  border-radius: 5px;
-  padding: 10px 20px;
-  cursor: pointer;
-  position: absolute;
-  top: 20px;
-  right: 20px;
-}
-.button-dark-mode i {
-  font-size: 1.4rem;
-}
-
-.body-dark-mode .ph-sun,
-:not(.body-dark-mode) .ph-moon {
-  display: inline;
-}
-
-.body-dark-mode .ph-moon,
-:not(.body-dark-mode) .ph-sun {
-  display: none;
-}
-
-.body-dark-mode .fav__button {
-  color: #ffffff;
-}
-
-/*# sourceMappingURL=dark_mode.css.map */
diff --git a/assets/css/dark_mode.css.map b/assets/css/dark_mode.css.map
deleted file mode 100644
index 6699a322..00000000
--- a/assets/css/dark_mode.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../sass/dark_mode.sass","../sass/_variables.sass"],"names":[],"mappings":"AAEA;EACI,kBCHI;EDIJ,OCHI;;ADMA;EACI,OCPJ;;ADSA;EACI,OCXJ;;ADaA;EACI,kBCXD;;ADYC;EACI,OCfR;;ADgBI;EACI,OCFF;;ADIN;EACI,kBClBD;;ADoBC;EACI,OCRF;;ADSF;EACI,OCzBR;;AD4BI;EACI,kBC3BL;ED4BK,OC9BR;;AD+BQ;EACI,OChCZ;;ADkCA;EACI,kBCjCD;EDkCC,OCpCJ;;;ADsCR;EACI,kBC5BU;ED6BV,OCxCI;EDyCJ;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;AAAA;EAEI;;;AAEJ;AAAA;EAEI","file":"dark_mode.css"}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 2f27c774..1bca054d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,36 +1,112 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
-.body-dark-mode {
-  background-color: #232226;
-  color: #ffffff;
+.cookies-message {
+  margin: 10px 0px;
+  font-size: 1.6rem;
+  text-align: center;
+  color: var(--cookies-text-color);
 }
-.body-dark-mode .header__subtitle {
-  color: #ffffff;
+
+.cookies-container {
+  position: fixed;
+  width: 100%;
+  bottom: 20px;
+  z-index: 1000;
+  display: none;
+}
+
+.cookies-content {
+  box-shadow: 0 1px 5px #6e6197;
+  background-color: var(--cookies-background-color);
+  border: 1px solid #6e6197;
+  max-width: 50%;
+  border-radius: 5px;
+  padding: 10px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: translateY(1rem);
+  animation: slideUp 0.5s forwards;
+}
+.cookies-content a {
+  color: var(--cookies-link-color);
 }
 
-.button-dark-mode {
+.cookies-accept-button {
   background-color: #6e6197;
-  color: #ffffff;
-  border: none;
+  color: #fff;
+  font-size: 1.6rem;
+  padding: 10px;
   border-radius: 5px;
-  padding: 10px 20px;
+  border: none;
+  margin: 0 10px;
+  font-weight: 700;
+}
+.cookies-accept-button:hover {
   cursor: pointer;
-  position: absolute;
-  top: 20px;
-  right: 20px;
 }
-.button-dark-mode i {
-  font-size: 1.4rem;
+
+@keyframes slideUp {
+  to {
+    transform: initial;
+    opacity: initial;
+  }
+}
+html[data-theme=dark] {
+  --background-color: #232226;
+  --card-background-color: #3e3e3f;
+  --card-description-color: #ffffff;
+  --card-title-color: #eee7f9;
+  --cookies-background-color: #3e3e3f;
+  --cookies-link-color: #eee7f9;
+  --cookies-text-color: #ffffff;
+  --fav-button-color: #ffffff;
+  --link-color: #bdafdf;
+  --searchbar-background-color: #3e3e3f;
+  --searchbar-text-color: #ffffff;
+  --tags-filter-background-color: #3e3e3f;
+  --tags-filter-text-color: #ffffff;
+  --text-color: #ffffff;
 }
 
-.body-dark-mode .ph-sun,
-:not(.body-dark-mode) .ph-moon {
+html[data-theme-setting=dark] #change-theme-button .ph-desktop {
+  display: none;
+}
+html[data-theme-setting=dark] #change-theme-button .ph-moon {
   display: inline;
 }
+html[data-theme-setting=dark] #change-theme-button .ph-sun {
+  display: none;
+}
+
+html[data-theme=light] {
+  --background-color: #ffffff;
+  --card-background-color: #ffffff;
+  --card-description-color: #232226;
+  --card-title-color: #6e6197;
+  --cookies-background-color: #ffffff;
+  --cookies-link-color: #0000ff;
+  --cookies-text-color: #232226;
+  --fav-button-color: #6e6197;
+  --link-color: #bdafdf;
+  --searchbar-background-color: #f2f2f2;
+  --searchbar-text-color: #232226;
+  --tags-filter-background-color: #ffffff;
+  --tags-filter-text-color: #232226;
+  --text-color: #232226;
+}
 
-.body-dark-mode .ph-moon,
-:not(.body-dark-mode) .ph-sun {
+html[data-theme-setting=light] #change-theme-button .ph-desktop {
   display: none;
 }
+html[data-theme-setting=light] #change-theme-button .ph-moon {
+  display: none;
+}
+html[data-theme-setting=light] #change-theme-button .ph-sun {
+  display: inline;
+}
 
 * {
   margin: 0;
@@ -39,58 +115,33 @@
 }
 
 body {
-  background-color: #ffffff;
-  font-family: "Roboto", sans-serif;
   -webkit-font-smoothing: antialiased;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: "Roboto", sans-serif;
   padding: 40px 24px;
   transition: background-color 0.5s ease-in-out;
 }
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  background: #6e6197;
-}
-
-::-webkit-scrollbar-track {
-  background: #f2f2f2;
-}
-
-html {
-  font-size: 62.5%;
-}
-
-.header {
+body .header {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 24px;
 }
-.header__title img {
+body .header__title img {
   display: block;
   max-width: 100%;
   height: auto;
 }
-.header__subtitle {
+body .header__subtitle {
   font-size: 2rem;
   text-align: center;
-  color: #232226;
+  color: var(--text-color);
   font-weight: 400;
   transition: color 0.5s ease-in-out;
 }
-
-.fav__button {
-  font-size: 2.5rem;
-  width: 24px;
-  cursor: pointer;
-  color: #6e6197;
-}
-
-.main {
+body .main {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -100,13 +151,36 @@ html {
   margin: 0 auto;
 }
 
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: #6e6197;
+}
+
+::-webkit-scrollbar-track {
+  background: #f2f2f2;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+.fav__button {
+  font-size: 2.5rem;
+  width: 24px;
+  cursor: pointer;
+  color: var(--fav-button-color);
+}
+
 .search {
   margin: 30px 0;
   width: 100%;
 }
-
-.searchbar {
-  background-color: #f2f2f2;
+.search .searchbar {
+  background-color: var(--searchbar-background-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -117,25 +191,23 @@ html {
   margin-bottom: 16px;
   width: 100%;
 }
-
-.searchbar__icon {
+.search .searchbar__icon {
   width: 24px;
   height: 24px;
   fill: #9698a0;
 }
-
-.searchbar__input {
+.search .searchbar__input {
   font-family: "Roboto", sans-serif;
   border: none;
   border-radius: 4px;
   background-color: transparent;
   padding: 4px;
   flex: 1;
-  color: #232226;
+  color: var(--searchbar-text-color);
   font-size: 2rem;
   width: 100%;
 }
-.searchbar__input:focus {
+.search .searchbar__input:focus {
   outline: none;
 }
 
@@ -153,11 +225,11 @@ html {
 }
 
 #tags-filter {
-  background-color: #ffffff;
+  background-color: var(--tags-filter-background-color);
   border: 2px solid #6e6197;
   border-radius: 4px;
   padding: 8px;
-  color: #232226;
+  color: var(--tags-filter-text-color);
   font-size: 2rem;
 }
 #tags-filter:focus {
@@ -192,14 +264,14 @@ html {
   text-align: left;
   font-size: 10px;
   padding: 10px;
-  color: #3C306C;
+  color: #3c306c;
 }
 .msg .collumn-2 p {
   padding: 10px;
 }
 .msg .collumn-2 a {
   text-decoration: none;
-  color: #9A8CC0;
+  color: #9a8cc0;
 }
 
 .card {
@@ -210,7 +282,7 @@ html {
   overflow: auto;
   padding: 24px;
   border-radius: 8px;
-  background-color: #ffffff;
+  background-color: var(--card-background-color);
   box-shadow: rgba(35, 35, 38, 0.2) 0px 0px 16px;
   display: list-item;
   list-style-type: none;
@@ -222,11 +294,11 @@ html {
   margin-bottom: 16px;
 }
 .card__title {
-  color: #6e6197;
+  color: var(--card-title-color);
   font-size: 2.4rem;
 }
 .card__description {
-  color: #232226;
+  color: var(--card-description-color);
   line-height: 160%;
   font-size: 1.8rem;
 }
@@ -244,7 +316,7 @@ html {
 }
 
 .github-corner {
-  color: #ffffff;
+  color: var(--background-color);
   fill: #6e6197;
 }
 .github-corner svg {
@@ -304,5 +376,29 @@ html {
     min-height: 250px;
   }
 }
+.button-change-theme {
+  background-color: #6e6197;
+  color: #ffffff;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+.button-change-theme i {
+  font-size: 1.4rem;
+}
+
+:root #change-theme-button .ph-desktop {
+  display: inline;
+}
+:root #change-theme-button .ph-moon {
+  display: none;
+}
+:root #change-theme-button .ph-sun {
+  display: none;
+}
 
 /*# sourceMappingURL=style.css.map */
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
index 2dff0ecb..2e4b0afb 100644
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/style.sass","../sass/dark_mode.sass","../sass/_variables.sass"],"names":[],"mappings":"AAAQ;ACER;EACI,kBCHI;EDIJ,OCHI;;ADMA;EACI,OCPJ;;;ADSR;EACI;EACA,OCXI;EDYJ;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;AAAA;EAEI;;;AAEJ;AAAA;EAEI;;;AD1BJ;EACI;EACA;EACA;;;AAEJ;EACI,kBETI;EFUJ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA,YEVU;;;AFYd;EACI,YEnBO;;;AFqBX;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA,OE5CA;EF6CA;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI,kBE7DO;EF8DP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,ME7EO;;;AF+EX;EACI;EACA;EACA;EACA;EACA;EACA;EACA,OEzFI;EF0FJ;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI,kBE3GI;EF4GJ;EACA;EACA;EACA,OEhHI;EFiHJ;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AACJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI,kBE7HE;EF8HF;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA,OEvIE;;AFyIN;EACI;;AACJ;EACI;EACA,OE1IE;;;AF2Id;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBE9JI;EF+JJ;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI,OEhKM;EFiKN;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA,OEzLA;EF0LA,kBEhLM;EFiLN;EACA;;;AAER;EACI,OE/LI;EFgMJ,MEtLU;;AFwLV;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AAER;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;;AAER;EACI;IACI;IACA;;EACJ;IACI;;EAEJ;IACI;;;AAER;EACI;IACI;;;AAER;EACI;IACI;IACA;IACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/style.sass","../sass/cookies.sass","../sass/dark_theme.sass","../sass/light_theme.sass","../sass/_variables.sass"],"names":[],"mappings":"AAAQ;ACAR;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;EACI;IACI;IACA;;;AChDR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAII;EACI;;AAEJ;EACI;;AAEJ;EACI;;;ACzBZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAII;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AHnBZ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAER;EACI;;;AAEJ;EACI;EACA,YIvCU;;;AJyCd;EACI,YIhDO;;;AJkDX;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,MIhFD;;AJkFH;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAEhB;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;EACI,kBIjIE;EJkIF;EACA;EACA;;AACJ;EACI;EACA;EACA;EACA,OI3IE;;AJ6IN;EACI;;AACJ;EACI;EACA,OI9IE;;;AJgJd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA,OI/LA;EJgMA,kBIrLM;EJsLN;EACA;;;AAER;EACI;EACA,MI3LU;;AJ6LV;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AAER;EACI;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;;AAER;EACI;IACI;IACA;;EACJ;IACI;;EAEJ;IACI;;;AAER;EACI;IACI;;;AAER;EACI;IACI;IACA;IACA;;;AAER;EACI,kBIjPU;EJkPV,OI7PI;EJ8PJ;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIA;EACI;;AAEJ;EACI;;AAEJ;EACI","file":"style.css"}
diff --git a/assets/js/dark_mode.js b/assets/js/dark_mode.js
deleted file mode 100644
index 3cb298a6..00000000
--- a/assets/js/dark_mode.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const body = document.body;
-const toggleDarkModeButton = document.querySelector("#dark-mode-toggle");
-const moonIcon = document.querySelector(".ph-moon");
-const sunIcon = document.querySelector(".ph-sun");
-
-function displayMoonIcon(display) {
-    if (display) {
-        moonIcon.style.display = "inline";
-        sunIcon.style.display = "none";
-    } else {
-        moonIcon.style.display = "none";
-        sunIcon.style.display = "inline";
-    }
-}
-
-function toggleDarkModeWithLocalStorage() {
-    const darkModeTheme = localStorage.getItem("darkMode") === "true";
-    if (darkModeTheme) {
-        displayMoonIcon(false);
-        body.classList.toggle("body-dark-mode");
-    }
-}
-
-function toggleDarkModeAndSaveState() {
-    body.classList.toggle("body-dark-mode");
-    const isDarkMode = body.classList.contains("body-dark-mode");
-    if (isDarkMode) {
-        displayMoonIcon(false);
-        localStorage.setItem("darkMode", true);
-    } else {
-        displayMoonIcon(true);
-        localStorage.setItem("darkMode", false);
-    }
-}
-
-toggleDarkModeWithLocalStorage();
-toggleDarkModeButton.addEventListener("click", toggleDarkModeAndSaveState);
diff --git a/assets/js/script.js b/assets/js/script.js
index f6f288f5..fe7de008 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -1,4 +1,3 @@
-import "./dark_mode.js";
 import { levenshtein } from "./levenshtein.js";
 
 const exactWordScore = 12;
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 00000000..e297665b
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,64 @@
+// has to be in the head tag, otherwise a flicker effect will occur
+let toggleThemeSetting = () => {
+    let themeSetting = getThemeSetting();
+    if (themeSetting == "system") {
+        setThemeSetting("light");
+    } else if (themeSetting == "light") {
+        setThemeSetting("dark");
+    } else {
+        setThemeSetting("system");
+    }
+};
+
+let getThemeSetting = () => {
+    let themeSetting = localStorage.getItem("theme");
+    if (themeSetting != "dark" && themeSetting != "light" && themeSetting != "system") {
+        themeSetting = "system";
+    }
+    return themeSetting;
+};
+
+let setThemeSetting = (themeSetting) => {
+    localStorage.setItem("theme", themeSetting);
+    document.documentElement.setAttribute("data-theme-setting", themeSetting);
+    applyTheme();
+};
+
+let applyTheme = () => {
+    let theme = getTheme();
+    document.documentElement.setAttribute("data-theme", theme);
+};
+
+let getTheme = () => {
+    let themeSetting = getThemeSetting();
+    if (themeSetting == "system") {
+        const userPref = window.matchMedia;
+        if (userPref && userPref("(prefers-color-scheme: dark)").matches) {
+            return "dark";
+        } else {
+            return "light";
+        }
+    } else {
+        return themeSetting;
+    }
+};
+
+let initTheme = () => {
+    let themeSetting = getThemeSetting();
+    setThemeSetting(themeSetting);
+
+    // add event listener to the theme toggle button
+    document.addEventListener("DOMContentLoaded", function () {
+        const theme_toggle = document.getElementById("change-theme-button");
+        theme_toggle.addEventListener("click", function () {
+            toggleThemeSetting();
+        });
+    });
+
+    // add event listener to the system theme preference change
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
+        applyTheme();
+    });
+};
+
+initTheme();
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 2a972851..af173225 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -1,4 +1,5 @@
 $black: #232226
+$blue: #0000ff
 $white: #ffffff
 
 $gray-700: #3e3e3f
@@ -6,12 +7,12 @@ $gray-500: #9698a0
 $gray-300: #cccccc
 $gray-100: #f2f2f2
 
-$primary-900: #1A1248
-$primary-800: #281E57
-$primary-700: #3C306C
+$primary-900: #1a1248
+$primary-800: #281e57
+$primary-700: #3c306c
 $primary-600: #534681
 $primary-500: #6e6197
-$primary-400: #9A8CC0
-$primary-300: #BDAFDF
-$primary-200: #DCD1F4
-$primary-100: #EEE7F9
+$primary-400: #9a8cc0
+$primary-300: #bdafdf
+$primary-200: #dcd1f4
+$primary-100: #eee7f9
diff --git a/assets/sass/cookies.sass b/assets/sass/cookies.sass
index 17105870..e132467f 100644
--- a/assets/sass/cookies.sass
+++ b/assets/sass/cookies.sass
@@ -2,7 +2,7 @@
     margin: 10px 0px
     font-size: 1.6rem
     text-align: center
-    color: #232323
+    color: var(--cookies-text-color)
 
 .cookies-container
     position: fixed
@@ -13,7 +13,7 @@
 
 .cookies-content
     box-shadow: 0 1px 5px #6e6197
-    background-color: #fff
+    background-color: var(--cookies-background-color)
     border: 1px solid #6e6197
     max-width: 50%
     border-radius: 5px
@@ -27,6 +27,9 @@
     transform: translateY(1rem)
     animation: slideUp 0.5s forwards
 
+    a
+        color: var(--cookies-link-color)
+
 .cookies-accept-button
     background-color: #6e6197
     color: #fff
diff --git a/assets/sass/dark_mode.sass b/assets/sass/dark_mode.sass
deleted file mode 100644
index a85e84cd..00000000
--- a/assets/sass/dark_mode.sass
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "variables"
-
-.body-dark-mode
-    background-color: $black
-    color: $white
-
-    .header
-        &__subtitle
-            color: $white
-        
-        .github-corner
-            color: $black
-    .main
-        .cookies-content
-            background-color: $gray-700
-            .cookies-message 
-                color: $white
-            a
-                color: $primary-100
-
-        .card
-            background-color: $gray-700
-            
-            &__title
-                color: $primary-100
-            &__description
-                color: $white
-        
-        .search
-            .searchbar
-                background-color: $gray-700
-                color: $white
-                &__input
-                    color: $white
-        
-        #tags-filter
-            background-color: $gray-700
-            color: $white
-
-.button-dark-mode
-    background-color: $primary-500
-    color: $white
-    border: none
-    border-radius: 5px
-    padding: 10px 20px
-    cursor: pointer
-    position: absolute
-    top: 20px
-    right: 20px
-
-    & i
-        font-size: 1.4rem
-
-.body-dark-mode .ph-sun,
-:not(.body-dark-mode) .ph-moon
-    display: inline
-
-.body-dark-mode .ph-moon,
-:not(.body-dark-mode) .ph-sun
-    display: none
diff --git a/assets/sass/dark_theme.sass b/assets/sass/dark_theme.sass
new file mode 100644
index 00000000..d486355d
--- /dev/null
+++ b/assets/sass/dark_theme.sass
@@ -0,0 +1,26 @@
+html[data-theme='dark']
+    --background-color: #{$black}
+    --card-background-color: #{$gray-700}
+    --card-description-color: #{$white}
+    --card-title-color: #{$primary-100}
+    --cookies-background-color: #{$gray-700}
+    --cookies-link-color: #{$primary-100}
+    --cookies-text-color: #{$white}
+    --fav-button-color: #{$white}
+    --link-color: #{$primary-300}
+    --searchbar-background-color: #{$gray-700}
+    --searchbar-text-color: #{$white}
+    --tags-filter-background-color: #{$gray-700}
+    --tags-filter-text-color: #{$white}
+    --text-color: #{$white}
+
+html[data-theme-setting='dark']
+    #change-theme-button
+        .ph-desktop
+            display: none
+
+        .ph-moon
+            display: inline
+
+        .ph-sun
+            display: none
diff --git a/assets/sass/light_theme.sass b/assets/sass/light_theme.sass
new file mode 100644
index 00000000..c68cebfc
--- /dev/null
+++ b/assets/sass/light_theme.sass
@@ -0,0 +1,26 @@
+html[data-theme='light']
+    --background-color: #{$white}
+    --card-background-color: #{$white}
+    --card-description-color: #{$black}
+    --card-title-color: #{$primary-500}
+    --cookies-background-color: #{$white}
+    --cookies-link-color: #{$blue}
+    --cookies-text-color: #{$black}
+    --fav-button-color: #{$primary-500}
+    --link-color: #{$primary-300}
+    --searchbar-background-color: #{$gray-100}
+    --searchbar-text-color: #{$black}
+    --tags-filter-background-color: #{$white}
+    --tags-filter-text-color: #{$black}
+    --text-color: #{$black}
+
+html[data-theme-setting='light']
+    #change-theme-button
+        .ph-desktop
+            display: none
+
+        .ph-moon
+            display: none
+
+        .ph-sun
+            display: inline
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index cb9ec55d..d001edb3 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -1,6 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap")
-@import "dark_mode"
 @import "variables"
+@import "cookies"
+@import "dark_theme"
+@import "light_theme"
 
 *
     margin: 0
@@ -8,12 +10,41 @@
     box-sizing: border-box
 
 body
-    background-color: $white
-    font-family: "Roboto", sans-serif
     -webkit-font-smoothing: antialiased
+    background-color: var(--background-color)
+    color: var(--text-color)
+    font-family: "Roboto", sans-serif
     padding: 40px 24px
     transition: background-color 0.5s ease-in-out
 
+    .header
+        display: flex
+        justify-content: center
+        align-items: center
+        flex-direction: column
+        gap: 24px
+
+        &__title img
+            display: block
+            max-width: 100%
+            height: auto
+
+        &__subtitle
+            font-size: 2rem
+            text-align: center
+            color: var(--text-color)
+            font-weight: 400
+            transition: color 0.5s ease-in-out
+
+    .main
+        display: flex
+        justify-content: center
+        align-items: center
+        flex-direction: column
+        flex-wrap: wrap
+        max-width: 1440px
+        margin: 0 auto
+
 ::-webkit-scrollbar
     width: 8px
 
@@ -27,72 +58,46 @@ body
 html
     font-size: 62.5%
 
-.header
-    display: flex
-    justify-content: center
-    align-items: center
-    flex-direction: column
-    gap: 24px
-
-    &__title img
-        display: block
-        max-width: 100%
-        height: auto
-
-    &__subtitle
-        font-size: 2rem
-        text-align: center
-        color: $black
-        font-weight: 400
-        transition: color 0.5s ease-in-out
-
 .fav__button
+    font-size: 2.5rem
     width: 24px
     cursor: pointer
-
-.main
-    display: flex
-    justify-content: center
-    align-items: center
-    flex-direction: column
-    flex-wrap: wrap
-    max-width: 1440px
-    margin: 0 auto
+    color: var(--fav-button-color)
 
 .search
     margin: 30px 0
     width: 100%
 
-.searchbar
-    background-color: $gray-100
-    display: flex
-    align-items: center
-    justify-content: center
-    gap: 16px
-    border: none
-    border-radius: 4px
-    padding: 16px
-    margin-bottom: 16px
-    width: 100%
-
-.searchbar__icon
-    width: 24px
-    height: 24px
-    fill: $gray-500
-
-.searchbar__input
-    font-family: "Roboto", sans-serif
-    border: none
-    border-radius: 4px
-    background-color: transparent
-    padding: 4px
-    flex: 1
-    color: $black
-    font-size: 2rem
-    width: 100%
+    .searchbar
+        background-color: var(--searchbar-background-color)
+        display: flex
+        align-items: center
+        justify-content: center
+        gap: 16px
+        border: none
+        border-radius: 4px
+        padding: 16px
+        margin-bottom: 16px
+        width: 100%
 
-    &:focus
-        outline: none
+        &__icon
+            width: 24px
+            height: 24px
+            fill: $gray-500
+
+        &__input
+            font-family: "Roboto", sans-serif
+            border: none
+            border-radius: 4px
+            background-color: transparent
+            padding: 4px
+            flex: 1
+            color: var(--searchbar-text-color)
+            font-size: 2rem
+            width: 100%
+
+            &:focus
+                outline: none
 
 .filter
     display: flex
@@ -106,11 +111,11 @@ html
     transition: color 0.5s ease-in-out
 
 #tags-filter
-    background-color: $white
+    background-color: var(--tags-filter-background-color)
     border: 2px solid $primary-500
     border-radius: 4px
     padding: 8px
-    color: $black
+    color: var(--tags-filter-text-color)
     font-size: 2rem
 
     &:focus
@@ -123,6 +128,7 @@ html
     flex-wrap: wrap
     gap: 32px
     margin: 48px 0
+
 .msg
     font-size: 20px
     text-align: center
@@ -149,6 +155,7 @@ html
         a
             text-decoration: none
             color: $primary-400
+
 .card
     width: 20%
     flex-grow: 1
@@ -157,7 +164,7 @@ html
     overflow: auto
     padding: 24px
     border-radius: 8px
-    background-color: $white
+    background-color: var(--card-background-color)
     box-shadow: rgba(35, 35, 38, 0.2) 0px 0px 16px
     display: list-item
     list-style-type: none
@@ -169,11 +176,11 @@ html
         margin-bottom: 16px
 
     &__title
-        color: $primary-500
+        color: var(--card-title-color)
         font-size: 2.4rem
 
     &__description
-        color: #232226
+        color: var(--card-description-color)
         line-height: 160%
         font-size: 1.8rem
 
@@ -190,7 +197,7 @@ html
         font-style: italic
 
 .github-corner
-    color: $white
+    color: var(--background-color)
     fill: $primary-500
 
     svg
@@ -243,3 +250,28 @@ html
         width: 100%
         max-height: 250px
         min-height: 250px
+
+.button-change-theme
+    background-color: $primary-500
+    color: $white
+    border: none
+    border-radius: 5px
+    padding: 10px 20px
+    cursor: pointer
+    position: absolute
+    top: 20px
+    right: 20px
+
+    & i
+        font-size: 1.4rem
+
+:root
+    #change-theme-button
+        .ph-desktop
+            display: inline
+
+        .ph-moon
+            display: none
+
+        .ph-sun
+            display: none
diff --git a/index.html b/index.html
index 7c7a1246..fe93579e 100644
--- a/index.html
+++ b/index.html
@@ -16,8 +16,6 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="assets/css/style.css" />
-  <link rel="stylesheet" href="assets/css/cookies.css">
-  <link rel="stylesheet" href="assets/css/dark_mode.css">
 
   <!-- Phosphor Icons -->
   <script src="https://unpkg.com/@phosphor-icons/web"></script>
@@ -25,6 +23,9 @@
   <!-- Analytics -->
   <script data-goatcounter="https://levxyca.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
 
+  <!-- Light/Dark/System Theme-->
+  <script src="assets/js/theme.js"></script>
+
   <title>Diciotech</title>
 </head>
 
@@ -48,7 +49,8 @@ <h2 class="header__subtitle">
       técnicos dentro da tecnologia 📖
     </h2>
 
-    <button id="dark-mode-toggle" class="button-dark-mode" title="Mudar tema">
+    <button id="change-theme-button" class="button-change-theme" title="Mudar tema">
+      <i class="ph ph-desktop"></i>
       <i class="ph ph-moon"></i>
       <i class="ph ph-sun"></i>
     </button>
@@ -86,4 +88,4 @@ <h2 class="header__subtitle">
   <script src="assets/js/cookies.js" type="module"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>