Add a dark mode option (#121)

* Add a dark mode option

* Add dark mode options to Docker and README

README.md

@@ -79,6 +79,7 @@ LogPaste offers some options to customize the text for your site. Here's an exam
 SITE_TITLE="My Cool Log Pasting Service"
 SITE_SUBTITLE="Upload all your logs for FooBar here"
 SITE_FOOTER="<h2>Notice</h2><p>Only cool users can share logs here.</p>"
+SITE_DARK_MODE="true"
 SITE_SHOW_DOCUMENTATION="false" # Hide usage information from homepage
 PER_MINUTE_LIMIT="5" # Allow only 5 pastes per minute per IP
 
@@ -87,6 +88,7 @@ docker run \
   -e "SITE_TITLE=${SITE_TITLE}" \
   -e "SITE_SUBTITLE=${SITE_SUBTITLE}" \
   -e "SITE_FOOTER=${SITE_FOOTER}" \
+  -e "SITE_DARK_MODE=${SITE_DARK_MODE}" \
   -e "SITE_SHOW_DOCUMENTATION=${SITE_SHOW_DOCUMENTATION}" \
   -e "PER_MINUTE_LIMIT=${PER_MINUTE_LIMIT}" \
   -p 3001:3001/tcp \
@@ -103,6 +105,7 @@ docker run \
 | `-title` | Title to display on homepage | `"LogPaste"` |
 | `-subtitle` | Subtitle to display on homepage | `"A minimalist, open-source debug log upload service"` |
 | `-footer` | Footer to display on homepage (may include HTML) | |
+| `-darkmode` | Whether to use dark mode theme on homepage | `false` |
 | `-showdocs` | Whether to display usage documentation on homepage | `true` |
 | `-perminutelimit` | Number of pastes to allow per IP per minute | `0` (no limit) |
 
@@ -114,8 +117,9 @@ You can adjust behavior of the Docker container by passing these parameters with
 |----------------------|---------|
 | `PORT`               | TCP port on which to listen for HTTP connections (defaults to 3001) |
 | `SITE_TITLE`         | Value to set the `-title` command-line flag |
-| `SITE_SUBTITLE`      | Value to set the `-subtitle`  command-line flag |
-| `SITE_FOOTER`       | Value to set the `-footer`  command-line flag |
+| `SITE_SUBTITLE`      | Value to set the `-subtitle` command-line flag |
+| `SITE_FOOTER`        | Value to set the `-footer` command-line flag |
+| `SITE_DARK_MODE`     | Value to set the `-darkmode` command-line flag |
 | `SITE_SHOW_DOCUMENTATION` | Value to set the `-showdocs` command-line flag |
 | `PER_MINUTE_LIMIT`   | Value to set the `-perminutelimit` command-line flag |
 | `DB_REPLICA_URL`     | S3 URL where you want to replicate the LogPaste datastore (e.g., `s3://mybucket.mydomain.com/db`) |

docker_entrypoint

@@ -23,6 +23,10 @@ env_vars_to_flags() {
     flags+=" -footer \"${SITE_FOOTER}\""
   fi
 
+  if [[ "${SITE_DARK_MODE}" == "true" ]]; then
+    flags+=" -darkmode"
+  fi
+
   if [[ "${SITE_SHOW_DOCUMENTATION}" == "false" ]]; then
     flags+=" -showdocs=false"
   fi

handlers/server.go

@@ -31,6 +31,7 @@ type SiteProperties struct {
 	Title      string
 	Subtitle   string
 	FooterHTML string
+	DarkMode   bool
 	ShowDocs   bool
 }
 

main.go

@@ -20,6 +20,7 @@ func main() {
 		"A minimalist, open-source debug log upload service",
 		"subtitle for the site")
 	footer := flag.String("footer", "", "custom page footer (can contain HTML)")
+	darkMode := flag.Bool("darkmode", false, "display homepage in dark mode")
 	showDocs := flag.Bool("showdocs",
 		true, "whether to display usage information on homepage")
 	perMinuteLimit := flag.Int("perminutelimit",
@@ -31,6 +32,7 @@ func main() {
 		Title:      *title,
 		Subtitle:   *subtitle,
 		FooterHTML: *footer,
+		DarkMode:   *darkMode,
 		ShowDocs:   *showDocs,
 	}, *perMinuteLimit)
 	http.Handle("/", muxHandlers.LoggingHandler(os.Stdout, s.Router()))

static/css/dark.css

@@ -0,0 +1,41 @@
+body {
+  background: #121212;
+  color: #f0f0f0;
+}
+
+a {
+  color: #009e1a;
+}
+
+textarea {
+  background: #808080;
+}
+
+button {
+  background-color: #2455a3;
+  color: #f0f0f0;
+  border-color: #648ed1;
+}
+
+button:hover {
+  background-color: #2e66bf;
+}
+
+pre {
+  background: #424242;
+  border-color: #c7c7c7;
+}
+
+#upload-textarea {
+  border-color: #cccccc;
+}
+
+#result {
+  background-color: #454270;
+  border-color: #6d68b0;
+}
+
+#form-upload-error {
+  background-color: #9c2222;
+  border-color: #cc3f3f;
+}

