add dark mode

Signed-off-by: Arcade Wise <l3gacy.b3ta@disroot.org>

1 files changed, 133 insertions, 39 deletions

diff --git a/apioforum/static/style.css b/apioforum/static/style.css
index cd275ff..92e6dcd 100644
--- a/apioforum/static/style.css
+++ b/apioforum/static/style.css
@@ -1,25 +1,35 @@
 body { font-family: sans-serif; word-wrap: break-word; }
 
 :root {
-    --alternating-colour-even: hsl(0,0%,96%);
-    --alternating-colour-odd:  hsl(0,0%,91%);
+    --alternating-colour-even: hsl(0, 0%, 96%);
+    --alternating-colour-odd: hsl(0, 0%, 91%);
+    --dark-colour: black;
+	--gray: darkgray;
+    --light-colour: white;
+    --username-colour: hsl(0, 0%, 25%);
+    --red: red;
+    --yellow: yellow;
+    --blue: blue;
+    --visited: purple;
 }
 
+a { color: var(--blue) }
+
 .post { margin: 0px; }
 .post:nth-child(even) { background-color: var(--alternating-colour-even) }
 .post:nth-child(odd)  { background-color: var(--alternating-colour-odd) }
 .post {
-    border-left: 1px solid black;
-    border-right: 1px solid black;
-    border-top: 1px solid black;
-    width: 100%
+    border-left: 1px solid var(--dark-colour);
+    border-right: 1px solid var(--dark-colour);
+    border-top: 1px solid var(--dark-colour);
+    width: 100%;
 	box-sizing: border-box;
 }
-.post:last-of-type { border-bottom: 1px solid black; }
+.post:last-of-type { border-bottom: 1px solid var(--dark-colour); }
 
 .post-heading,.post-footer { font-size: smaller; }
 .post-heading,.post-footer,.username {
-	color: hsl(0,0%,25%); 
+	color: var(--username-colour); 
 }
 .username {
     font-weight: bold;
@@ -35,17 +45,17 @@ body { font-family: sans-serif; word-wrap: break-word; }
 
 .post-footer { margin-left: 0.2em; font-style: italic; }
 
-.post-anchor-link { color: hsl(0,0%,25%); }
+.post-anchor-link { color: var(--username-colour); }
 
-.deleted-post { 
-	color:white; 
-	background-color: hsl(0,0%,15%) !important; 
-    border-left: 1px solid darkgray;
-    border-right: 1px solid darkgray;
-    border-top: 1px solid darkgray;
+div.deleted-post { 
+	color:var(--light-colour); 
+	background-color: var(--dark-colour) !important; 
+    border-left: 1px solid var(--dark-colour);
+    border-right: 1px solid var(--dark-colour);
+    border-top: 1px solid var(--dark-colour);
 }
 .deleted-post > .post-heading > * { 
-	color: hsl(0,0%,85%); 
+	color: hsl(0,0%,85%);
 }
 .deleted-post > .post-heading > .post-heading-b > .post-anchor-link { 
 	color: hsl(0,0%,60%); 
@@ -58,6 +68,30 @@ body { font-family: sans-serif; word-wrap: break-word; }
 	color: hsl(0,0%,80%); 
 }
 
+@media (prefers-color-scheme: dark) {
+	.deleted-post > .post-heading > * { 
+		color: hsl(0,0%,45%);
+	}
+	.deleted-post > .post-heading > .post-heading-b > .post-anchor-link { 
+		color: hsl(0,0%,20%); 
+	}
+	.deleted-post > .post-heading > .post-heading-a > .username { 
+		color: hsl(0,0%,40%); 
+	}
+	
+	.deleted-post > .post-footer {
+		color: hsl(0,0%,40%); 
+	}
+
+	div.deleted-post { 
+		color:var(--light-colour); 
+		background-color: var(--dark-colour) !important; 
+		border-left: 1px solid var(--dark-colour);
+		border-right: 1px solid var(--dark-colour);
+		border-top: 1px solid var(--dark-colour);
+	}
+}
+
 .thread-top-bar, .user-top-bar {
     margin-bottom: 4px;
 }
@@ -72,7 +106,7 @@ body { font-family: sans-serif; word-wrap: break-word; }
 }
 
 .user_info {
-    border: 1px solid black;
+    border: 1px solid var(--dark-colour);
 	background-color: var(--alternating-colour-even);
     width: 100%;
 	padding: 4px;
@@ -100,6 +134,25 @@ dt { font-weight: bold }
 .un-col-15 { color: hsl(315.0, 100%, 30%) }
 .un-col-16 { color: hsl(337.5, 100%, 30%) }
 
+@media (prefers-color-scheme: dark) {
+	.un-col-1 { color: hsl(0, 100%, 70%) }
+	.un-col-2 { color: hsl(22.5, 100%, 70%) }
+	.un-col-3 { color: hsl(45.0, 100%, 70%) }
+	.un-col-4 { color: hsl(67.5, 100%, 70%) }
+	.un-col-5 { color: hsl(90.0, 100%, 70%) }
+	.un-col-6 { color: hsl(112.5, 100%, 70%) }
+	.un-col-7 { color: hsl(135.0, 100%, 70%) }
+	.un-col-8 { color: hsl(157.5, 100%, 70%) }
+	.un-col-9 { color: hsl(180.0, 100%, 70%) }
+	.un-col-10 { color: hsl(202.5, 100%, 70%) }
+	.un-col-11 { color: hsl(225.0, 100%, 70%) }
+	.un-col-12 { color: hsl(247.5, 100%, 70%) }
+	.un-col-13 { color: hsl(270.0, 100%, 70%) }
+	.un-col-14 { color: hsl(292.5, 100%, 70%) }
+	.un-col-15 { color: hsl(315.0, 100%, 70%) }
+	.un-col-16 { color: hsl(337.5, 100%, 70%) }
+}
+
 img { max-width: 100% }
 
 nav#navbar { 
@@ -107,14 +160,14 @@ nav#navbar {
 	padding: 5px;
 	margin: 2px;
 	margin-bottom: 20px;
-	border: 1px solid black;
+	border: 1px solid var(--dark-colour);
 	display:flex;
 	align-items: center;
 	flex-wrap: wrap;
 }
 nav#navbar p { margin-left: 15px; margin-top: 0; margin-bottom: 0; margin-right: 10px; padding: 0 }
 nav#navbar p:first-of-type { margin-left:0.5em }
-nav#navbar a { color: blue; text-decoration: none }
+nav#navbar a { color: var(--blue); text-decoration: none }
 nav#navbar .links { display: flex; }
 
 nav#pages {
@@ -123,29 +176,29 @@ nav#pages {
 	justify-content: space-between;
 	margin-bottom: -1px;
 	padding: 5px;
-	border: 1px solid black;
+	border: 1px solid var(--dark-colour);
 	background-color: var(--alternating-colour-even);
 	position: sticky;
 	top: 0;
 }
 
