diff --git a/.gitattributes b/.gitattributes
index 30ee9a2..9512ba2 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,2 @@
 dist/*.js	binary
-dist/*.map	binary
+dist/*.css	binary
diff --git a/index.html b/index.html
index 2eff704..fb96f89 100644
--- a/index.html
+++ b/index.html
@@ -15,10 +15,12 @@
     form-action 'none';">
 
   <title>Skythread</title>
+
   <link href="./fontawesome/fontawesome.min.css" rel="stylesheet">
   <link href="./fontawesome/solid.min.css" rel="stylesheet">
   <link href="./fontawesome/regular.min.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet">
+  <link href="dist/skythread.css" rel="stylesheet">
 </head>
 <body>
   <div id="loader"><img src="icons/sunny.png"></div>
diff --git a/src/components/BiohazardDialog.svelte b/src/components/BiohazardDialog.svelte
index 03f9878..8d2603b 100644
--- a/src/components/BiohazardDialog.svelte
+++ b/src/components/BiohazardDialog.svelte
@@ -39,3 +39,20 @@
     <input type="submit" value="Nope, I'd rather not 🙈" onclick={hideBiohazard}>
   </p>
 </form>
+
+<style>
+  form {
+    width: 400px;
+  }
+
+  p.submit {
+    margin-top: 40px;
+    margin-bottom: 20px;
+  }
+
+  input[type="submit"] {
+    width: 180px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/HomeSearch.svelte b/src/components/HomeSearch.svelte
index 66b5031..b3e318f 100644
--- a/src/components/HomeSearch.svelte
+++ b/src/components/HomeSearch.svelte
@@ -41,3 +41,33 @@
 <form method="get" {onsubmit}>
   🌤 <input type="text" placeholder="Paste a thread link or type a #hashtag" bind:value={query} bind:this={searchField}>
 </form>
+
+<style>
+  form {
+    border: 2px solid hsl(210, 100%, 80%);
+    border-radius: 10px;
+    padding: 15px 20px;
+    margin-left: 50px;
+  }
+
+  input {
+    font-size: 16pt;
+    width: 600px;
+    border: 0;
+    margin-left: 8px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    form {
+      border-color: hsl(210, 40%, 60%);
+    }
+
+    form input {
+      background-color: transparent;
+    }
+  }
+</style>
diff --git a/src/components/LikeStatsTable.svelte b/src/components/LikeStatsTable.svelte
index 4a41e28..3e03a69 100644
--- a/src/components/LikeStatsTable.svelte
+++ b/src/components/LikeStatsTable.svelte
@@ -18,3 +18,57 @@
     {/each}
   </tbody>
 </table>
+
+<style>
+  .scan-result {
+    border: 1px solid #333;
+    border-collapse: collapse;
+    display: none;
+    float: left;
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  td, th {
+    border: 1px solid #333;
+    padding: 5px 10px;
+  }
+
+  th {
+    text-align: center;
+    background-color: hsl(207, 100%, 86%);
+    padding: 12px 10px;
+  }
+
+  td.no {
+    font-weight: bold;
+    text-align: right;
+  }
+
+  td.handle {
+    width: 280px;
+  }
+
+  td.count {
+    padding: 5px 15px;
+  }
+
+  .avatar {
+    width: 24px;
+    height: 24px;
+    border-radius: 14px;
+    vertical-align: middle;
+    margin-right: 2px;
+    padding: 2px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .scan-result, td, th {
+      border-color: #888;
+    }
+
+    th {
+      background-color: hsl(207, 90%, 25%);
+    }
+  }
+</style>
diff --git a/src/components/LikeStatsView.svelte b/src/components/LikeStatsView.svelte
index 83d1efa..66e3868 100644
--- a/src/components/LikeStatsView.svelte
+++ b/src/components/LikeStatsView.svelte
@@ -50,3 +50,27 @@
   <LikeStatsTable cssClass="given-likes" header="❤️ Likes from you:" users={givenLikesUsers} />
   <LikeStatsTable cssClass="received-likes" header="💛 Likes on your posts:" users={receivedLikesUsers} />
 {/if}
+
+<style>
+  input[type="range"] {
+    width: 250px;
+    vertical-align: middle;
+  }
+
+  input[type="submit"] {
+    font-size: 12pt;
+    margin: 5px 0px;
+    padding: 5px 10px;
+  }
+
+  progress {
+    width: 300px;
+    margin-left: 10px;
+    vertical-align: middle;
+    display: none;
+  }
+
+  :global(.scan-result.given-likes) {
+    margin-right: 100px;
+  }
+</style>
diff --git a/src/components/LoginDialog.svelte b/src/components/LoginDialog.svelte
index 137d7db..6b63fb6 100644
--- a/src/components/LoginDialog.svelte
+++ b/src/components/LoginDialog.svelte
@@ -71,9 +71,77 @@
 
   <p class="submit">
     {#if !submitting}
-      <input id="login_submit" type="submit" value="Log in">
+      <input type="submit" value="Log in">
     {:else}
-      <i id="cloudy" class="fa-solid fa-cloud fa-beat fa-xl"></i>
+      <i class="cloudy fa-solid fa-cloud fa-beat fa-xl"></i>
     {/if}
   </p>
 </form>
+
+<style>
+  .cloudy {
+    color: hsl(210, 60%, 75%);
+    margin: 14px 0px;
+  }
+
+  .info-box {
+    border: 1px solid hsl(45, 100%, 60%);
+    background-color: hsl(50, 100%, 96%);
+    width: 360px;
+    font-size: 11pt;
+    border-radius: 6px;
+  }
+
+  .info-box p {
+    margin: 15px 15px;
+    text-align: left;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    form {
+      border-color: hsl(210, 20%, 40%);
+      background-color: hsl(210, 12%, 25%);
+    }
+
+    .close {
+      color: hsl(210, 20%, 50%);
+      opacity: 0.6;
+    }
+
+    .close:hover {
+      color: hsl(210, 20%, 50%);
+      opacity: 1.0;
+    }
+
+    p.info a {
+      color: #888;
+    }
+
+    input[type="text"], input[type="password"] {
+      border-color: #666;
+    }
+
+    input[type="submit"] {
+      border-color: hsl(210, 15%, 40%);
+      background-color: hsl(210, 12%, 35%);
+    }
+
+    input[type="submit"]:active {
+      border-color: hsl(210, 15%, 35%);
+      background-color: hsl(210, 12%, 30%);
+    }
+
+    .cloudy {
+      color: hsl(210, 60%, 75%);
+    }
+
+    .info-box {
+      border-color: hsl(45, 100%, 45%);
+      background-color: hsl(50, 40%, 30%);
+    }
+
+    .info-box a {
+      color: hsl(45, 100%, 50%);
+    }
+  }
+</style>
diff --git a/style.css b/style.css
index 3a7af23..877f133 100644
--- a/style.css
+++ b/style.css
@@ -63,24 +63,6 @@ a:visited {
   padding-bottom: 5%;
 }
 
-#search form {
-  border: 2px solid hsl(210, 100%, 80%);
-  border-radius: 10px;
-  padding: 15px 20px;
-  margin-left: 50px;
-}
-
-#search input {
-  font-size: 16pt;
-  width: 600px;
-  border: 0;
-  margin-left: 8px;
-}
-
-#search input:focus {
-  outline: none;
-}
-
 #account {
   position: fixed;
   top: 10px;
@@ -252,39 +234,6 @@ a:visited {
   border: 1px solid hsl(210, 90%, 80%);
 }
 
-#login #cloudy {
-  color: hsl(210, 60%, 75%);
-  margin: 14px 0px;
-}
-
-#login .info-box {
-  border: 1px solid hsl(45, 100%, 60%);
-  background-color: hsl(50, 100%, 96%);
-  width: 360px;
-  font-size: 11pt;
-  border-radius: 6px;
-}
-
-#login .info-box p {
-  margin: 15px 15px;
-  text-align: left;
-}
-
-#biohazard_dialog form {
-  width: 400px;
-}
-
-#biohazard_dialog p.submit {
-  margin-top: 40px;
-  margin-bottom: 20px;
-}
-
-#biohazard_dialog input[type="submit"] {
-  width: 180px;
-  margin-left: 5px;
-  margin-right: 5px;
-}
-
 #loader {
   display: none;
   position: fixed;
@@ -978,70 +927,6 @@ p.back i {
   display: none;
 }
 
-#like_stats_page input[type="range"] {
-  width: 250px;
-  vertical-align: middle;
-}
-
-#like_stats_page input[type="submit"] {
-  font-size: 12pt;
-  margin: 5px 0px;
-  padding: 5px 10px;
-}
-
-#like_stats_page progress {
-  width: 300px;
-  margin-left: 10px;
-  vertical-align: middle;
-  display: none;
-}
-
-#like_stats_page .scan-result {
-  border: 1px solid #333;
-  border-collapse: collapse;
-  display: none;
-  float: left;
-  margin-top: 20px;
-  margin-bottom: 40px;
-}
-
-#like_stats_page .given-likes {
-  margin-right: 100px;
-}
-
-#like_stats_page .scan-result td, #like_stats_page .scan-result th {
-  border: 1px solid #333;
-  padding: 5px 10px;
-}
-
-#like_stats_page .scan-result th {
-  text-align: center;
-  background-color: hsl(207, 100%, 86%);
-  padding: 12px 10px;
-}
-
-#like_stats_page .scan-result td.no {
-  font-weight: bold;
-  text-align: right;
-}
-
-#like_stats_page .scan-result td.handle {
-  width: 280px;
-}
-
-#like_stats_page .scan-result td.count {
-  padding: 5px 15px;
-}
-
-#like_stats_page .scan-result .avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 14px;
-  vertical-align: middle;
-  margin-right: 2px;
-  padding: 2px;
-}
-
 #private_search_page {
   display: none;
 }
@@ -1140,14 +1025,6 @@ p.back i {
     filter: invert();
   }
 
-  #search form {
-    border-color: hsl(210, 40%, 60%);
-  }
-
-  #search form input {
-    background-color: transparent;
-  }
-
   #account.active {
     color: #333;
   }
@@ -1171,52 +1048,6 @@ p.back i {
     background-color: rgba(240, 240, 240, 0.15);
   }
 
-  #login form {
-    border-color: hsl(210, 20%, 40%);
-    background-color: hsl(210, 12%, 25%);
-  }
-
-  #login .close {
-    color: hsl(210, 20%, 50%);
-    opacity: 0.6;
-  }
-
-  #login .close:hover {
-    color: hsl(210, 20%, 50%);
-    opacity: 1.0;
-  }
-
-  #login p.info a {
-    color: #888;
-  }
-
-  #login input[type="text"], #login input[type="password"] {
-    border-color: #666;
-  }
-
-  #login input[type="submit"] {
-    border-color: hsl(210, 15%, 40%);
-    background-color: hsl(210, 12%, 35%);
-  }
-
-  #login input[type="submit"]:active {
-    border-color: hsl(210, 15%, 35%);
-    background-color: hsl(210, 12%, 30%);
-  }
-
-  #login #cloudy {
-    color: hsl(210, 60%, 75%);
-  }
-
-  #login .info-box {
-    border-color: hsl(45, 100%, 45%);
-    background-color: hsl(50, 40%, 30%);
-  }
-
-  #login .info-box a {
-    color: hsl(45, 100%, 50%);
-  }
-
   #github {
     filter: invert();
   }
@@ -1384,14 +1215,6 @@ p.back i {
     background-color: hsla(207, 90%, 25%, 0.4);
   }
 
-  #like_stats_page .scan-result, #like_stats_page .scan-result td, #like_stats_page .scan-result th {
-    border-color: #888;
-  }
-
-  #like_stats_page .scan-result th {
-    background-color: hsl(207, 90%, 25%);
-  }
-
   #private_search_page .search-query {
     border: 1px solid #666;
   }