static/css/light.css

@@ -0,0 +1,23 @@
+button {
+  color: white;
+  background-color: #0078e7;
+  border-color: #082375;
+}
+
+button:hover {
+  background-color: #009ee7;
+}
+
+#upload-textarea {
+  border-color: #cccccc;
+}
+
+#result {
+  background-color: #d6ffd9;
+  border-color: green;
+}
+
+#form-upload-error {
+  background-color: #ffa6a6;
+  border-color: red;
+}

static/css/style.css

@@ -55,16 +55,11 @@ button {
   padding: 0.35em 1.2em;
   border-radius: 0.2em;
   box-sizing: border-box;
-  color: white;
-  background-color: #0078e7;
-  border: 0.1em solid #082375;
   text-align: center;
   transition: all 0.2s;
   font-size: 1.05em;
-}
-
-button:hover {
-  background-color: #009ee7;
+  border-width: 0.1em;
+  border-style: solid;
 }
 
 .upload-form {
@@ -85,9 +80,9 @@ button:hover {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-  border: 1px solid #cccccc;
   margin: 1rem 0;
   padding: 0.5rem;
+  border-width: 1px;
 }
 
 .button-row {
@@ -96,9 +91,9 @@ button:hover {
 
 #result {
   visibility: hidden;
-  background-color: #d6ffd9;
   padding: 1.5rem 1.75rem;
-  border: 1px solid green;
+  border-width: 1px;
+  border-style: solid;
   margin: 1rem auto 0 auto;
 }
 
@@ -115,9 +110,9 @@ button:hover {
 
 #form-upload-error {
   visibility: hidden;
-  background-color: #ffa6a6;
   padding: 1rem 0.75rem;
-  border: 1px solid red;
+  border-width: 1px;
+  border-style: solid;
 }
 
 #more-info {

views/index.html

@@ -4,14 +4,27 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{.Title}}</title>
+    <!-- prettier-ignore -->
     {{ if .ShowDocs }}
+    <!-- prettier-ignore -->
+    {{ if .DarkMode }}
+    <link rel="stylesheet" type="text/css" href="/third-party/prism/dark.css" />
+    <!-- prettier-ignore -->
+    {{ else }}
     <link
       rel="stylesheet"
       type="text/css"
-      href="/third-party/prism/prism.css"
+      href="/third-party/prism/default.css"
     />
+    <!-- prettier-ignore -->
+    {{ end }}
     {{ end }}
     <link rel="stylesheet" type="text/css" href="/css/style.css" />
+    {{ if .DarkMode }}
+    <link rel="stylesheet" type="text/css" href="/css/dark.css" />
+    {{ else }}
+    <link rel="stylesheet" type="text/css" href="/css/light.css" />
+    {{ end }}
   </head>
   <body>
     <div class="container">