CSS variables for coloring

web/src/app/_components/styles/header.scss

@@ -4,13 +4,13 @@
 	align-items: center;
 	width: 100vw;
 	height: 60px;
-	background: rgb(59,64,70);
+	background: var(--header-grad-left);
-	background: linear-gradient(180deg, #363b40 0%, #353a40 100%);
+	background: linear-gradient(180deg, var(--header-grad-left) 0%, var(--header-grad-right) 100%);
 
 	button {
 		background-color: transparent;
 		border: 0;
-		color: white;
+		color: var(--header-button-left);
 	}
 
 	.left {
@@ -28,10 +28,10 @@
 
 		button {
 			font-size: 1rem;
-			color: rgb(180,180,180);
+			color: var(--header-button-right);
 
 			&:hover {
-				color: white
+				color: var(--header-button-hover)
 			}
 		}
 	}

web/src/app/globals.scss

@@ -1,5 +1,4 @@
-$review-border-color: #c8c8c8;
+$review-border: 1px solid var(--review-border);
-$review-border: 1px solid $review-border-color;
 
 @mixin border-with-radius {
     border: $review-border {
@@ -8,13 +7,42 @@ $review-border: 1px solid $review-border-color;
 }
 
 :root {
-	color-scheme: light;
+	color-scheme: light dark;
+
+	--page:                white;
+	--header-grad-left:    #363b40;
+	--header-grad-right:   #353a40;
+	--header-button-left:  white;
+	--header-button-right: #b4b4b4;
+	--header-button-hover: white;
+	--review-border:       #c8c8c8;
+	--text-color:          #1e1e1e;
+	--anchor-link-review:  #008fd6;
+	--window-header:       #f5f5f5;
+	--comment-highlighted: #ffffd7;
+	--comment-area:        white;
+
+	@media (prefers-color-scheme: dark) {
+		--page:                rgb(15,15,15);
+		--header-grad-left:    #363b40;
+		--header-grad-right:   #353a40;
+		--header-button-left:  white;
+		--header-button-right: #b4b4b4;
+		--header-button-hover: white;
+		--review-border:       rgb(50,50,50);
+		--text-color:          rgb(230,230,230);
+		--anchor-link-review:  #008fd6;
+		--window-header:       rgb(10,10,10);
+		--comment-highlighted: #ffffd7;
+		--comment-area:        rgb(20,20,20);
+	}
 }
 
 body {
 	font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
 	box-sizing: border-box;
 	margin: 0;
+	background-color: var(--page);
 }
 
 button {

web/src/app/submissions/[submissionId]/(styles)/page.scss

@@ -18,7 +18,7 @@
     display: block;
     width: 100%;
     height: 1px;
-    background-color: globals.$review-border-color;
+    background-color: var(--review-border);
 }
 
 .by-creator {

web/src/app/submissions/[submissionId]/(styles)/page/commentWindow.scss

@@ -5,6 +5,7 @@
     resize: none;
     width: 100%;
     height: 100px;
+    background-color: var(--comment-area)
 }
 
 .leave-comment-window {
@@ -36,7 +37,7 @@
     header {
         display: flex;
         align-items: center;
-        background-color: #f5f5f5;
+        background-color: var(--window-header);
         border-bottom: globals.$review-border;
         height: 45px;
 

web/src/app/submissions/[submissionId]/(styles)/page/comments.scss

@@ -16,7 +16,7 @@ $comments-size: 60px;
 
         //BhopMaptest comment
         &[data-highlighted="true"] {
-            background-color: #ffffd7;
+            background-color: var(--comment-highlighted);
         }
         > img {
             border-radius: 50%;

web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss

@@ -27,7 +27,7 @@
     header {
         display: flex;
         align-items: center;
-        background-color: #f5f5f5;
+        background-color: var(--window-header);
         border-bottom: globals.$review-border;
         height: 45px;
 

web/src/app/submissions/[submissionId]/(styles)/page/review.scss

@@ -8,10 +8,9 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-
     }
     p, h1 {
-        color: #1e1e1e;
+        color: var(--text-color);
     }
     h1 {
         font: {
@@ -21,7 +20,7 @@
         margin: 0;
     }
     a {
-        color: #008fd6;
+        color: var(--anchor-link-review);
 
         &:hover {
             text-decoration: underline;