dark mode

7 files changed, 123 insertions, 59 deletions

diff --git a/public/css/404.css b/public/css/404.css
index 38035a4..dcb4a0f 100644
--- a/public/css/404.css
+++ b/public/css/404.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary)
 }
 
 .error {
diff --git a/public/css/header.css b/public/css/header.css
index a491f33..9811eb4 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -1,6 +1,6 @@
 #header {
     height: 3.5em;
-    background-color: white;
+    background-color: var(--primary);
     position: fixed;
     width: 100vw;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 8px 16px rgba(0, 0, 0, .05);
@@ -36,16 +36,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #606770;
+    color: var(--medium);
 }
 
 #header .buttons a:hover {
-    background-color: #dddfe2;
+    background-color: var(--hover);
 }
 
 .selected {
-    color: #1778f2 !important;
-    border-bottom: 3px solid #1778f2;
+    color: var(--logo) !important;
+    border-bottom: 3px solid var(--logo);
 }
 
 #header .pfp, #header .pfp img {
diff --git a/public/css/home.css b/public/css/home.css
index 2686ffd..b68314d 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 #posts, #create {
@@ -11,7 +11,7 @@ body {
 .post, .create {
     width: 40em;
     height: fit-content;
-    background-color: white;
+    background-color: var(--primary);
     border-radius: 10px;
     padding: 15px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
@@ -20,6 +20,7 @@ body {
 
 .post {
     padding-bottom: 0;
+    color: var(--text);
 }
 
 .create {
@@ -29,14 +30,14 @@ body {
 
 .create button {
     all: unset;
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     border-radius: 3em;
     margin-left: 1em;
     flex: 1;
 }
 
 .create button:hover {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     cursor: pointer;
 }
 
@@ -64,12 +65,12 @@ body {
     cursor: pointer;
     padding: 7px;
     border-radius: 5px;
-    color: #606770;
+    color: var(--medium);
     margin: 3px
 }
 
 .postbuttons>span:hover {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
 }
 
 .postname {
@@ -90,7 +91,9 @@ body {
 }
 
 .blue {
-    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%);
+    filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) 
+    saturate(200%) saturate(200%) saturate(200%) saturate(147.75%)
+    hue-rotate(202deg) brightness(97%) contrast(96%);
 }
 
 .like {
@@ -103,7 +106,7 @@ body {
 
 .createpost {
     position: relative;
-    background-color: white;
+    background-color: var(--primary);
     width: 450px;
     padding: 20px;
     border-radius: .5em;
@@ -124,6 +127,8 @@ body {
     width: 100%;
     height: 120px;
     margin-bottom: 20px;
+    background-color: transparent;
+    color: var(--text);
 }
 
 .createpost>span {
@@ -157,7 +162,7 @@ body {
     display: flex;
     flex-direction: column;
     margin-left: 10px;
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     border-radius: 10px;
     padding: 10px;
     padding-right: 10px;
@@ -177,6 +182,6 @@ body {
     padding: 10px;
     border-radius: 10px;
     width: calc(100% - 20px);
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     font-family: sfpro;
 }
\ No newline at end of file
diff --git a/public/css/login.css b/public/css/login.css
index 7e5cde7..82fede5 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,5 +1,5 @@
 .login {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
     display: flex;
     justify-content: center;
     align-content: center;
@@ -11,7 +11,7 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    background-color: white;
+    background-color: var(--primary);
     box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
     border-radius: 8px;
     width: 396px;
diff --git a/public/css/main.css b/public/css/main.css
index 587f8a9..8ce5254 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,11 +1,28 @@
 body {
-    background-color: white;
+    --primary: #ffffff;
+    --secondary: #f0f2f5;
+    --hover: #e4e6e8;
+    --light: #dadde1;
+    --mild: #dadde1;
+    --medium: #606770;
+    --extreme: #1d2129;
+    --logo: #1778f2;
+    --error: #f02849;
+    --success: #30ab5a;
+    --text: #000000;
+    --banner: #949494;
+    --popup: #ffffffcc;
+}
+
+body {
+    background-color: var(--primary);
     width: 100vw;
     height: 100vh;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
+    color: var(--text);
 }
 
 @font-face {
@@ -24,7 +41,7 @@ body {
 }
 
 .logo {
-    color: #1778f2;
+    color: var(--logo);
     font-size: 3.5em;
     font-family: facebook;
 }
@@ -39,12 +56,16 @@ body {
 
 .btext {
     font-family: sfpro;
-    color: #1778f2
+    color: var(--logo)
+}
+
+.bltext {
+    color: var(--logo)
 }
 
 .error {
     font-family: sfpro;
-    color: #f02849;
+    color: var(--error);
     padding-top: 10px;
     margin-bottom: -10px;
     font-size: 15px;
@@ -52,12 +73,12 @@ body {
 
 .gtext {
     font-family: sfpro;
-    color: #606770
+    color: var(--medium)
 }
 
 .label {
     font-family: sfpro;
-    color: #606770;
+    color: var(--medium);
     font-size: 15px;
     padding-top: 10px;
     padding-left: 10px;
@@ -103,19 +124,19 @@ span {
 footer {
     bottom: 0;
     height: 400px;
-    background-color: white;
+    background-color: var(--primary);
 }
 
 input {
     flex: 1;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     padding: 10px;
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 18px;
 }
 
@@ -128,12 +149,12 @@ input {
     display: inline-block;
     position: relative;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 15px;
     flex: 1 0 auto;
 }
@@ -143,7 +164,7 @@ input {
     display: block;
     box-sizing: border-box;
     width: auto;
-    color: #1d2129;
+    color: var(--extreme);
 }
 
 [type="radio"] {
@@ -159,13 +180,13 @@ select {
     all: unset;
     flex: 1;
     font-family: sfpro;
-    background-color: white;
+    background-color: var(--primary);
     padding: 10px;
     margin: 10px;
     margin-bottom: 0;
     border-radius: 5px;
-    border: 1px solid #dddfe2;
-    color: #1d2129;
+    border: 1px solid var(--light);
+    color: var(--extreme);
     font-size: 15px;
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAADFBMVEVMaXEFBQUFBQUFBQXG+MOgAAAAA3RSTlMAn3BcqiM3AAAAOUlEQVQIW53BsQ2AMAwAMJelV6C80qPYw4k9JmskbqA2px5uNIlcoxF7FmbFxuhckA2iwNzgev3wAR4FDUQbc/qhAAAAAElFTkSuQmCC");
     background-position: right 10px center;
@@ -174,14 +195,14 @@ select {
 }
 
 input:focus {
-    border: 1px solid #1778f2;
+    border: 1px solid var(--logo);
 }
 
 .primary {
     all: unset;
     font-family: sfpro;
-    background-color: #1778f2;
-    color: white;
+    background-color: var(--logo);
+    color: var(--text);
     padding: 10px;
     margin: 20px;
     border-radius: 5px;
@@ -193,8 +214,8 @@ input:focus {
 .success {
     all: unset;
     font-family: sfpro;
-    background-color: #30ab5a;
-    color: white;
+    background-color: var(--success);
+    color: var(--text);
     padding: 10px;
     margin-left: 10px;
     margin-right: 10px;
@@ -211,16 +232,18 @@ input:focus {
     width: calc(100% - 40px);
     margin-left: 20px;
     margin-right: 20px;
-    border-bottom: 1px solid #dadde1;
+    border-bottom: 1px solid var(--light);
     margin-bottom: 10px;
     margin-top: 10px;
+    z-index: 2;
 }
 
 .fullline {
     width: calc(100%);
-    border-bottom: 1px solid #dadde1;
+    border-bottom: 1px solid var(--light);
     margin-bottom: 10px;
     margin-top: 10px;
+    z-index: 2;
 }
 
 footer {
@@ -236,7 +259,7 @@ footer {
     position: absolute;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(255, 255, 255, .8);
+    background-color: var(--popup);
     margin: 0;
     padding: 0;
     top: 0;
@@ -280,7 +303,7 @@ footer {
     width: 2.5em;
     height: 2.5em;
     border-radius: 3em;
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     flex-shrink: 0;
 }
 
@@ -303,5 +326,40 @@ form {
 }
 
 #load a:hover {
-    border-bottom: #606770 1px solid;
+    border-bottom: var(--medium) 1px solid;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        --primary: #242424 !important;
+        --secondary: #181818 !important;
+        --hover: #1b1b1b !important;
+        --light: #3e4042 !important;
+        --mild: #1b1b1b !important;
+        --medium: #e2ded6 !important;
+        --extreme: #e2ded6 !important;
+        --logo: #1778f2 !important;
+        --error: #f02849 !important;
+        --success: #30ab5a !important;
+        --text: #ffffff !important;
+        --banner: #6b6b6b !important;
+        --popup: #242424cc !important;
+    }
+    
+    body .icons {
+        filter: invert(100%) !important;
+    }
+    
+    body .blue {
+        filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) 
+        saturate(200%) saturate(200%) saturate(200%) saturate(147.75%)
+        hue-rotate(202deg) brightness(97%) contrast(96%) !important;
+    }
+    
+    body select {
+        filter: invert(100%) !important;
+        background-color: var(--primary) I !important;
+        color: var(--primary) !important;
+        border: 1px solid var(--primary) !important;
+    }
 }
\ No newline at end of file
diff --git a/public/css/people.css b/public/css/people.css
index b8cf025..5d84411 100644
--- a/public/css/people.css
+++ b/public/css/people.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 #users {
@@ -9,9 +9,10 @@ body {
 }
 
 .person {
+    color: var(--text);
     width: 30em;
     height: fit-content;
-    background-color: white;
+    background-color: var(--primary);
     border-radius: 10px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
     margin-bottom: 1.5em;
@@ -25,7 +26,7 @@ body {
     height: 10em;
     padding: 0;
     display: block;
-    background-color: #e4e6e8;
+    background-color: var(--banner);
     flex-shrink: 0;
 }
 
diff --git a/public/css/profile.css b/public/css/profile.css
index 467c756..3a16d56 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #f0f2f5;
+    background-color: var(--secondary);
 }
 
 .spacer {
@@ -7,7 +7,7 @@ body {
 }
 
 #top {
-    background-color: white;
+    background-color: var(--primary);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -16,7 +16,7 @@ body {
 }
 
 #banner {
-    background-image: linear-gradient(#949494, white, white);
+    background-image: linear-gradient(var(--banner), var(--primary), var(--primary));
     height: 30em;
     width: 100%;
     display: flex;
@@ -26,7 +26,7 @@ body {
 #banner div, #banner img {
     width: 80em;
     height: inherit;
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     border-radius: 0px 0px 20px 20px;
 }
 
@@ -37,11 +37,11 @@ body {
 }
 
 .face {
-    background-color: #e4e6e8;
+    background-color: var(--hover);
     height: 12em;
     width: 12em;
     border-radius: 7em;
-    border: solid 5px white;
+    border: solid 5px var(--primary);
     margin-top: -2em;
     margin-left: 2em;
     margin-right: 2em;
@@ -73,18 +73,18 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #606770;
+    color: var(--medium);
     cursor: pointer;
     flex: 0;
 }
 
 .profilebuttons button:hover {
-    background-color: #dddfe2;
+    background-color: var(--mild);
 }
 
 .selected {
-    color: #1778f2 !important;
-    border-bottom: 3px solid #1778f2 !important;
+    color: var(--logo) !important;
+    border-bottom: 3px solid var(--logo) !important;
 }
 
 #about {
@@ -100,7 +100,7 @@ body {
 }
 
 #about .ltext {
-    border-right: 2px solid #dadde1;
+    border-right: 2px solid var(--mild);
     padding: 10px;
     padding-right: 3em;
 }