-nav#pages .links > a:not([href]) { color: gray; }
+nav#pages .links > a:not([href]) { color: var(--gray); }
 
 nav#pages .pageno { align-self: center; }
 
 /* todo: make the navbar less bad */
-.flashmsg { border: 1px solid black; background-color: yellow; max-width: max-content; padding: 5px; clear: both;}
+.flashmsg { border: 1px solid var(--dark-colour); background-color: yellow; max-width: max-content; padding: 5px; clear: both; color: black}
 
 .listing:nth-child(even) { background-color: var(--alternating-colour-even) }
 .listing:nth-child(odd) { background-color: var(--alternating-colour-odd) }
 
 .listing {
-    border-left: 1px solid black;
-    border-right: 1px solid black;
-    border-top: 1px solid black;
+    border-left: 1px solid var(--dark-colour);
+    border-right: 1px solid var(--dark-colour);
+    border-top: 1px solid var(--dark-colour);
 	padding: 10px;
 }
-.listing:last-of-type { border-bottom: 1px solid black; }
+.listing:last-of-type { border-bottom: 1px solid var(--dark-colour); }
 .listing-main { 
 	display: flex; 
 	align-items: center;
@@ -178,7 +231,7 @@ nav#pages .pageno { align-self: center; }
 	margin-top: 10px;
 }
 .thread-preview-post a, .thread-preview-post a:visited { 
-	color: black; 
+	color: var(--dark-colour); 
 	text-decoration: none; 
 }
 .thread-preview-post { font-style: italic; }
