theme dropdown

public/style.css

@@ -974,7 +974,7 @@ form.create input[type=file], form.create select {
 }
 .preferences label{
   display: inline-block;
-  width: 150px;
+  width: 170px;
   margin-right: 5px;
   text-align: right;
 

public/utils.js

@@ -387,7 +387,7 @@ function saveSettings(e) {
   var targ = e.currentTarget || e.srcElement || e;
   var data = new FormData(targ)
   e.preventDefault()
-  request(targ.target, data, function(res) {
+  request(targ.dataset.target, data, function(res) {
     ["endlessScrolling", "autoLoad", "markRead"].map(function(x) {
       localStorage.setItem(x, data.get(x)=="on")
     })

routes.go

@@ -778,15 +778,18 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			deleteCookie(w, state.Host, name)
 			setCookie(w, "", name, r.FormValue(name))
 		}
-		state.Dark = new(bool)
-		dark := r.FormValue("darkmode")
-		undark := r.FormValue("undarkmode")
-		if dark == "0" && undark != "0" {
-		} else if dark == "0" && undark == "0" {
-			setCookie(w, "", "Dark", "0")
-		} else {
+		dark := true
+		switch r.FormValue("Dark") {
+		case "1":
 			setCookie(w, "", "Dark", "1")
-			*state.Dark = true
+			state.Dark = &dark
+		case "0":
+			setCookie(w, "", "Dark", "0")
+			dark = false
+			state.Dark = &dark
+		default:
+			deleteCookie(w, "", "Dark")
+			state.Dark = nil
 		}
 		if r.FormValue("shownsfw") != "" {
 			setCookie(w, "", "ShowNSFW", "1")

templates/settings.html

@@ -60,7 +60,7 @@
     <div class="error">{{.Error}}</div>
 {{ end }}
 {{ end }}
-<form id="settings" class="preferences" method="POST" target="/{{.Host}}/settings">
+<form id="settings" class="preferences" method="POST" data-target="/{{.Host}}/settings">
       <div>
         <label>
           default listing
@@ -106,21 +106,13 @@
           <option value="Controversial"{{ if eq .CommentSort "Controversial"}} selected{{end}}>Controversial</option>
         </select>
       </div>
-      <div id="darkmode">
-        <label>
-          dark mode
-        </label>
-        <input type="checkbox" name="darkmode" {{ if is .Dark }}checked{{end}}>
-        <input type="hidden" name="darkmode" value="0">
-      </div>
-      <div id="undarkmode">
-        <label>
-          dark mode
-        </label>
-          {{ if not .Dark }}
-        <input type="checkbox" name="undarkmode" checked>
-          {{ end }}
-          <input type="hidden" name="undarkmode" value="0">
+      <div>
+        <label>theme</label>
+        <select name="Dark">
+          <option {{ if eq .Dark nil}}selected{{end}}>Default</option>
+          <option value="0" {{ if not (or (is .Dark) (eq .Dark nil)) }}selected{{end}}>Light</option>
+          <option value="1" {{ if is .Dark }}selected{{end}}>Dark</option>
+        </select>
       </div>
       <div class="scripting">
         <label>