diff --git a/public/dark.css b/public/dark.css
new file mode 100644
index 0000000..4942d66
--- /dev/null
+++ b/public/dark.css
@@ -0,0 +1,159 @@
+#darkmode {
+  display: none;
+}
+#undarkmode {
+  display: block;
+}
+body {
+  background-color: #262626;
+  color: #ddd;
+}
+a {
+  color: #8cb3d9;
+}
+input[type=text], input[type=password], textarea {
+  background-color: #333;
+  color: #fff;
+  border-color: #4d4d4d
+}
+.post .rank {
+  color: #646464;
+}
+.post .score {
+  color: #646464;
+}
+.score form.link-btn input {
+  color: #646464;
+}
+.post.distinguished .title a:visited {
+  color: #228822;
+  font-weight: bold;
+}
+.title a {
+  color: #dedede;
+}
+.title a:visited {
+  color: #a6a6a6
+}
+.message b {
+  color: #ddd;
+}
+.meta {
+  color: #b4b4b4;
+}
+.comment {
+  border-color: #333;
+}
+.comment .comment,
+.comment .comment .comment .comment,
+.comment .comment .comment .comment .comment .comment,
+.comment .comment .comment .comment .comment .comment .comment .comment,
+.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
+ background-color:#161616;
+}
+.comment,
+.comment .comment .comment,
+.comment .comment .comment .comment .comment,
+.comment .comment .comment .comment .comment .comment .comment,
+.comment .comment .comment .comment .comment .comment .comment .comment .comment {
+ background-color: #121212;
+}
+.preview h3 {
+  background-color: #333;
+  border-color: #333;
+  color: #ccc;
+}
+.meta a {
+  color: #6a98af;
+}
+#mycommunities a {
+  color: #8cb3d9;
+}
+#mycommunities a:hover {
+  background-color: #3e3e3e;
+}
+#settingspopup, #mycommunities {
+  background-color: #262626;
+}
+.expando .md {
+  background-color: #262626;
+  color: #ddd;
+  border-color: #666;
+}
+.side .stats {
+  background-color: #393939;
+  border-color: #666;
+}
+.create a div {
+  background-color: #444444;
+  border: 0;
+}
+.create a div:hover {
+  background-color: #333333;
+}
+.create a {
+  color: white;
+}
+.create a:hover{
+  color: #0cbe30;
+}
+.create input[type=submit],
+.search .query input, 
+.create input[type=file],
+.create select {
+  color: #fff;
+  border: 1px outset gray;
+  background-color: #4d4d4d;
+}
+.moderators a {
+  color: #6a98af;
+}
+.community .description {
+  background-color: #333;
+  color: #ddd;
+  border-color: #777;
+}
+nav {
+  background-color: #696969;
+}
+nav .communities {
+  background-color: #cccccc;
+}
+nav .communities a {
+  color: #000;
+}
+nav .communities a.more {
+  background-color: #cccccc;
+}
+nav .title, nav > span {
+  color: #ececec;
+}
+nav ul a, nav ul .selected a {
+  background-color: #262626;
+  color: #ddd;
+}
+nav ul .selected a {
+  color: #d25a32;
+  border-bottom: 1px solid #262626;
+}
+nav .right {
+  background-color: #333333;
+}
+nav .right a, nav .right input[type=submit]{
+  color: #dadada;
+}
+.commentmenu .selected, .menu .selected {
+  color: #ddd;
+}
+.commentmenu a, .dark .menu {
+  color: #6a98af;
+}
+.warning {
+  background-color: #544400;
+}
+.highlight{
+  background-color: #4c4c4c;
+}
+form.create div {
+  background-color: #181818
+}
diff --git a/public/style.css b/public/style.css
index 6de8ae4..f5ea163 100644
--- a/public/style.css
+++ b/public/style.css
@@ -3,24 +3,12 @@ body {
   margin: 0px;
   padding-bottom: 20px;
 }
-body.dark {
-  background-color: #262626;
-  color: #ddd;
-}
 code {
   word-wrap: break-word;
 }
 summary {
   cursor: pointer;
 }
-.dark a {
-  color: #8cb3d9;
-}
-.dark input[type=text], .dark input[type=password], .dark textarea {
-  background-color: #333;
-  color: #fff;
-  border-color: #4d4d4d
-}
 .rank, .thumb, .score {
   float: left;
 }
@@ -60,9 +48,6 @@ summary {
   text-align: right;
   min-width: 21px;
 }
