web: added dark mode (my eyes\!)

web/css/styles.css

@@ -14,6 +14,13 @@ body {
 	padding: 0;
 }
 
+a {
+	color: var(--clrLink);
+}
+a:visited {
+	color: var(--clrLinkVisited);
+}
+
 #gsticker {
 	position: absolute;
 	top: 0;
@@ -398,6 +405,8 @@ input[type="text"].cw {
 	border: none;
 	border-bottom: solid 2px var(--clrWarn);
 	font-size: var(--fsReduced);
+	background: transparent;
+	color: var(--clrText);
 }
 
 /* Profile */
@@ -429,3 +438,9 @@ label[role="profile-nip5"] {
 	display: block;
 }
 
+@media (prefers-color-scheme: dark) {
+	.icon.svg {
+		filter: invert(1);
+	}
+}
+

web/css/utils.css

@@ -36,10 +36,10 @@ button.icon > img.icon {
 button.action {
 	border: none;
 	border-radius: 50px;
-	background: #171717;
+	background: var(--clrBgAction);
 	padding: 10px 15px;
 	font-size: 16px;
-	color: white;
+	color: var(--clrTextAction);
 	font-weight: 800;
 }
 
@@ -66,10 +66,10 @@ img.icon.small {
 	top: 0;
 }
 .event-message {
-	background: #f4f4f4;
+	background: var(--clrEvMsg);
 	padding: 7px;
 	border-radius: 12px;
-	color: #444;
+	color: var(--clrTextEvMsg);
 }
 .flex {
 	display: flex;
@@ -81,3 +81,12 @@ img.invert {
 	/* This class is good for white on black icons; */
 	filter: invert(1);
 }
+
+@media (prefers-color-scheme: dark) {
+	img.dark-invert {
+		filter: invert(1);
+	}
+	img.invert, img.svg.invert {
+		filter: initial;
+	}
+}

web/css/vars.css

@@ -11,6 +11,14 @@
 	--clrTextLighter: #abb4ca;
 	--clrHeart:       #ff5050;
 	--clrWarn:        #fbc560;
+	--clrLink:        blue;
+	--clrLinkVisited: purple;
+	
+	/* TODO I don't like these and simply did it for dark mode. To rename. */
+	--clrEvMsg:       #f4f4f4; 
+	--clrTextEvMsg:   #444;
+	--clrBgAction:    #171717;
+	--clrTextAction:  white;
 
 	/* Font Sizes */
 	--fsSmall:    12px;
@@ -32,3 +40,18 @@
 	--iconSize: 24px;
 	--iconSizeSmall: 15px;
 }
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--clrBg: #0f0f0f;
+		--clrText: #fff;
+		--clrPanel: #1f1f1f;
+		--clrBorder: #282828;
+		--clrLink: #fb5151;
+		--clrLinkVisited: #f77;
+		--clrEvMsg: #353535;
+		--clrTextEvMsg: white;
+		--clrBgAction: white;
+		--clrTextAction: #1f1f1f;
+	}
+}

web/index.html

@@ -90,7 +90,7 @@
 								<input id="content-warning-input" class="cw hide" type="text" placeholder="Reason"/>
 								<button title="Mark this message as sensitive." 
 									onclick="toggle_cw(this)" class="cw icon">
-									<img class="icon small" src="icon/content-warning.svg"/>
+									<img class="icon svg small" src="icon/content-warning.svg"/>
 								</button>
 								<button onclick="send_post(this)" class="action" 
 									role="send" id="post-button" disabled>Send</button>
@@ -131,7 +131,7 @@
 								-->
 								<button class="icon" role="copy-pk"
 									data-pk="" onclick="click_copy_pk(this)" title="Copy Public Key">
-									<img class="icon" src="icon/pubkey.svg"/></button>
+									<img class="icon svg" src="icon/pubkey.svg"/></button>
 								<button class="action" role="follow-user" data-pk=""
 									onclick="click_toggle_follow_user(this)">Follow</button>
 							</div>
@@ -152,7 +152,7 @@
 				<header>
 					<label>Reply To</label>
 					<button class="icon" onclick="close_reply()">
-						<img class="icon" src="icon/close-modal.svg"/>
+						<img class="icon svg" src="icon/close-modal.svg"/>
 					</button>
 				</header>
 				<div id="replying-to"></div>

web/js/ui/render.js

@@ -35,7 +35,7 @@ function render_thread_collapsed(model, ev, opts)
 	return `<div onclick="expand_thread('${ev.id}')" class="thread-collapsed">
 		<div class="thread-summary clickable event-message">
 			Read More  
-			<img class="icon small" src="icon/read-more.svg"/>
+			<img class="icon svg small" src="icon/read-more.svg"/>
 		</div>
 	</div>`
 }
@@ -197,7 +197,7 @@ function render_event(damus, view, ev, opts={}) {
 				${render_name(ev.pubkey, profile)}
 				<span class="timestamp">${delta}</span>
 				<button class="icon" title="View Thread" role="view-event" data-eid="${ev.id}" onclick="click_event(this)">
-					<img class="icon small" src="icon/open-thread.svg"/>
+					<img class="icon svg small" src="icon/open-thread.svg"/>
 				</button>
 			</div>
 			<div class="comment">
@@ -246,7 +246,7 @@ function render_action_bar(damus, ev, can_delete) {
 	if (can_delete)
 		delete_html = `
 	<button class="icon" title="Delete" onclick="delete_post_confirm('${ev.id}')">
-		<img class="icon small" src="icon/event-delete.svg"/>
+		<img class="icon svg small" src="icon/event-delete.svg"/>
 	</button>`
 
 	const groups = get_reactions(damus, ev.id)
@@ -256,10 +256,10 @@ function render_action_bar(damus, ev, can_delete) {
 	return `
 	<div class="action-bar">
 		<button class="icon" title="Reply" onclick="reply_to('${ev.id}')">
-			<img class="icon small" src="icon/event-reply.svg"/>
+			<img class="icon svg small" src="icon/event-reply.svg"/>
 		</button>
 		<button class="icon react heart" ${react_onclick} title="Like">
-			<img class="icon small" src="icon/event-like.svg"/>
+			<img class="icon svg small" src="icon/event-like.svg"/>
 		</button>
 		<!--<button class="icon" title="Share" onclick=""><i class="fa fa-fw fa-link"></i></a>-->
 		${delete_html}	
@@ -345,7 +345,7 @@ function render_loading_spinner()
 	return `
 	<div class="loading-events">
 		<div class="loader" title="Loading...">
-			<img src="icon/loader-fragment.svg"/>
+			<img class="dark-invert" src="icon/loader-fragment.svg"/>
 		</div>
 	</div>`
 }