Merge pull request #1 from KushBlazingJudah/darkmode

merge in darkmode

7 files changed, 183 insertions, 79 deletions

diff --git a/static/archive.html b/static/archive.html
index b08693a..3e040bc 100644
--- a/static/archive.html
+++ b/static/archive.html
@@ -20,7 +20,7 @@
 {{ end }}
 
 {{ define "top" }}
-<h1 style="text-align: center; color: #af0a0f;">/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
+<h1>/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
 <p style="text-align: center;">{{ .Board.Summary }}</p>
 <h1 style="text-align: center;">Archived Posts</h1>
 {{ end }}
diff --git a/static/css/gruvbox.css b/static/css/gruvbox.css
new file mode 100644
index 0000000..fb39ea4
--- /dev/null
+++ b/static/css/gruvbox.css
@@ -0,0 +1,63 @@
+a, a:link, a:visited, a:active {
+	color: #b16286;
+	text-decoration: none
+}
+
+a.reply {
+	color: #cc241d;
+}
+
+a:hover.reply {
+	color: #fb4934;
+}
+
+body {
+	background: #282828;
+	color: #ebdbb2;
+
+	font-family: Iosevka, monospace, sans-serif;
+	font-size: 0.9em;
+}
+
+.popup-box {
+	border: 4px solid #928374;
+	background-color: #3c3836;
+}
+
+.box, .box-alt {
+	background-color: #3c3836;
+}
+
+.quote {
+	color: #98971a;
+}
+
+.post {
+	background-color: #1d2021;
+}
+
+:target > div > .post {
+	background-color: #504945;
+}
+
+.subject {
+	color: #458588;
+}
+
+.name {
+	color: #b8bb26;
+}
+
+.tripcode {
+	color: #689d6a;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	color: #fb4934;
+	margin-bottom: 0.1em;
+}
+
+.replyLink {
+	color: #83a598;
+	font-size: 0.8em;
+}
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..fa76b50
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,85 @@
+a, a:link, a:visited, a:hover, a:active {
+	text-decoration: none
+}
+
+a:link, a:visited,  a:active {
+	color: black;
+}
+
+a:hover {
+	color: #de0808;
+}
+
+body {
+	background-color: #eef2fe;
+	color: black;
+}
+
+body.nsfw {
+	background-color: #ffffee;
+	color: #820404
+}
+
+.popup-box {
+	border: 4px solid #d3caf0;
+	background-color: #eff5ff;
+}
+
+.nsfw .popup-box {
+	border: 4px solid #f0e2d9;
+	background-color: #f9f9e0;
+}
+
+.box {
+	background-color: #eff5ff;
+}
+
+.nsfw .box {
+	background-color: #f9f9e0;
+}
+
+.box-alt {
+	background-color: #d3caf0;
+}
+
+.nsfw .box-alt {
+	background-color: #f0e2d9;
+}
+
+
+.quote {
+	color: #789922;
+}
+
+.post {
+	background-color: #d5daf0;
+}
+
+.nsfw .post {
+	background-color: #f0e0d6;
+}
+
+:target > div > .post {
+	background-color: #d6bad0;
+}
+
+.nsfw :target > div > .post {
+	background-color: #f0c0b0;
+}
+
+.title {
+	color: #0f0c5d;
+}
+
+.name, .tripcode {
+	color: #117743;
+}
+
+a.reply {
+	color: #af0a0f;
+}
+
+.replyLink {
+	color: #000080;
+	font-size: 0.8em;
+}
diff --git a/static/js/themes.js b/static/js/themes.js
new file mode 100644
index 0000000..0d9772f
--- /dev/null
+++ b/static/js/themes.js
@@ -0,0 +1,24 @@
+function setCookie(key, value, age) {
+	document.cookie = key + "=" + encodeURIComponent(value) + ";sameSite=strict;max-age=" + 60 * 60 * 24 * age + ";path=/";
+}
+
+function getCookie(key) {
+	if (document.cookie.length != 0) {
+		return document.cookie.split('; ').find(row => row.startsWith(key)).split('=')[1];
+	}
+	return "";
+}
+
+function setTheme(name) {
+	for (let i = 0, tags = document.getElementsByTagName("link"); i < tags.length; i++) {
+		if (tags[i].type === "text/css" && tags[i].title) {
+			tags[i].disabled = !(tags[i].title === name);
+		}
+	}
+
+	setCookie("theme", name, 3650);
+}
+
+function applyTheme() {
+	setTheme(getCookie("theme") || "default");
+}
diff --git a/static/main.html b/static/main.html
index 362b7b3..3fa1b66 100644
--- a/static/main.html
+++ b/static/main.html
@@ -8,81 +8,11 @@
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <link rel="icon" type="image/png"  href="/static/favicon.png">
-    <style>
-      a, a:link, a:visited, a:hover, a:active {
-          text-decoration: none
-      }
-
-      a:link, a:visited,  a:active {
-          color: black;
-      }
-
-      a:hover {
-          color: #de0808;
-      }
-
-      body {
-          {{ if .Board.Restricted }}
-          background-color: #eef2fe;
-          color: black;
-          {{ else }}
-          background-color: #ffffee;
-          color: #820404
-          {{ end }}
-      }
-
-      .popup-box {
-          {{ if .Board.Restricted }}
-          border: 4px solid #d3caf0;
-          background-color: #eff5ff;
-          {{ else }}
-          border: 4px solid #f0e2d9;
-          background-color: #f9f9e0;
-          {{ end }}
-      }
-
-      .box {
-          {{ if .Board.Restricted }}
-          background-color: #eff5ff;
-          {{ else }}
-          background-color: #f9f9e0;
-          {{ end }}
-      }
-
-      .box-alt {
-          {{ if .Board.Restricted }}
-          background-color: #d3caf0;
-          {{ else }}
-          background-color: #f0e2d9;
-          {{ end }}
-      }
-
-      .quote {
-          color: #789922;
-      }
-
-      .post {
-          {{ if .Board.Restricted }}
-          background-color: #d5daf0;
-          {{ else }}
-          background-color: #f0e0d6;
-          {{ end }}
-      }
-
-      :target > div > .post {
-          {{ if .Board.Restricted }}
-          background-color: #d6bad0;
-          {{ else }}
-          background-color: #f0c0b0;
-          {{ end }}
-      }
-      .tripcode {
-          color: #117743;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css" title="default">
+    <link rel="alternate stylesheet" type="text/css" href="/static/css/gruvbox.css" title="gruvbox">
     {{ template "header" . }}
   </head>
-  <body>
+  <body {{ if not .Board.Restricted }}class="nsfw"{{ end }} onload="applyTheme()">
     <ul style="display: inline; padding:0;">
       {{ $l := len .Boards }}
       <li style="display: inline;">[<a href="/">Home</a>]</li>
@@ -112,8 +42,10 @@
       <a href="/">[Home]</a><a href="/static/rules.html">[Rules]</a><a href="/static/faq.html">[FAQ]</a>
       <p>All trademarks and copyrights on this page are owned by their respective parties.</p>
     </div>
+
+    <script src="/static/js/themes.js"></script>
+{{ template "script" . }}
   </body>
 </html>
 
-{{ template "script" . }}
 {{ end }}
diff --git a/static/posts.html b/static/posts.html
index 50d8b43..b9cac5e 100644
--- a/static/posts.html
+++ b/static/posts.html
@@ -45,7 +45,7 @@
       }
     </script>
     {{ end }}
