diff --git a/content.js b/content.js
index 77f15bb..f310b63 100644
--- a/content.js
+++ b/content.js
@@ -1,8 +1,18 @@
-/* This runs after a web page loads */
-var getHeader = document.getElementsByTagName('head').item(0);
-var linkStyle = document.createElement("link");
-var url = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Press+Start+2P&display=swap";
+const header = document.getElementsByTagName('head').item(0);
+
+// set the padding for the top bar
+document.getElementById("hnmain").firstElementChild.firstElementChild.firstElementChild.setAttribute("style", "padding:16px");
+
+//set font-url
+const meta = document.createElement("meta");
+meta.setAttribute("http-equiv", "Content-Security-Policy");
+meta.setAttribute("content", "default-src https://*; font-src https://*; style-src https://*;")
+header.appendChild(meta);
+
+//get font
+const linkStyle = document.createElement("link");
+const url = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Press+Start+2P&display=swap";
 linkStyle.href = url;
 linkStyle.rel = 'stylesheet';
-linkStyle.type = "text/css"; 
-getHeader.appendChild(linkStyle);
+linkStyle.type = "text/css";
+header.appendChild(linkStyle);
diff --git a/light-theme-style.css b/light-theme-style.css
deleted file mode 100644
index 9b9ca59..0000000
--- a/light-theme-style.css
+++ /dev/null
@@ -1,283 +0,0 @@
-:root {
-  --default-font: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  --primary-color: rgb(228, 104, 21);
-  --content-lower: rgb(141, 127, 127);
-}
-
-body {  
-  background: rgb(255, 253, 246);
-  color: var(--primary-color);
-  font-family: var(--default-font) !important;
-}
-
-a {
-  color: var(--primary-color) !important;
-}
-
-textarea {
-  font-family: var(--default-font) !important;
-  font-size: 1rem !important;
-  line-height: 1.2rem !important;
-}
-
-input {
-  font-family: var(--default-font);
-  font-size: 1rem !important;
-}
-
-input[type = submit] {
-  background-color: var(--primary-color);
-  color: #fff;
-  font-family: var(--default-font);
-  font-size: 1.2rem;
-  padding: 8px 16px;
-  border: 0;
-  border-radius: 4px;
-  text-transform: capitalize;
-}
-
-input[type = submit]:hover {
-  cursor: pointer;
-}
-
-td {
-  color: var(--primary-color) !important;
-  font-family: var(--default-font) !important;
-  font-size: 10pt;
-  color: #828282;
-}
-
-#hnmain {
-  background: rgb(255, 253, 246);
-}
-
-.pagetop {
-  font-family: var(--default-font) !important;
-  font-size: 1.1rem !important;
-  color: transparent !important;
-  line-height: auto !important;
-}
-
-.pagetop a:link {
-  color: var(--primary-color);
-  text-transform: capitalize !important;
-  padding-right: 10px;
-}
-
-.pagetop a:visited {
-  color: var(--primary-color) !important;
-}
-
-.pagetop .hnname a:link, .pagetop .hnname a:visited {
-  color: var(--primary-color) !important;
-  text-transform: uppercase !important;
-  letter-spacing: .75px !important;
-  font-size: .9rem;
-  line-height: .9rem;
-  font-weight: 6800;
-  font-family: var(--secondary-font);
-  vertical-align: baseline;
-  top: 2px;
-  position: relative;
-}
-
-#hnmain tbody:first-child tr:first-child td:first-child:not(.title) {
-  background: rgba(255, 229, 209, 0.5);
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(245, 201, 120, 0.1);
-  padding: 16px;
-  display: inline-block;
-  margin: 20px 0px 10px;
-  width: 100%;
-  border-radius: 8px;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2);
-  -webkit-box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2);
-}
-
-/* hide logo */
-#hnmain tbody:first-child tr:first-child td:first-child table tbody tr td:first-child {
-  display: none;
-  width: 0;
-}
-
-.subtext {  
-  font-family: var(--default-font) !important;
-  font-size: 1rem !important;
-  color: rgb(180, 188, 208) !important;
-  display: table-cell;
-}
-
-tr .athing {
-  height: 1.45rem !important;
-  width: 100%;
-}
-
-.rank {
-  display: none;
-}
-
-.votelinks {
-  background: rgba(255, 229, 209, 0.384);
-  border: 1px solid rgba(245, 201, 120, 0.1) !important;
-  border-radius: 4px;
-  width: 20px !important;
-  height: 32px !important;
-  display: table-cell;
-}
-
-.votelinks font {
-  top: 4px;
-  font-size: 1.5rem;
-  position: relative;
-}
-
-.votearrow {
-  width: 1px !important;
-  height: 1px !important;
-  border-style: solid !important;
-  border-width: 0 5px 9px 5px !important;
-  border-color: transparent transparent var(--primary-color) transparent !important;
-  transform: rotate(0deg) !important;
-  background-image: none !important;
-  margin: 2px 12px 2px 6px !important;
-  top: 7px !important;
-  left: 3px;
-  position: relative;
-  transition: 50ms ease-in-out;
-}
-
-.votearrow:hover {
-  border-color: transparent transparent var(--primary-color) transparent !important;
-  transform: scale(1.2) !important;
-}
-
-.title {
-  font-family: var(--default-font) !important;
-  font-size: 1.2rem !important;
-  font-weight: 600;
-  color: rgb(124, 109, 109)  !important;
-  overflow: hidden;
-  margin-bottom: 30px !important;
-  padding: 1px;
-}
-
-.titleline {
-  padding-left: 12px;
-}
-
-.titleline a:hover {
-  text-decoration: underline;
-  color: rgb(124, 109, 109)  !important;
-}
-
-.title a {
-  color: rgb(124, 109, 109)  !important;
-  text-decoration: none;
-} 
-
-.title a:visited {
-  color: var(--primary-color) !important;
-}
-
-.subline {
-  color: var(--content-lower) !important;
-}
-
-.subtext {
-  padding-left: 13px;
-  padding-top: 4px;
-  padding-bottom: 8px;
-  font-size: .9rem !important;
-}
-
-.subtext a:link, .subtext a:visited {
-  color: var(--content-lower) !important;
-}
-
-.sitebit.comhead a, .sitebit.comhead {
-  font-size: 1.2rem !important;
-  font-weight: 300;
-  font-family: var(--default-font) !important;
-  color: var(--content-lower) !important;
-}
-
-.morelink {
-  color: var(--primary-color) !important;
-  padding-left: 10px !important;
-}
-
-.morelink::after {
-  content: "→";
-  height: 10px;
-  width: 10px;
-  margin-left: 8px;
-}
-
-.hnmore a, font {
-  color: var(--primary-color) !important;
-}
-
-.comhead {
-  font-family: var(--default-font) !important;
-  font-size: .9rem !important;
-}
-
-.comhead a {
-  color: var(--content-lower) !important;
-}
-
-/* hide footer linke */
-#hnmain tbody tr:nth-child(5) td:first-child table tbody tr td {
-  background-color: transparent;
-}
-
-.yclinks a, .yclinks, form {
-  font-family: var(--default-font) !important;
-  color: var(--content-lower) !important;
-  font-size: .9rem !important;
-}
-
-.comment .c00{
-  color: var(--content-lower) !important;
-  font-size: 1.1rem;
-  line-height: 1.4rem;
-  font-family: var(--default-font) !important;
-}
-
-.hnuser {
-  font-weight: bold;
-}
-
-#karma {
-  color: var(--primary-color) !important;
-}
-
-.itemlist tbody, .itemlist {
-  width: 100% !important;
-}
-
-.athing.comtr td.ind {
-  background-color: transparent !important;
-  border: 0px solid transparent !important;
-  box-shadow: none !important;
-}
-
-.comment-tree tbody:first-child tr.athing.comtr:first-child td:first-child {
-  border: none !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  padding: 0px !important;
-}
-
-.comment-tree .votelinks {
-  width: 10px !important;
-  background-color: transparent !important;
-  border: none !important;
-}
-
-.comment-tree .votelinks .votearrow {
-  top: 2px !important;
-}
diff --git a/style.css b/style.css
index 3f9791c..e08041e 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,43 @@
-/* Original source: Kyle Lambert https://github.com/kslambert/hacker-news-arc-boost */
-
 :root {
-  --default-font: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
-  --primary-color: rgb(158, 129, 238);
-  --content-lower: rgb(113, 124, 153);
-}
-
-body {  
-  background: rgb(0, 2, 18);
+  --default-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --primary-color: rgb(228, 104, 21);
+  --content-lower: rgb(141, 127, 127);
+  --body-background: rgb(255, 253, 246);
+  --input-background: var(--primary-color);
+  --td-color: rgb(130, 130, 130);
+  --transparent-bg: rgba(255, 229, 209, 0.5);
+  --transparent-border: rgba(245, 201, 120, 0.1);
+  --box-shadow: rgba(238, 200, 129, 0.2);
+  --subtext-color: rgb(180, 188, 208);
+  --title-color: rgb(124, 109, 109);
+  --title-hover-color: rgb(124, 109, 109);
+  --title-a-color: rgb(124, 109, 109);
+  --page-top-color: var(--primary-color);
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --default-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --primary-color: rgb(158, 129, 238);
+    --content-lower: rgb(113, 124, 153);
+    --body-background: rgb(0, 2, 18);
+    --input-background: rgb(132, 0, 255);
+    --td-color: rgb(130, 130, 130);
+    --transparent-bg: rgba(174, 167, 235, 0.13);
+    --transparent-border: rgba(255, 255, 255, 0.1);
+    --box-shadow: rgba(158, 129, 238, 0.2);
+    --subtext-color: rgb(180, 188, 208);
+    --title-color: rgb(236, 236, 236);
+    --title-hover-color: rgba(205, 213, 233, .95);
+    --title-a-color: rgb(205, 213, 233);
+    --page-top-color: var(--content-lower);
+  }
+}
+
+body {
+  background: var(--body-background);
   color: var(--primary-color);
   font-family: var(--default-font) !important;
 }
