Better dark mode support

This commit is contained in:
Melon 2023-12-17 16:03:13 +00:00
parent 56ff556928
commit ab4693a9ac
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
16 changed files with 24 additions and 20 deletions

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
<script> <script>
window.addEventListener("load", function () { window.addEventListener("load", function () {
selectText("app-secret"); selectText("app-secret");

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{.ServiceName}}</title> <title>{{.ServiceName}}</title>
<link rel="stylesheet" href="/theme/dark.css" media="screen and (prefers-color-scheme: dark)"> <link rel="stylesheet" href="/theme/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -156,8 +156,8 @@ func NewHttpServer(conf Conf, db *database.DB, privKey []byte) *http.Server {
})) }))
// theme styles // theme styles
r.GET("/theme/dark.css", func(rw http.ResponseWriter, req *http.Request, params httprouter.Params) { r.GET("/theme/style.css", func(rw http.ResponseWriter, req *http.Request, params httprouter.Params) {
http.ServeContent(rw, req, "dark.css", time.Now(), bytes.NewReader(theme.DarkThemeCss)) http.ServeContent(rw, req, "style.css", time.Now(), bytes.NewReader(theme.ThemeCss))
}) })
// login steps // login steps

View File

@ -1,4 +0,0 @@
html, body {
background-color: #242424;
color: #eeeeee;
}

8
theme/style.css Normal file
View File

@ -0,0 +1,8 @@
html, body {
color-scheme: light dark;
}
@media screen and (prefers-color-scheme: dark) {
background-color: #242424;
color: #eeeeee;
}

View File

@ -2,5 +2,5 @@ package theme
import _ "embed" import _ "embed"
//go:embed dark.css //go:embed style.css
var DarkThemeCss []byte var ThemeCss []byte