diff --git a/themes/dark.html b/themes/dark.html
new file mode 100644
index 0000000..e888652
--- /dev/null
+++ b/themes/dark.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SILLYBLOG | Dark Theme</title>
+    <style>
+
+         body {
+              background:#292627;
+              font-family: Arial;
+              font-weight: 500;
+              font-size: 1.4em;
+              letter-spacing: 0.1em;
+
+              }
+              
+             
+              h1 {
+                border:2px #cacfc8 solid;
+                background-size:contain;
+               color: #cacfc8;
+               font-size:20px;
+               padding: 3%;
+               text-align:center;
+              }
+
+             
+              .info-box {
+             
+              background: white;
+              color: #161c24;
+              height: 100px;
+              width: 50%;
+              overflow-y: scroll;
+              margin: 0 auto;
+              
+              padding: 1%;
+              padding-left: 4%;
+              padding-right: 4%;
+              padding-top: 1%;
+              line-height:115%;
+              border: 8px groove red;
+              
+              
+              }
+
+              hr {
+                border: 3px solid #cacfc8;
+                width: 150px;
+              }
+
+            
+            .main-box {
+              background: #2b2e2a;
+              color: #e3ebdf;
+              width: 50%;
+           height: auto;
+              margin: 0 auto;
+            
+             
+              padding: 4%;
+              padding-top: 1%;
+              line-height:160%;
+                border:6px #ded5d6 solid;
+
+              }
+
+            a {
+              color: #cacfc8;
+              
+              }
+              
+              
+            @media only screen and (max-width: 800px) {
+              .main-box {
+                width: auto;
+                height: auto;
+              
+              }
+              
+            }
+
+    </style>
+    <script>
+      
+ 
+function giveOutput() {
+  
+  const post = document.getElementById("textarea2").value;
+const title = document.getElementById("textarea1").value;
+
+  const style = `<!DOCTYPE html>
+<html>
+  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>My Blog</title>
+     <style>
+
+         body {
+              background:#292627;
+              font-family: Arial;
+              font-weight: 500;
+              font-size: 1.4em;
+              letter-spacing: 0.1em;
+
+              }
+              
+             
+              h1 {
+                border:2px #cacfc8 solid;
+                background-size:contain;
+               color: #cacfc8;
+               font-size:20px;
+               padding: 3%;
+               text-align:center;
+              }
+
+             
+              .info-box {
+             
+              background: white;
+              color: #161c24;
+              height: 100px;
+              width: 50%;
+              overflow-y: scroll;
+              margin: 0 auto;
+              
+              padding: 1%;
+              padding-left: 4%;
+              padding-right: 4%;
+              padding-top: 1%;
+              line-height:115%;
+              border: 8px groove red;
+              
+              
+              }
+
+              hr {
+                border: 3px solid #cacfc8;
+                width: 150px;
+              }
+
+            
+            .main-box {
+              background: #2b2e2a;
+              color: #e3ebdf;
+              width: 50%;
+           height: auto;
+              margin: 0 auto;
+            
+             
+              padding: 4%;
+              padding-top: 1%;
+              line-height:160%;
+                border:6px #ded5d6 solid;
+
+              }
+
+            a {
+              color: #cacfc8;
+              
+              }
+              
+              
+            @media only screen and (max-width: 800px) {
+              .main-box {
+                width: auto;
+                height: auto;
+              
+              }
+              
+            }
+
+    </style>
+  </head>  <body> <div class="main-box">`
+
+  const footer = `</div>
+
+  </div>
+  </body>
+  
+  
+
+</html>
+`
+
+  const output = style + "\n" + "<h1>" + title + "</h1>" + "\n" + post + "\n" + footer;
+  
+  document.getElementById("outputbox").value = output;
+}</script>
+       
+
+  </head>  <body><div class="main-box"> <h1>Sillyblog</h1>
+  A really basic js blog generator. How it works:<br>
+  <li>Enter your post title in the title box</li>
+  <li>Enter your post content in the post content box</li>
+  <li>Click generate HTML</li>
+  <li>Copy paste html to web host of choice, you can add a <a href="#">link</a> back to your main blog page or site at the top if you want<br></li>
+<textarea id="textarea1" name="textarea1" rows="2" cols="80">Post Title</textarea>
+
+<hr>
+
+<textarea id="textarea2" name="textarea2" rows="30" cols="80">Post content, use raw HTML</textarea>
+
+<button type="button" onclick="giveOutput()">Generate HTML</button>
+
+<h2>Output:</h2>
+<textarea id="outputbox" rows="30" cols="80" readonly></textarea>
+</div>
+
+  </div>
+  </body>
+  
+  
+
+</html>
+
+