@@ -28,8 +57,8 @@ input {
   font-size: 1rem !important;
 }
 
-input[type = submit] {
-  background-color: rgb(132, 0, 255);
+input[type=submit] {
+  background-color: var(--input-background);
   color: #fff;
   font-family: var(--default-font);
   font-size: 1.2rem;
@@ -39,7 +68,7 @@ input[type = submit] {
   text-transform: capitalize;
 }
 
-input[type = submit]:hover {
+input[type=submit]:hover {
   cursor: pointer;
 }
 
@@ -47,11 +76,11 @@ td {
   color: var(--primary-color) !important;
   font-family: var(--default-font) !important;
   font-size: 10pt;
-  color: #828282;
+  color: var(--td-color);
 }
 
 #hnmain {
-  background: rgb(0, 2, 18);
+  background: var(--body-background);
 }
 
 .pagetop {
@@ -62,20 +91,28 @@ td {
 }
 
 .pagetop a:link {
-  color: var(--content-lower);
-  text-transform: capitalize !important;
+  color: var(--page-top-color);
   padding-right: 10px;
 }
 
 .pagetop a:visited {
+  color: var(--page-top-color) !important;
+}
+
+.toptext {
+  font-family: var(--default-font) !important;
+  font-size: 1.1rem !important;
   color: var(--content-lower) !important;
+  line-height: auto !important;
 }
 
-.pagetop .hnname a:link, .pagetop .hnname a:visited {
+
+.pagetop .hnname a:link,
+.pagetop .hnname a:visited {
   color: var(--primary-color) !important;
   text-transform: uppercase !important;
   letter-spacing: .75px !important;
-  font-size: .9rem;
+  font-size: .95rem;
   line-height: .9rem;
   font-weight: 6800;
   font-family: var(--secondary-font);
@@ -85,30 +122,30 @@ td {
 }
 
 #hnmain tbody:first-child tr:first-child td:first-child:not(.title) {
-  background: rgba(174, 167, 235, 0.13);
+  background: var(--transparent-bg);
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(255, 255, 255, 0.1);
-  padding: 16px;
+  border-color: var(--transparent-border);
+  /* padding: 16px; */
   display: inline-block;
   margin: 20px 0px 10px;
   width: 100%;
   border-radius: 8px;
   box-sizing: border-box;
-  box-shadow: 0px 2px 20px rgba(158, 129, 238,0.2);
-  -webkit-box-shadow: 0px 2px 20px rgba(158, 129, 2385,0.2);
+  box-shadow: 0px 2px 20px var(--box-shadow);
+  -webkit-box-shadow: 0px 2px 20px var(--box-shadow);
 }
 
 /* hide logo */
-#hnmain tbody:first-child tr:first-child td:first-child table tbody tr td:first-child {
+#hnmain tbody:first-child tr:first-child td:first-child table tbody tr td:first-child:has(a) {
   display: none;
   width: 0;
 }
 
-.subtext {  
+.subtext {
   font-family: var(--default-font) !important;
   font-size: 1rem !important;
-  color: rgb(180, 188, 208) !important;
+  color: var(--subtext-color) !important;
   display: table-cell;
 }
 
@@ -122,8 +159,8 @@ tr .athing {
 }
 
 .votelinks {
-  background: rgba(174, 167, 235, 0.13);
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  background: var(--transparent-border);
+  border: 1px solid var(--transparent-bg) !important;
   border-radius: 4px;
   width: 20px !important;
   height: 32px !important;
@@ -142,7 +179,6 @@ tr .athing {
   border-style: solid !important;
   border-width: 0 5px 9px 5px !important;
   border-color: transparent transparent var(--primary-color) transparent !important;
-  transform: rotate(0deg) !important;
   background-image: none !important;
   margin: 2px 12px 2px 6px !important;
   top: 7px !important;
@@ -153,14 +189,21 @@ tr .athing {
 
 .votearrow:hover {
   border-color: transparent transparent var(--primary-color) transparent !important;
+}
+
+.votearrow:not(.rotate180):hover {
   transform: scale(1.2) !important;
 }
 
+.votearrow.rotate180:hover {
+  transform: scale(1.2) rotate(180deg) !important;
+}
+
 .title {
   font-family: var(--default-font) !important;
   font-size: 1.2rem !important;
   font-weight: 600;
-  color: rgb(236, 236, 236) !important;
+  color: var(--title-color) !important;
   overflow: hidden;
   margin-bottom: 30px !important;
   padding: 1px;
@@ -172,13 +215,13 @@ tr .athing {
 
 .titleline a:hover {
   text-decoration: underline;
-  color: rgb(205, 213, 233, .95) !important;
+  color: var(--title-hover-color) !important;
 }
 
 .title a {
-  color: rgb(205, 213, 233) !important;
+  color: var(--title-a-color) !important;
   text-decoration: none;
-} 
+}
 
 .title a:visited {
   color: var(--primary-color) !important;
@@ -195,11 +238,13 @@ tr .athing {
   font-size: .9rem !important;
 }
 
-.subtext a:link, .subtext a:visited {
+.subtext a:link,
+.subtext a:visited {
   color: var(--content-lower) !important;
 }
 
-.sitebit.comhead a, .sitebit.comhead {
+.sitebit.comhead a,
+.sitebit.comhead {
   font-size: 1.2rem !important;
   font-weight: 300;
   font-family: var(--default-font) !important;
@@ -218,7 +263,8 @@ tr .athing {
   margin-left: 8px;
 }
 
-.hnmore a, font {
+.hnmore a,
+font {
   color: var(--primary-color) !important;
 }
 
@@ -236,13 +282,15 @@ tr .athing {
   background-color: transparent;
 }
 
-.yclinks a, .yclinks, form {
+.yclinks a,
+.yclinks,
+form {
   font-family: var(--default-font) !important;
   color: var(--content-lower) !important;
   font-size: .9rem !important;
 }
 
-.comment .c00{
+.comment .c00 {
   color: var(--content-lower) !important;
   font-size: 1.1rem;
   line-height: 1.4rem;
@@ -257,7 +305,8 @@ tr .athing {
   color: var(--primary-color) !important;
 }
 
-.itemlist tbody, .itemlist {
+.itemlist tbody,
+.itemlist {
   width: 100% !important;
 }
 
@@ -271,7 +320,7 @@ tr .athing {
   border: none !important;
   background: transparent !important;
   box-shadow: none !important;
-  padding: 0px !important;
+  /* padding: 0px !important; */
 }
 
 .comment-tree .votelinks {