@@ -209,14 +262,14 @@ nav#pages .pageno { align-self: center; }
 
 .actionbutton::before {
     content: "[";
-    color: grey;
+    color: var(--gray);
 }
 .actionbutton::after {
     content: "]";
-    color: grey;
+    color: var(--gray);
 }
 .actionbutton { 
-	color:blue;
+	color:var(--blue);
 	white-space: nowrap;
 }
 
@@ -224,14 +277,14 @@ nav#pages .pageno { align-self: center; }
     height:20em;
     resize:vertical;
     width:100%;
-    border:1px solid black;
+    border:1px solid var(--dark-colour);
     margin-top: 5px;
 }
 
 #polloptions {
 	display: block;
 	resize: vertical;
-    border:1px solid black;
+    border:1px solid var(--dark-colour);
     margin-top: 5px;
 	height: 5em;
 	width: 100%;
@@ -246,14 +299,14 @@ main {
 blockquote {
     margin-left: 10px;
     padding-left: 10px;
-    border-left: 3px solid grey;
+    border-left: 3px solid var(--gray);
 }
 
 label { user-select: none; }
 
 fieldset { margin-bottom: 15px; }
 
-.warning { color: red; font-weight: bold }
+.warning { color: var(--red); font-weight: bold }
 
 .inline-form {
     display: inline-block;
@@ -262,22 +315,22 @@ fieldset { margin-bottom: 15px; }
 .tag {
     font-size: .75rem;
     padding: 1px 3px;
-    border: 1px solid black;
+    border: 1px solid var(--dark-colour);
 	white-space: nowrap;
 }
 
 .md table {
-    border: 1px solid grey;
+    border: 1px solid var(--gray);
     border-collapse: collapse;
 }
 .md table td,.md table th {
-    border: 1px solid grey;
+    border: 1px solid var(--gray);
     padding: 4px;
 }
 
 .role-input, .name-input { width: 12ch; }
 
-.thing-id { color: darkgray; font-size: smaller; font-weight: normal; }
+.thing-id { color: var(--gray); font-size: smaller; font-weight: normal; }
 
 .breadcrumbs {
     list-style: none;
@@ -287,9 +340,50 @@ fieldset { margin-bottom: 15px; }
     display: inline;
 }
 
-.breadcrumbs li+li::before {
+.breadcrumbs lili::before {
     content: "/\00a0";
     padding: 8px;
 }
 
+textarea {
+	color: var(--dark-colour);
+	background-color: var(--light-colour);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--alternating-colour-even: hsl(0, 0%, 5%);
+		--alternating-colour-odd: hsl(0, 0%, 15%);
+		--dark-colour: white;
+		--gray: lightgray;
+		--light-colour: black;
+		--username-colour: hsl(0, 0%, 80%);
+		--yellow: rgb(212, 173, 0);
+		--blue: rgb(78, 89, 255);
+		--visited: rgb(173, 110, 209);
+	}
 
+	.un-col-1 { color: hsl(0, 100%, 70%) }
+	.un-col-2 { color: hsl(22.5, 100%, 70%) }
+	.un-col-3 { color: hsl(45.0, 100%, 70%) }
+	.un-col-4 { color: hsl(67.5, 100%, 70%) }
+	.un-col-5 { color: hsl(90.0, 100%, 70%) }
+	.un-col-6 { color: hsl(112.5, 100%, 70%) }
+	.un-col-7 { color: hsl(135.0, 100%, 70%) }
+	.un-col-8 { color: hsl(157.5, 100%, 70%) }
+	.un-col-9 { color: hsl(180.0, 100%, 70%) }
+	.un-col-10 { color: hsl(202.5, 100%, 70%) }
+	.un-col-11 { color: hsl(225.0, 100%, 70%) }
+	.un-col-12 { color: hsl(247.5, 100%, 70%) }
+	.un-col-13 { color: hsl(270.0, 100%, 70%) }
+	.un-col-14 { color: hsl(292.5, 100%, 70%) }
+	.un-col-15 { color: hsl(315.0, 100%, 70%) }
+	.un-col-16 { color: hsl(337.5, 100%, 70%) }
+
+	input { color: var(--dark-colour); background-color: var(--light-colour); }
+	
+	h1 { color: var(--dark-colour); }
+	
+	body { background-color: var(--light-colour); color: var(--dark-colour); }
+}
+	
\ No newline at end of file