use prefer-color-scheme

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

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
}

View file

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

View file

@ -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")

View file

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

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

View file

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

View file

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

View file

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

View file

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

View file

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