fedi/mlmym
1
0
Fork 0
mirror of https://github.com/rystaf/mlmym.git synced 2024-09-18 19:55:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

use prefer-color-scheme

Browse source
This commit is contained in:
Ryan Stafford 2023-12-21 09:30:41 -05:00
parent d30c4d391e
commit 96c0a3a2b2
10 changed files with 363 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
public/dark.css Normal file
View file

@ -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
}

314
public/style.css
View file

@ -3,24 +3,12 @@ body {
margin: 0px; margin: 0px;
padding-bottom: 20px; padding-bottom: 20px;
} }
body.dark {
background-color: #262626;
color: #ddd;
}
code { code {
word-wrap: break-word; word-wrap: break-word;
} }
summary { summary {
cursor: pointer; 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 { .rank, .thumb, .score {
float: left; float: left;
} }
@ -60,9 +48,6 @@ summary {
text-align: right; text-align: right;
min-width: 21px; min-width: 21px;
} }
.dark .post .rank {
color: #646464;
}
.post .score { .post .score {
color: #c6c6c6; color: #c6c6c6;
font-size: 12px; font-size: 12px;
@ -70,9 +55,6 @@ summary {
text-align: center; text-align: center;
min-width: 42px; min-width: 42px;
} }
.dark .post .score {
color: #646464;
}
.comment .score { .comment .score {
clear:left; clear:left;
margin-right: 4px; margin-right: 4px;
@ -95,9 +77,6 @@ summary {
font-size: 20px; font-size: 20px;
line-height: 15px; line-height: 15px;
} }
.dark .score form.link-btn input {
color: #646464;
}
.comment .score form.link-btn input { .comment .score form.link-btn input {
line-height: 17px; line-height: 17px;
} }
@ -116,16 +95,10 @@ summary {
display: inline; display: inline;
} }
.post.distinguished .title a, .post.announcement .title a, .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; color: #228822;
font-weight: bold; font-weight: bold;
} }
.dark .title a {
color: #dedede;
}
.dark .title a:visited {
color: #a6a6a6
}
.post.deleted .title a { .post.deleted .title a {
text-decoration: line-through; text-decoration: line-through;
} }
@ -163,13 +136,6 @@ summary {
.message b { .message b {
color: #000; color: #000;
} }
.dark .message b {
color: #ddd;
}
.dark .meta {
color: #b4b4b4;
}
.comment { .comment {
font-size: 14px; font-size: 14px;
margin: 0px 0px 5px 0px; margin: 0px 0px 5px 0px;
@ -177,9 +143,6 @@ summary {
border-radius: 3px; border-radius: 3px;
padding: 10px 10px 0px 7px; padding: 10px 10px 0px 7px;
} }
.dark .comment {
border-color: #333;
}
.activity .comment { .activity .comment {
border: 0px; border: 0px;
} }
@ -195,26 +158,12 @@ summary {
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
background-color:#f7f7f8; 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 .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; 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 { .comment .meta {
font-size: 10px; font-size: 10px;
margin-bottom: 6px; margin-bottom: 6px;
@ -228,11 +177,6 @@ summary {
padding: 10px; padding: 10px;
font-size: 14px; font-size: 14px;
} }
.dark .preview h3 {
background-color: #333;
border-color: #333;
color: #ccc;
}
.preview .comment { .preview .comment {
margin-top: 5px; margin-top: 5px;
padding: 0px; padding: 0px;
@ -246,9 +190,6 @@ summary {
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
} }
.dark .meta a {
color: #6a98af;
}
.comment .meta a.distinguished.admin, .post.distinguished a.admin, .post.announcement a.admin { .comment .meta a.distinguished.admin, .post.distinguished a.admin, .post.announcement a.admin {
background-color: #ff0011; background-color: #ff0011;
color: white; color: white;
@ -484,7 +425,7 @@ form.nsfw div {
border-left: 2px solid #c5c1ad; border-left: 2px solid #c5c1ad;
padding: 0 8px; 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; text-decoration: none;
color: #888; color: #888;
display: inline-block; display: inline-block;
@ -590,12 +531,6 @@ form.blockpost {
display: block; display: block;
padding: 0px 3px; padding: 0px 3px;
} }
.dark #mycommunities a {
color: #8cb3d9;
}
.dark #mycommunities a:hover {
background-color: #3e3e3e;
}
#mycommunities a:hover { #mycommunities a:hover {
background-color: #c7def7; background-color: #c7def7;
} }
@ -606,9 +541,6 @@ form.blockpost {
#settingspopup form { #settingspopup form {
margin: 0px; margin: 0px;
} }
.dark #settingspopup, .dark #mycommunities {
background-color: #262626;
}
#settingspopup.open, #mycommunities.open { #settingspopup.open, #mycommunities.open {
display: inline-block; display: inline-block;
} }
@ -648,11 +580,6 @@ form.blockpost {
.expando.open.showimage .md { .expando.open.showimage .md {
display: none; display: none;
} }
.dark .expando .md {
background-color: #262626;
color: #ddd;
border-color: #666;
}
.expando p, .comment p, .message p { .expando p, .comment p, .message p {
margin-top: 0; margin-top: 0;
margin-bottom: 2px; margin-bottom: 2px;
@ -729,10 +656,6 @@ main {
background-color: #EFF7FF; background-color: #EFF7FF;
border-radius: 3px; border-radius: 3px;
} }
.dark .side .stats {
background-color: #393939;
border-color: #666;
}
.side .stats b span { .side .stats b span {
font-size: 22px; font-size: 22px;
} }
@ -772,39 +695,18 @@ main {
padding: 5px; padding: 5px;
border: 1px solid #369; border: 1px solid #369;
} }
.dark .create a div {
background-color: #444444;
border: 0;
}
.create a div:hover { .create a div:hover {
background-color: #369; background-color: #369;
} }
.dark .create a div:hover {
background-color: #333333;
}
.create a { .create a {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;
color: #369; color: #369;
} }
.dark .create a {
color: white;
}
.create a:hover { .create a:hover {
color: white; 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 { h1, h2 {
margin: 5px 0px; margin: 5px 0px;
} }
@ -828,9 +730,6 @@ h1, h2 {
text-decoration: none; text-decoration: none;
color: #369; color: #369;
} }
.dark .moderators a {
color: #6a98af;
}
main > .community { main > .community {
margin: 20px 50px; margin: 20px 50px;
max-width: 840px; max-width: 840px;
@ -846,11 +745,6 @@ main > .community {
max-height: 170px; max-height: 170px;
overflow: auto; overflow: auto;
} }
.dark .community .description {
background-color: #333;
color: #ddd;
border-color: #777;
}
.community .details { .community .details {
margin-left: 36px; margin-left: 36px;
} }
@ -861,10 +755,6 @@ nav {
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
} }
.dark nav {
background-color: #696969;
}
nav .communities { nav .communities {
background-color: #f0f0f0; background-color: #f0f0f0;
color: gray; color: gray;
@ -878,12 +768,6 @@ nav .communities {
nav .communities a { nav .communities a {
margin: 0px 2px; margin: 0px 2px;
} }
.dark nav .communities {
background-color: #cccccc;
}
.dark nav .communities a {
color: #000;
}
nav .communities a.more { nav .communities a.more {
background-color: #f0f0f0; background-color: #f0f0f0;
color: black; color: black;
@ -893,9 +777,6 @@ nav .communities a.more {
right: 0; right: 0;
margin: 0; margin: 0;
} }
.dark nav .communities a.more {
background-color: #cccccc;
}
.orangered, .orangered b { .orangered, .orangered b {
color: orangered !important; color: orangered !important;
} }
@ -916,9 +797,6 @@ nav .title, nav > span {
text-decoration: none; text-decoration: none;
font-variant: small-caps; font-variant: small-caps;
} }
.dark nav .title, .dark nav > span {
color: #ececec;
}
nav a.title { nav a.title {
margin-left: 70px; margin-left: 70px;
} }
@ -976,11 +854,6 @@ nav ul a {
text-decoration: none; text-decoration: none;
padding: 2px 6px 0 6px; padding: 2px 6px 0 6px;
} }
.dark nav ul a {
background-color: #262626;
color: #ddd;
}
.selected { .selected {
font-weight: bold; font-weight: bold;
} }
@ -991,11 +864,6 @@ nav .selected a {
border: 1px solid #00a846; border: 1px solid #00a846;
border-bottom: 1px solid white; border-bottom: 1px solid white;
} }
.dark nav .selected a {
color: #d25a32;
border-bottom: 1px solid #262626;
}
nav .right { nav .right {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -1009,9 +877,6 @@ nav .right {
font-size: 10px; font-size: 10px;
z-index: 101; z-index: 101;
} }
.dark nav .right {
background-color: #333333;
}
nav .right a.mailbox { nav .right a.mailbox {
font-size: 21px; font-size: 21px;
position: relative; position: relative;
@ -1022,9 +887,6 @@ nav .right a, nav .right input[type=submit] {
color: #369; color: #369;
text-decoration: none; text-decoration: none;
} }
.dark nav .right a, .dark nav .right input[type=submit]{
color: #dadada;
}
nav .right form, .comment form, form.link-btn { nav .right form, .comment form, form.link-btn {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -1054,12 +916,6 @@ nav .right form input, .comment .buttons input, form.link-btn input {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
.dark .commentmenu .selected, .dark .menu .selected {
color: #ddd;
}
.dark .commentmenu a, .dark .menu {
color: #6a98af;
}
.warning { .warning {
background-color: #f6e69f; background-color: #f6e69f;
border-color: #ffa500; border-color: #ffa500;
@ -1068,17 +924,10 @@ nav .right form input, .comment .buttons input, form.link-btn input {
padding: 5px 10px; padding: 5px 10px;
margin: 5px 10px; margin: 5px 10px;
} }
.dark .warning {
background-color: #544400;
}
.highlight { .highlight {
background-color: #ffc; background-color: #ffc;
padding-left: 5px; padding-left: 5px;
} }
.dark .highlight{
background-color: #4c4c4c;
}
form.create { form.create {
width: 520px; width: 520px;
} }
@ -1089,9 +938,6 @@ form.create div {
background-color: #cee3f8; background-color: #cee3f8;
border-radius: 4px; border-radius: 4px;
} }
.dark form.create div {
background-color: #181818
}
form.create label { form.create label {
display: block; display: block;
font-size: 18px; font-size: 18px;
@ -1173,3 +1019,159 @@ form.create input[type=file], form.create select {
max-width: 500px; max-width: 500px;
font-size: 13px; 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;
}

24
routes.go
View file

@ -169,6 +169,12 @@ var funcMap = template.FuncMap{
"add": func(a int64, b int) int { "add": func(a int64, b int) int {
return int(a) + b 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) { 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.Sort = getCookie(r, "DefaultSortType")
state.CommentSort = getCookie(r, "DefaultCommentSortType") state.CommentSort = getCookie(r, "DefaultCommentSortType")
if dark := getCookie(r, "Dark"); dark != "" { if dark := getCookie(r, "Dark"); dark != "" {
state.Dark = dark != "0" state.Dark = new(bool)
} else { *state.Dark = dark != "0"
state.Dark = os.Getenv("DARK") != "" } else if dark := os.Getenv("DARK"); dark != "" {
state.Dark = new(bool)
*state.Dark = true
} }
state.ShowNSFW = getCookie(r, "ShowNSFW") != "" state.ShowNSFW = getCookie(r, "ShowNSFW") != ""
state.HideInstanceNames = getCookie(r, "HideInstanceNames") != "" 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) deleteCookie(w, state.Host, name)
setCookie(w, "", name, r.FormValue(name)) setCookie(w, "", name, r.FormValue(name))
} }
if r.FormValue("darkmode") != "" { state.Dark = new(bool)
setCookie(w, "", "Dark", "1") if r.FormValue("undarkmode") == "" {
state.Dark = true
} else {
setCookie(w, "", "Dark", "0") setCookie(w, "", "Dark", "0")
state.Dark = false } else if r.FormValue("darkmode") != "" {
setCookie(w, "", "Dark", "1")
*state.Dark = true
} }
if r.FormValue("shownsfw") != "" { if r.FormValue("shownsfw") != "" {
setCookie(w, "", "ShowNSFW", "1") setCookie(w, "", "ShowNSFW", "1")

2
state.go
View file

@ -101,7 +101,7 @@ type State struct {
Content string Content string
SearchType string SearchType string
Captcha *lemmy.CaptchaResponse Captcha *lemmy.CaptchaResponse
Dark bool Dark *bool
ShowNSFW bool ShowNSFW bool
HideInstanceNames bool HideInstanceNames bool
HideThumbnails bool HideThumbnails bool

5
templates/frontpage.html
View file

@ -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> <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="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}"> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark }}class="dark"{{end}}> <body {{ if is .Dark }}class="dark"{{end}}>
<noscript> <noscript>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}"> <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript> </noscript>

2
templates/header.html
View file

@ -5,7 +5,7 @@
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}"> <link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
</head> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if is .Dark }} class="dark"{{end}}>
<noscript> <noscript>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}"> <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript> </noscript>

5
templates/login.html
View file

@ -3,9 +3,12 @@
<title>{{ host .Host }}: sign up or log in</title> <title>{{ host .Host }}: sign up or log in</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}"> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark }}class="dark"{{end}}> <body {{ if is .Dark }}class="dark"{{end}}>
<nav> <nav>
<div class="communities"> <div class="communities">
<a href="/{{.Host}}">home</a> <a href="/{{.Host}}">home</a>

5
templates/main.html
View file

@ -4,8 +4,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}"> <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> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if is .Dark }} class="dark"{{end}}>
<noscript> <noscript>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}"> <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript> </noscript>

5
templates/root.html
View file

@ -3,9 +3,12 @@
<title>mlmym</title> <title>mlmym</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=7"> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if is .Dark }} class="dark"{{end}}>
<nav> <nav>
<div class="spacer"></div> <div class="spacer"></div>
<span class="title">{{ .Title }}</span> <span class="title">{{ .Title }}</span>

15
templates/settings.html
View file

@ -4,9 +4,12 @@
<title>{{ host .Host }}: preferences</title> <title>{{ host .Host }}: preferences</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}"> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark}}class="dark"{{end}}> <body {{ if is .Dark}}class="dark"{{end}}>
<noscript> <noscript>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}"> <link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript> </noscript>
@ -103,11 +106,17 @@
<option value="Controversial"{{ if eq .CommentSort "Controversial"}} selected{{end}}>Controversial</option> <option value="Controversial"{{ if eq .CommentSort "Controversial"}} selected{{end}}>Controversial</option>
</select> </select>
</div> </div>
<div> <div id="darkmode">
<label> <label>
dark mode dark mode
</label> </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>
<div class="scripting"> <div class="scripting">
<label> <label>