-    <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ short $board.Actor.Outbox $opId }}#{{ short $board.Actor.Outbox .Id }}">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ short $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
+    <span class="subject"><b>{{ .Name }}</b></span><span class="name"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ short $board.Actor.Outbox $opId }}#{{ short $board.Actor.Outbox .Id }}">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ short $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
     <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{ parseContent $board.Actor $opId .Content $thread }}</p>
     {{ if .Replies }}
     {{ $replies := .Replies }}
@@ -57,7 +57,7 @@
     {{ range $replies.OrderedItems }}
     <div id="{{ short $board.Actor.Outbox .Id }}">
       <div  style="display: inline-block; overflow: auto;">
-        <div style="float: left; display: block; margin-right: 5px;">>></div>
+        <div style="float: left; display: block; margin-right: 5px;">&gt;&gt;</div>
         <div class="post" style="overflow: auto; padding: 5px; margin-bottom: 2px;">
           {{ if eq $board.ModCred $board.Domain $board.Actor.Id }}
           <a href="/delete?id={{ .Id }}&board={{ $board.Actor.Name }}">[Delete Post]</a>
@@ -97,7 +97,7 @@
             }
           </script>
           {{ end }}
-          <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ short $board.Actor.Outbox $opId }}#{{ short $board.Actor.Outbox .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ short $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
+          <span class="subject"><b>{{ .Name }}</b></span><span class="name"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span class="tripcode"> {{ .TripCode }} </span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ short $board.Actor.Outbox $opId }}#{{ short $board.Actor.Outbox .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ short $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">[Report]</a>{{ end }}</span>
           {{ $parentId := .Id }}
           {{ if .Replies.OrderedItems }}
           {{ range .Replies.OrderedItems }}
diff --git a/static/top.html b/static/top.html
index 0081fc7..e37f221 100644
--- a/static/top.html
+++ b/static/top.html
@@ -1,6 +1,6 @@
 {{ define "top" }}
 <div style="margin: 0 auto; width: 700px; margin-bottom: 100px;">
-  <h1 style="text-align: center; color: #af0a0f;">/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
+  <h1 style="text-align: center;">/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
   <p style="text-align: center;">{{ .Board.Summary }}</p>
   {{ $len := len .Posts }}
   {{ if eq $len 0 }}