diff --git a/static/css/main.css b/static/css/main.css
index 103334e72..019d82952 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,9 +1,103 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
 
+:root, [data-theme="light"] {
+	--background: #f3f2f0;
+	--highlight: #0b75d8;
+	--border: #a9a9a9;
+	--mod-bar: #fefefe;
+	--content-background: white;
+	--nav-background: #dfdfdf;
+	--content-text: black;
+	--header-text: black;
+	--white-text: white;
+	--muted: gray;
+	--forge-color: #1e2d44;
+
+	--tech-color: red;
+	--adventure-color: saddlebrown;
+	--magic-color: rebeccapurple;
+	--utility-color: orangered;
+	--decoration-color: #2f92d8;
+	--world-color: yellow;
+	--library-color: orange;
+	--cursed-color: palevioletred;
+	--misc-color: deepskyblue;
+	--storage-color: #e1a15a;
+	--food-color: royalblue;
+	--equipment-color: black;
+}
+
+[data-theme="dark"] {
+	--background: #1b1b1b;
+	--highlight: #0b75d8;
+	--border: #1d1d1d;
+	--mod-bar: #222222;
+	--content-background: rgb(34, 34, 34);
+	--nav-background: #252525;
+	--content-text: rgb(241, 241, 241);
+	--header-text: rgb(241, 241, 241);
+	--white-text: white;
+	--muted: gray;
+	--forge-color: white;
+	
+	--tech-color: #bf3f3f;
+	--adventure-color: #764827;
+	--magic-color: #663299;
+	--utility-color: #bf623f;
+	--decoration-color: #458ec1;
+	--world-color: #e6e62c;
+	--library-color: #cc9a3c;
+	--cursed-color: #d17695;
+	--misc-color: #3f9fbf;
+	--storage-color: #cea06c;
+	--food-color: #5975c8;
+	--equipment-color: #000000;
+}
+
+
+@media (prefers-color-scheme: dark) {
+	[data-theme="light"] {
+		--background: #f3f2f0;
+		--highlight: #0b75d8;
+		--border: #a9a9a9;
+		--mod-bar: #fefefe;
+		--content-background: white;
+		--nav-background: #dfdfdf;
+		--content-text: black;
+		--header-text: black;
+		--white-text: white;
+		--muted: gray;
+		--forge-color: #1e2d44;
+	}
+
+	:root, [data-theme="dark"] {
+		--background: #1b1b1b;
+		--highlight: #0b75d8;
+		--border: #1d1d1d;
+		--mod-bar: #222222;
+		--content-background: rgb(34, 34, 34);
+		--nav-background: #252525;
+		--content-text: rgb(241, 241, 241);
+		--header-text: rgb(241, 241, 241);
+		--white-text: white;
+		--muted: gray;
+		--forge-color: white;
+	}
+}
+
+* {
+	transition: color 0.4s, background-color 0.4s, border-color 0.4s, fill 0.4s !important;
+}
+
 body {
     margin: 0;
     font-family: 'Montserrat', sans-serif;
-    background-color: #f3f2f0;
+	background-color: var(--background);
+	color: var(--content-text);
+}
+
+h1, h2, h3, h4, h5, h6 {
+	color: var(--header-text);
 }
 
 .main-flex {
@@ -12,13 +106,13 @@ body {
 }
 
 .muted {
-    color: gray;
+    color: var(--muted);
 }
 
 .temp-circle-logo {
     height: 50px;
     width: 50px;
-    background-color: white;
+    background-color: var(--content-background);
     border-radius: 50%;
     display: inline-block;
     margin-left: 20%;
@@ -27,7 +121,7 @@ body {
 .site-header {
     z-index: 2;
     position: sticky;
-    background-color: #0b75d8;
+    background-color: var(--highlight);
     top: 0;
     width: 100%;
     height: 75px;
@@ -36,7 +130,7 @@ body {
 }
 
 .site-header h2 {
-    color: white;
+    color: --var(white-text);
     font-weight: bolder;
     padding: 0 20px 0 10px;
 }
@@ -45,7 +139,7 @@ body {
     margin: 0 auto;
 }
 .links-container a {
-    color: white;
+    color: var(--white-text);
     padding: 0 30px;
     text-decoration: none;
 }
@@ -56,7 +150,7 @@ body {
 }
 
 .gray-border {
-    border: 1px solid #a9a9a9;
+    border: 1px solid var(--border);
 }
 
 .green {
diff --git a/static/css/mod.css b/static/css/mod.css
index c688170ec..f128169bc 100644
--- a/static/css/mod.css
+++ b/static/css/mod.css
@@ -18,7 +18,7 @@
 
 .navigation-pointer {
     color: gray;
-    background-color: #dfdfdf;
+    background-color: var(--nav-background);
     padding: 10px;
     border-radius: 5px;
     text-decoration: none;
@@ -27,7 +27,7 @@
 }
 
 .navigation-text {
-    color: #0b75d8;
+    color: var(--highlight);
     background-color: #c9def2;
     padding: 10px;
     border-radius: 5px;
@@ -40,8 +40,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    color: white;
-    background-color: #0b75d8;
+    color: var(--white-text);
+    background-color: var(--highlight);
     text-decoration: none;
     font-weight: bold;
     padding: 10px;
@@ -61,7 +61,7 @@
 
     width: 100%;
     height: 100px;
-    background-color: white;
+    background-color: var(--content-background);
     margin: 0 0 20px 0;
 }
 
@@ -99,18 +99,18 @@
     margin: 5px 10px 0 0;
     padding: 5px 10px;
     color: gray;
-    background-color: #fefefe;
+    background-color: var(--mod-bar);
     border-radius: 5px 5px 0 0;
-    border: 1px solid darkgrey;
+    border: 1px solid var(--border);
     border-bottom: none !important;
     text-decoration: none;
     cursor: pointer;
 }
 
 .mod-bar-active {
-    color: #0b75d8 !important;
+    color: var(--highlight) !important;
     font-weight: bold;
-    background-color: white !important;
+    background-color: var(--content-background) !important;
 }
 
 .mod-hide {
@@ -133,7 +133,10 @@
 .search-bar {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+	box-sizing: border-box;
+	color: var(--content-text);
+	background-color: var(--content-background);
+	border-color: var(--border);
     width: 100%;
     margin-top: 5px;
     margin-bottom: 25px;
@@ -147,7 +150,7 @@
 
     width: 100%;
     height: auto !important;
-    background-color: white;
+    background-color: var(--content-background);
 }
 
 .sidebar-entry {
@@ -230,12 +233,12 @@
 .sidebar-line {
     height: 1px;
     width: 80%;
-    background-color: darkgrey;
+    background-color: var(--border);
     margin: 0 auto;
 }
 
 .download {
-    color: white;
+    color: var(--white-text);
     padding: 10px 5px;
     margin-bottom: 5px;
     width: 200px;
@@ -245,7 +248,7 @@
 }
 
 .download-primary {
-    background-color: #0b75d8;
+    background-color: var(--highlight);
 }
 
 .download-normal {
@@ -256,9 +259,9 @@
     padding: 5px;
     margin-top: 0px;
     width: 100%;
-    background-color: white;
+    background-color: var(--content-background);
     border-radius: 0 5px 5px 5px;
-    border: 1px solid darkgrey;
+    border: 1px solid var(--border);
     font-size: 16px;
     line-height: 20px;
 }
@@ -297,9 +300,9 @@
 .api {
     margin-top: 0;
     width: 100%;
-    background-color: white;
+    background-color: var(--content-background);
     border-radius: 0 5px 5px 5px;
-    border: 1px solid darkgrey;
+    border: 1px solid var(--border);
     font-size: 16px;
     line-height: 20px;
 }
diff --git a/static/css/search.css b/static/css/search.css
index 3e9e818ce..d8e8ef2ed 100644
--- a/static/css/search.css
+++ b/static/css/search.css
@@ -3,9 +3,10 @@
     height: 33px;
     width: 175px;
 
-    background-color: white;
+	color: var(--content-text);
+    background-color: var(--content-background);
     border-radius: 5px;
-    border: 1px solid darkgrey;
+    border: 1px solid var(--border);
 }
 
 .versions {
@@ -51,10 +52,10 @@
     margin: 0;
 
     font-weight: bold;
-    color: black;
-    background-color: white;
-    border-bottom: 1px solid darkgrey;
-    border-top: 1px solid darkgrey;
+    color: var(--content-text);
+    background-color: var(--content-background);
+    border-bottom: 1px solid var(--border);
+    border-top: 1px solid var(--border);
 
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -82,9 +83,10 @@
 
     border-radius: 5px;
     padding: 0 10px;
-    background-color: #ffffff;
+	color: var(--content-text);
+    background-color: var(--content-background);
     background-image: none;
-    border: 1px solid darkgrey;
+    border: 1px solid var(--border);
 }
 
 .categories {
@@ -139,6 +141,9 @@
 .search-bar {
     position: -webkit-sticky !important;
     position: sticky !important;
+	color: var(--content-text);
+	background-color: var(--content-background);
+	border-color: var(--border);
     height: 2em;
     margin-top: 30px;
     margin-bottom: 15px;
@@ -176,7 +181,7 @@
     width: 100%;
     flex-direction: row;
     align-items: center;
-    background-color: white;
+    background-color: var(--content-background);
 }
 
 .result-image {
@@ -203,7 +208,7 @@
 
 .result-name {
     text-decoration: none;
-    color: #0b75d8;
+    color: var(--highlight);
 }
 
 .result-author {
@@ -256,41 +261,42 @@
 
 .tech-badge {
     color: white;
-    background-color: red;
+    background-color: var(--tech-color);
 }
 
 .adventure-badge {
     color: white;
-    background-color: saddlebrown;
+    background-color: var(--adventure-color);
 }
 
 .magic-badge {
     color: white;
-    background-color: rebeccapurple;
+    background-color: var(--magic-color);
 }
 
 .utility-badge {
     color: white;
-    background-color: orangered;
+    background-color: var(--utility-color);
 }
 
 .decoration-badge {
     color: white;
-    background-color: #2f92d8;
+    background-color: var(--decoration-color);
 }
 
 .world-badge {
-    background-color: yellow;
+	color: black;
+	background-color: var(--world-color);
 }
 
 .library-badge {
     color: white;
-    background-color: orange;
+    background-color: var(--library-color);
 }
 
 .cursed-badge {
     color: white;
-    background-color: palevioletred;
+    background-color: var(--cursed-color);
 }
 
 .cursed-badge img {
@@ -299,34 +305,36 @@
 
 .misc-badge {
     color: white;
-    background-color: deepskyblue;
+    background-color: var(--misc-color);
 }
 
 .storage-badge {
     color: wheat;
-    background-color: #e1a15a;
+    background-color: var(--storage-color);
 }
 
 
 .food-badge {
     color: white;
-    background-color: royalblue;
+    background-color: var(--food-color);
 }
 
 .equipment-badge {
     color: white;
-    background-color: black;
+    background-color: var(--equipment-color);
 }
 
 .forge {
-    padding-top: 5px !important;
+	height: 12px;
+	padding-top: 5px !important;
+	fill: var(--forge-color);
 }
 
 .back-to-top {
     position: fixed;
     top: 80%;
     left: 19%;
-    background-color: #0b75d8;
+    background-color: var(--highlight);
     text-align: center;
     padding: 20px;
     display: none;
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 000000000..909e14587
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,3 @@
+if (localStorage.getItem("theme")) {
+	document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
+}
\ No newline at end of file
diff --git a/templates/mod-create.hbs b/templates/mod-create.hbs
index cb6992ba0..4829c8b78 100644
--- a/templates/mod-create.hbs
+++ b/templates/mod-create.hbs
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<script src="/static/js/main.js"></script>
+
     <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
     <link href="/static/css/main.css" rel="stylesheet" type="text/css">
     <link href="/static/css/create-mod.css" rel="stylesheet" type="text/css">
diff --git a/templates/mod-page.hbs b/templates/mod-page.hbs
index ddc50e8d4..ac0ccafc0 100644
--- a/templates/mod-page.hbs
+++ b/templates/mod-page.hbs
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<script src="/static/js/main.js"></script>
+
     <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
     <link href="/static/css/main.css" rel="stylesheet" type="text/css">
     <link href="/static/css/mod.css" rel="stylesheet" type="text/css">
diff --git a/templates/search-results.hbs b/templates/search-results.hbs
index 242826870..be55396ae 100644
--- a/templates/search-results.hbs
+++ b/templates/search-results.hbs
@@ -22,7 +22,13 @@
 
                 <div class="loader-icons">
                     {{#contains this.keywords "forge"}}
-                        <img alt="forge" src="/static/images/icon/forge.svg" class="forge"/>
+						<svg viewBox="0 0 120 66.7" class="forge">
+							<path d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
+										c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
+										c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
+										c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
+										l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
+						</svg>
                     {{/contains}}
                     {{#contains this.keywords "fabric"}}
                         <img alt="fabric" src="/static/images/icon/fabric.png"/>
diff --git a/templates/search.hbs b/templates/search.hbs
index 1c04cb6c7..747ecbcb5 100644
--- a/templates/search.hbs
+++ b/templates/search.hbs
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+	<script src="/static/js/main.js"></script>
+
     <link href="/static/css/main.css" rel="stylesheet" type="text/css">
     <link href="/static/css/search.css" rel="stylesheet" type="text/css">
     <link href="/static/css/normalize.css" rel="stylesheet" type="text/css">