src/App.svelte

@@ -41,6 +41,7 @@
 </main>
 
 <style>
+
   /* desktop style */
 
   #Content {
@@ -51,8 +52,8 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background-color: #12082b;
-    color: #ffffff;
+    background-color: var(--background-color);
+    color: var(--text-color);
   }
   #Feed {
     width: 65%;
@@ -74,8 +75,8 @@
     width: 35%;
     display: flex;
     flex-direction: column; 
-    border: 1px solid #8054f0;
-    background-color: #0d0620;
+    border: 1px solid var(--border-color);
+    background-color: var(--content-background-color);
     height: 80vh;
     padding: 20px;
     margin-left: 20px;

src/app.css

@@ -3,6 +3,18 @@
   src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
 }
 
+:root {
+  --link-color: #646cff;
+  --link-hover-color: #535bf2;
+  --background-color: #12082b;
+  --header-background-color: #1f1145;
+  --content-background-color: #0d0620;
+  --text-color: white;
+  --border-color: #8054f0;
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: #8054f0;
+}
+
 ::-webkit-scrollbar {
   width: 0px;
   background: transparent;
@@ -35,11 +47,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--link-color);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 
@@ -49,11 +61,11 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-  background-color: #12082b;
+  background-color: var(--background-color);
   font-family: 'ProggyClean', monospace;
   font-size: 24px;
-  color: white;
-  border-color: #8054f0;
+  color: var(--text-color);
+  border-color: var(--border-color);
 }
 
 h1 {
@@ -69,5 +81,3 @@ h1 {
   margin-right: auto;
   text-align: center;
 }
-
-

src/lib/AccountComponent.svelte

@@ -24,10 +24,10 @@
     display: flex;
     text-align: start;
     align-items: center;
-    background-color: #12082b;
+    background-color: var(--background-color);
     padding: 0px;
     margin-bottom: 15px;
-    border: 1px solid #8054f0;
+    border: 1px solid var(--border-color);
   }
   #accountName {
     margin-left: 10px;
@@ -43,6 +43,6 @@
     width: 50px;
     height: 50px;
     margin: 0px;
-    border-right: #8054f0 1px solid;
+    border-right: var(--border-color) 1px solid;
   }
 </style>

src/lib/PostComponent.svelte

@@ -77,8 +77,8 @@
         <a
           id="postLink"
           href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}"
-          >{moment(post.timenotstamp).isBefore(moment().subtract(1, 'month'))
-            ? moment(post.timenotstamp).format('MMM D, YYYY')
+          >{moment(post.timenotstamp).isBefore(moment().subtract(1, "month"))
+            ? moment(post.timenotstamp).format("MMM D, YYYY")
             : moment(post.timenotstamp).fromNow()}</a
         >
       </p>
@@ -145,14 +145,15 @@
 </div>
 
 <style>
+
   a:hover {
     text-decoration: underline;
   }
   #postContainer {
     display: flex;
     flex-direction: column;
-    border: 1px solid #8054f0;
-    background-color: black;
+    border: 1px solid var(--border-color);
+    background-color: var(--background-color);
     margin-bottom: 15px;
     overflow-wrap: break-word;
   }
@@ -161,29 +162,29 @@
     flex-direction: row;
     align-items: center;
     justify-content: start;
-    background-color: #1f1145;
+    background-color: var(--header-background-color);
     padding: 0px 0px;
     height: fit-content;
-    border-bottom: 1px solid #8054f0;
+    border-bottom: 1px solid var(--border-color);
     font-weight: bold;
     overflow-wrap: break-word;
     height: 60px;
   }
   #displayName {
-    color: white;
+    color: var(--text-color);
     font-size: 1.2em;
     padding: 0;
     margin: 0;
   }
   #handle {
-    color: #8054f0;
+    color: var(--border-color);
     font-size: 0.8em;
     padding: 0;
     margin: 0;
   }
 
   #postLink {
-    color: #8054f0;
+    color: var(--border-color);
     font-size: 0.8em;
     padding: 0;
     margin: 0;
@@ -193,8 +194,8 @@
     text-align: start;
     flex-direction: column;
     padding: 10px;
-    background-color: #0d0620;
-    color: white;
+    background-color: var(--content-background-color);
+    color: var(--text-color);
     overflow-wrap: break-word;
   }
   #replyingText {
@@ -224,7 +225,7 @@
     height: 100%;
     margin: 0px;
     margin-left: 0px;
-    border-right: #8054f0 1px solid;
+    border-right: var(--border-color) 1px solid;
   }
   #carouselContainer {
     position: relative;
@@ -249,16 +250,16 @@
   .indicator {
     width: 8px;
     height: 8px;
-    background-color: #4a4a4a;
+    background-color: var(--indicator-inactive-color);
   }
   .indicator.active {
-    background-color: #8054f0;
+    background-color: var(--indicator-active-color);
   }
   #prevBtn,
   #nextBtn {
     background-color: rgba(31, 17, 69, 0.7);
-    color: white;
-    border: 1px solid #8054f0;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
     width: 30px;
     height: 30px;
     cursor: pointer;