-.dark .post .rank {
-  color: #646464;
-}
 .post .score {
   color: #c6c6c6;
   font-size: 12px;
@@ -70,9 +55,6 @@ summary {
   text-align: center;
   min-width: 42px;
 }
-.dark .post .score {
-  color: #646464;
-}
 .comment .score {
   clear:left;
   margin-right: 4px;
@@ -95,9 +77,6 @@ summary {
   font-size: 20px;
   line-height: 15px;
 }
-.dark .score form.link-btn input {
-  color: #646464;
-}
 .comment .score form.link-btn input {
   line-height: 17px;
 }
@@ -116,16 +95,10 @@ summary {
   display: inline;
 }
 .post.distinguished .title a, .post.announcement .title a,
-.dark .post.distinguished .title a:visited, .post.announcement .title a:visited {
+.post.announcement .title a:visited {
   color: #228822;
   font-weight: bold;
 }
-.dark .title a {
-  color: #dedede;
-}
-.dark .title a:visited {
-  color: #a6a6a6
-}
 .post.deleted .title a {
   text-decoration: line-through;
 }
@@ -163,13 +136,6 @@ summary {
 .message b {
   color: #000;
 }
-.dark .message b {
-  color: #ddd;
-}
-.dark .meta {
-  color: #b4b4b4;
-}
-
 .comment {
   font-size: 14px;
   margin: 0px 0px 5px 0px;
@@ -177,9 +143,6 @@ summary {
   border-radius: 3px;
   padding: 10px 10px 0px 7px;
 }
-.dark .comment {
-  border-color: #333;
-}
 .activity .comment {
   border: 0px;
 }
@@ -195,26 +158,12 @@ summary {
 .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
  background-color:#f7f7f8;
 }
-.dark .comment .comment,
-.dark .comment .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color:#161616;
-}
 .comment .comment .comment,
 .comment .comment .comment .comment .comment,
 .comment .comment .comment .comment .comment .comment .comment,
 .comment .comment .comment .comment .comment .comment .comment .comment .comment {
  background-color:#fff;
 }
-.dark .comment,
-.dark .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment .comment .comment,
-.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
- background-color: #121212;
-}
 .comment .meta {
   font-size: 10px;
   margin-bottom: 6px;
@@ -228,11 +177,6 @@ summary {
   padding: 10px;
   font-size: 14px;
 }
-.dark .preview h3 {
-  background-color: #333;
-  border-color: #333;
-  color: #ccc;
-}
 .preview .comment {
   margin-top: 5px;
   padding: 0px;
@@ -246,9 +190,6 @@ summary {
   font-size: 10px;
   font-weight: 700;
 }
-.dark .meta a {
-  color: #6a98af;
-}
 .comment .meta a.distinguished.admin, .post.distinguished a.admin, .post.announcement a.admin {
   background-color: #ff0011;
   color: white;
@@ -484,7 +425,7 @@ form.nsfw div {
   border-left: 2px solid #c5c1ad;
   padding: 0 8px;
 }
-.buttons a, .buttons > form input, .comment .buttons form input {
+.dark .buttons a, .buttons a, .buttons > form input, .comment .buttons form input {
   text-decoration: none;
   color: #888;
   display: inline-block;
@@ -590,12 +531,6 @@ form.blockpost {
   display: block;
   padding: 0px 3px;
 }
-.dark #mycommunities a {
-  color: #8cb3d9;
-}
-.dark #mycommunities a:hover {
-  background-color: #3e3e3e;
-}
 #mycommunities a:hover {
   background-color: #c7def7;
 }
@@ -606,9 +541,6 @@ form.blockpost {
 #settingspopup form {
   margin: 0px;
 }
-.dark #settingspopup, .dark #mycommunities {
-  background-color: #262626;
-}
 #settingspopup.open, #mycommunities.open {
   display: inline-block;
 }
@@ -648,11 +580,6 @@ form.blockpost {
 .expando.open.showimage .md {
   display: none;
 }
-.dark .expando .md {
-  background-color: #262626;
-  color: #ddd;
-  border-color: #666;
-}
 .expando p, .comment p, .message p {
   margin-top: 0;
   margin-bottom: 2px;
@@ -729,10 +656,6 @@ main {
   background-color: #EFF7FF;
   border-radius: 3px;
 }
-.dark .side .stats {
-  background-color: #393939;
-  border-color: #666;
-}
 .side .stats b span {
   font-size: 22px;
 }
@@ -772,39 +695,18 @@ main {
   padding: 5px;
   border: 1px solid #369;
 }
-.dark .create a div {
-  background-color: #444444;
-  border: 0;
-}
 .create a div:hover {
   background-color: #369;
 }
-.dark .create a div:hover {
-  background-color: #333333;
-}
 .create a {
   font-weight: bold;
   text-decoration: none;
   font-size: 13px;
   color: #369;
 }
-.dark .create a {
-  color: white;
-}
 .create a:hover {
   color: white;
 }
-.dark .create a:hover{
-  color: #0cbe30;
-}
-.dark .create input[type=submit],
-.dark .search .query input, 
-.dark .create input[type=file],
-.dark .create select {
-  color: #fff;
-  border: 1px outset gray;
-  background-color: #4d4d4d;
-}
 h1, h2 {
   margin: 5px 0px;
 }
@@ -828,9 +730,6 @@ h1, h2 {
   text-decoration: none;
   color: #369;
 }
-.dark .moderators a {
-  color: #6a98af;
-}
 main > .community {
   margin: 20px 50px;
   max-width: 840px;
@@ -846,11 +745,6 @@ main > .community {
   max-height: 170px;
   overflow: auto;
 }
-.dark .community .description {
-  background-color: #333;
-  color: #ddd;
-  border-color: #777;
-}
 .community .details {
   margin-left: 36px;
 }
@@ -861,10 +755,6 @@ nav {
   margin-bottom: 5px;
   position: relative;
 }
-.dark nav {
-  background-color: #696969;
-}
-
 nav .communities {
  background-color: #f0f0f0;
  color: gray;
@@ -878,12 +768,6 @@ nav .communities {
 nav .communities a {
   margin: 0px 2px;
 }
-.dark nav .communities {
-  background-color: #cccccc;
-}
-.dark nav .communities a {
-  color: #000;
-}
 nav .communities a.more {
   background-color: #f0f0f0;
   color: black;
@@ -893,9 +777,6 @@ nav .communities a.more {
   right: 0;
   margin: 0;
 }
-.dark nav .communities a.more {
-  background-color: #cccccc;
-}
 .orangered, .orangered b {
   color: orangered !important;
 }
@@ -916,9 +797,6 @@ nav .title, nav > span {
   text-decoration: none;
   font-variant: small-caps;
 }
-.dark nav .title, .dark nav > span {
-  color: #ececec;
-}
 nav a.title {
   margin-left: 70px;
 }
@@ -976,11 +854,6 @@ nav ul a {
   text-decoration: none;
   padding: 2px 6px 0 6px;
 }
-.dark nav ul a {
-  background-color: #262626;
-  color: #ddd;
-}
-
 .selected {
   font-weight: bold;
 }
@@ -991,11 +864,6 @@ nav .selected a {
   border: 1px solid #00a846;
   border-bottom: 1px solid white;
 }
-.dark nav .selected a {
-  color: #d25a32;
-  border-bottom: 1px solid #262626;
-}
-
 nav .right {
   position: absolute;
   right: 0px;
@@ -1009,9 +877,6 @@ nav .right {
   font-size: 10px;
   z-index: 101;
 }
-.dark nav .right {
-  background-color: #333333;
-}
 nav .right a.mailbox {
   font-size: 21px;
   position: relative;
@@ -1022,9 +887,6 @@ nav .right a, nav .right input[type=submit] {
   color: #369;
   text-decoration: none;
 }
-.dark nav .right a, .dark nav .right input[type=submit]{
-  color: #dadada;
-}
 nav .right form, .comment form, form.link-btn {
   display: inline-block;
   margin: 0;
@@ -1054,12 +916,6 @@ nav .right form input, .comment .buttons input, form.link-btn input {
   font-weight: bold;
   text-decoration: none;
 }
-.dark .commentmenu .selected, .dark .menu .selected {
-  color: #ddd;
-}
-.dark .commentmenu a, .dark .menu {
-  color: #6a98af;
-}
 .warning {
   background-color: #f6e69f;
   border-color: #ffa500;
@@ -1068,17 +924,10 @@ nav .right form input, .comment .buttons input, form.link-btn input {
   padding: 5px 10px;
   margin: 5px 10px;
 }
-.dark .warning {
-  background-color: #544400;
-}
 .highlight {
   background-color: #ffc;
   padding-left: 5px;
 }
-.dark .highlight{
-  background-color: #4c4c4c;
-}
-
 form.create {
   width: 520px;
 }
@@ -1089,9 +938,6 @@ form.create div {
   background-color: #cee3f8;
   border-radius: 4px;
 }
-.dark form.create div {
-  background-color: #181818
-}
 form.create label {
   display: block;
   font-size: 18px;
@@ -1173,3 +1019,159 @@ form.create input[type=file], form.create select {
   max-width: 500px;
   font-size: 13px;
 }
+body.dark {
+  background-color: #262626;
+  color: #ddd;
+}
+.dark a {
+  color: #8cb3d9;
+}
+.dark input[type=text], .dark input[type=password], .dark textarea {
+  background-color: #333;
+  color: #fff;
+  border-color: #4d4d4d
+}
+.dark .post .rank {
+  color: #646464;
+}
+.dark .post .score {
+  color: #646464;
+}
+.dark .score form.link-btn input {
+  color: #646464;
+}
+.dark .post.distinguished .title a:visited {
+  color: #228822;
+  font-weight: bold;
+}
+.dark .title a {
+  color: #dedede;
+}
+.dark .title a:visited {
+  color: #a6a6a6
+}
+.dark .message b {
+  color: #ddd;
+}
+.dark .meta {
+  color: #b4b4b4;
+}
+.dark .comment {
+  border-color: #333;
+}
+.dark .comment .comment,
+.dark .comment .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
+ background-color:#161616;
+}
+.dark .comment,
+.dark .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment .comment .comment,
+.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
+ background-color: #121212;
+}
+.dark .preview h3 {
+  background-color: #333;
+  border-color: #333;
+  color: #ccc;
+}
+.dark .meta a {
+  color: #6a98af;
+}
+.dark #mycommunities a {
+  color: #8cb3d9;
+}
+.dark #mycommunities a:hover {
+  background-color: #3e3e3e;
+}
+.dark #settingspopup, .dark #mycommunities {
+  background-color: #262626;
+}
+.dark .expando .md {
+  background-color: #262626;
+  color: #ddd;
+  border-color: #666;
+}
+.dark .side .stats {
+  background-color: #393939;
+  border-color: #666;
+}
+.dark .create a div {
+  background-color: #444444;
+  border: 0;
+}
+.dark .create a div:hover {
+  background-color: #333333;
+}
+.dark .create a {
+  color: white;
+}
+.dark .create a:hover{
+  color: #0cbe30;
+}
+.dark .create input[type=submit],
+.dark .search .query input, 
+.dark .create input[type=file],
+.dark .create select {
+  color: #fff;
+  border: 1px outset gray;
+  background-color: #4d4d4d;
+}
+.dark .moderators a {
+  color: #6a98af;
+}
+.dark .community .description {
+  background-color: #333;
+  color: #ddd;
+  border-color: #777;
+}
+.dark nav {
+  background-color: #696969;
+}
+.dark nav .communities {
+  background-color: #cccccc;
+}
+.dark nav .communities a {
+  color: #000;
+}
+.dark nav .communities a.more {
+  background-color: #cccccc;
+}
+.dark nav .title, .dark nav > span {
+  color: #ececec;
+}
+.dark nav ul a {
+  background-color: #262626;
+  color: #ddd;
+}
+.dark nav .selected a {
+  color: #d25a32;
+  border-bottom: 1px solid #262626;
+}
+.dark nav .right {
+  background-color: #333333;
+}
+.dark nav .right a, .dark nav .right input[type=submit]{
+  color: #dadada;
+}
+.dark .commentmenu .selected, .dark .menu .selected {
+  color: #ddd;
+}
+.dark .commentmenu a, .dark .menu {
+  color: #6a98af;
+}
+.dark .warning {
+  background-color: #544400;
+}
+.dark .highlight{
+  background-color: #4c4c4c;
+}
+.dark form.create div {
+  background-color: #181818
+}
+#undarkmode {
+  display: none;
+}
diff --git a/routes.go b/routes.go
index a828a72..e8add21 100644
--- a/routes.go
+++ b/routes.go
@@ -169,6 +169,12 @@ var funcMap = template.FuncMap{
 	"add": func(a int64, b int) int {
 		return int(a) + b
 	},
+	"is": func(x *bool) bool {
+		if x == nil {
+			return false
+		}
+		return *x
+	},
 }
 
 func LemmyLinkRewrite(input string, host string, lemmy_domain string) (body string) {
@@ -268,9 +274,11 @@ func Initialize(Host string, r *http.Request) (State, error) {
 	state.Sort = getCookie(r, "DefaultSortType")
 	state.CommentSort = getCookie(r, "DefaultCommentSortType")
 	if dark := getCookie(r, "Dark"); dark != "" {
-		state.Dark = dark != "0"
-	} else {
-		state.Dark = os.Getenv("DARK") != ""
+		state.Dark = new(bool)
+		*state.Dark = dark != "0"
+	} else if dark := os.Getenv("DARK"); dark != "" {
+		state.Dark = new(bool)
+		*state.Dark = true
 	}
 	state.ShowNSFW = getCookie(r, "ShowNSFW") != ""
 	state.HideInstanceNames = getCookie(r, "HideInstanceNames") != ""
@@ -748,12 +756,12 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			deleteCookie(w, state.Host, name)
 			setCookie(w, "", name, r.FormValue(name))
 		}
-		if r.FormValue("darkmode") != "" {
-			setCookie(w, "", "Dark", "1")
-			state.Dark = true
-		} else {
+		state.Dark = new(bool)
+		if r.FormValue("undarkmode") == "" {
 			setCookie(w, "", "Dark", "0")
-			state.Dark = false
+		} else if r.FormValue("darkmode") != "" {
+			setCookie(w, "", "Dark", "1")
+			*state.Dark = true
 		}
 		if r.FormValue("shownsfw") != "" {
 			setCookie(w, "", "ShowNSFW", "1")
diff --git a/state.go b/state.go
index 1df05ff..2fa6d91 100644
--- a/state.go
+++ b/state.go
@@ -101,7 +101,7 @@ type State struct {
 	Content           string
 	SearchType        string
 	Captcha           *lemmy.CaptchaResponse
-	Dark              bool
+	Dark              *bool
 	ShowNSFW          bool
 	HideInstanceNames bool
 	HideThumbnails    bool
diff --git a/templates/frontpage.html b/templates/frontpage.html
index b726f11..a57593e 100644
--- a/templates/frontpage.html
+++ b/templates/frontpage.html
@@ -3,9 +3,12 @@
     <title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
+    {{ if not .Dark }}
+    <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" media="(prefers-color-scheme:dark)">
+    {{ end }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
-  <body {{ if .Dark }}class="dark"{{end}}>
+  <body {{ if is .Dark }}class="dark"{{end}}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
diff --git a/templates/header.html b/templates/header.html
index 16667b9..2feb8a8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
   </head>
-  <body{{ if .Dark }} class="dark"{{end}}>
+  <body{{ if is .Dark }} class="dark"{{end}}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
diff --git a/templates/login.html b/templates/login.html
index 2ecb7bd..29a93a2 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,9 +3,12 @@
     <title>{{ host .Host }}: sign up or log in</title>
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
+    {{ if not .Dark }}
+    <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" media="(prefers-color-scheme:dark)">
+    {{ end }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
-  <body {{ if .Dark }}class="dark"{{end}}>
+  <body {{ if is .Dark }}class="dark"{{end}}>
     <nav>
       <div class="communities">
         <a href="/{{.Host}}">home</a>
diff --git a/templates/main.html b/templates/main.html
index 2e45e84..3d55c59 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -4,8 +4,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
+    {{ if not .Dark }}
+    <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" media="(prefers-color-scheme:dark)">
+    {{ end }}
   </head>
-  <body{{ if .Dark }} class="dark"{{end}}>
+  <body{{ if is .Dark }} class="dark"{{end}}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
diff --git a/templates/root.html b/templates/root.html
index d78110a..017b44e 100644
--- a/templates/root.html
+++ b/templates/root.html
@@ -3,9 +3,12 @@
     <title>mlmym</title>
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v=7">
+    {{ if not .Dark }}
+    <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" media="(prefers-color-scheme:dark)">
+    {{ end }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
-  <body{{ if .Dark }} class="dark"{{end}}>
+  <body{{ if is .Dark }} class="dark"{{end}}>
     <nav>
       <div class="spacer"></div>
       <span class="title">{{ .Title }}</span>
diff --git a/templates/settings.html b/templates/settings.html
index a815fac..ad94120 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -4,9 +4,12 @@
     <title>{{  host .Host }}: preferences</title>
     <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
     <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
+    {{ if not .Dark }}
+    <link rel="stylesheet" href="/_/static/dark.css?v={{ .Version }}" media="(prefers-color-scheme:dark)">
+    {{ end }}
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
-  <body {{ if .Dark}}class="dark"{{end}}>
+  <body {{ if is .Dark}}class="dark"{{end}}>
     <noscript>
       <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
     </noscript>
@@ -103,11 +106,17 @@
           <option value="Controversial"{{ if eq .CommentSort "Controversial"}} selected{{end}}>Controversial</option>
         </select>
       </div>
-      <div>
+      <div id="darkmode">
         <label>
           dark mode
         </label>
-        <input type="checkbox" name="darkmode" {{ if .Dark }}checked{{end}}>
+        <input type="checkbox" name="darkmode" {{ if is .Dark }}checked{{end}}>
+      </div>
+      <div id="undarkmode">
+        <label>
+          dark mode
+        </label>
+        <input type="checkbox" name="undarkmode" checked>
       </div>
       <div class="scripting">
         <label>