Skip to content

Commit 92fc562

Browse files
larsl-netlarsl-net
committed
Add darkmode
1 parent 67beac9 commit 92fc562

File tree

6 files changed

+26
-12
lines changed

6 files changed

+26
-12
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,12 @@ services:
5353
ui:
5454
# Optional. The title of the page (default: Status Page)
5555
title: Status Page
56+
# Optional. The theme of the page (default: light)
57+
# Options:
58+
# - auto: Use color scheme of OS
59+
# - light: Use light color scheme
60+
# - dark: Use dark color scheme
61+
theme: auto
5662
# Optional. The interval that the page reloads on (default: 30s)
5763
refresh: 30s
5864
# Optional. Configure graph settings

‎internal/config/config.go

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ type UI struct {
3737
PageTitle string `yaml:"title"`
3838
RefreshInterval time.Duration `yaml:"refresh"`
3939
Graphs Graphs `yaml:"graphs"`
40+
Theme string `yaml:"theme"`
4041
}
4142

4243
type Metrics struct {
@@ -149,6 +150,9 @@ func setDefaults(conf *Config) {
149150
if conf.UI.Graphs.Points <= 0 {
150151
conf.UI.Graphs.Points = 200
151152
}
153+
if conf.UI.Theme == "" {
154+
conf.UI.Theme = "light"
155+
}
152156
}
153157

154158
func setDefaultQueryValues(q *Query) {

‎internal/resources/views/base.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" {{ if ne .Config.UI.Theme "auto" }}class="{{ .Config.UI.Theme }}"{{ end }}>
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="stylesheet" href="/static/tailwind.css?v={{ .Version }}" />
77
<link rel="icon" type="image/png" href="/static/icon.png" />
88
<title>{{ .Config.UI.PageTitle }}</title>
99
</head>
10-
<body class="mx-auto min-h-dvh w-full md:w-3/4 p-6 md:p-8 lg:p-6 lg:w-1/2 flex flex-col justify-between bg-neutral-50">
10+
<body class="mx-auto min-h-dvh w-full md:w-3/4 p-6 md:p-8 lg:p-6 lg:w-1/2 flex flex-col justify-between bg-neutral-50 dark:bg-slate-900">
1111
<div>
1212
{{ template "content" . }}
1313
</div>
1414

15-
<div class="mt-6 text-center text-gray-400">
15+
<div class="mt-6 text-center text-gray-400 dark:text-gray-200">
1616
Built with <a class="text-avocado-600 hover:text-avocado-500" href="https://github.com/henrywhitaker3/prompage">PromPage</a> |
1717
Checked {{ .Age }} ago
1818
</div>

‎internal/resources/views/service.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
{{- if not (eq .Graph "") }}
33
<div class="flex flex-col justify-between items-center">
44
<div class="w-full flex flex-col md:flex-row justify-center md:items-baseline items-center mb-6">
5-
<h1 class="text-xl font-bold md:inline-block md:mr-2 text-avocado-800" >{{ .Result.Service.Name }}</h1>
6-
<span class="text-gray-500 text-sm">{{ $.Sprintf "%.2f" .Result.Uptime }}% over the last {{ $.PrettyDuration .Result.Service.Query.Range }}</span>
5+
<h1 class="text-xl font-bold md:inline-block md:mr-2 text-avocado-800 dark:text-avocado-100" >{{ .Result.Service.Name }}</h1>
6+
<span class="text-gray-500 dark:text-gray-300 text-sm">{{ $.Sprintf "%.2f" .Result.Uptime }}% over the last {{ $.PrettyDuration .Result.Service.Query.Range }}</span>
77
</div>
88

9-
<div class="h-64 md:h-96 w-full border rounded-md shadow-md mb-6">{{ .Graph }}</div>
9+
<div class="h-64 md:h-96 w-full border dark:border-slate-600 rounded-md shadow-md mb-6">{{ .Graph }}</div>
1010

1111
{{- if .Extras }}
1212
{{- range $name, $graph := .Extras }}
1313
<div class="w-full border rounded-md shadow-md pt-4 mb-6">
14-
<h2 class="text-center text-avocado-800">{{ $name }}</h2>
14+
<h2 class="text-center text-avocado-800 dark:text-avocado-100">{{ $name }}</h2>
1515
<div class="h-64 md:h-96 w-full">{{ $graph }}</div>
1616
</div>
1717
{{- end }}

‎internal/resources/views/status.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
{{- if .Results }}
1313
<div class="mb-5">
1414
{{- if not (eq .Name "default") }}
15-
<h2 class="text-xl mb-2 pl-1 text-avocado-800">{{ .Name }}</h2>
15+
<h2 class="text-xl mb-2 pl-1 text-avocado-800 dark:text-avocado-100">{{ .Name }}</h2>
1616
{{- end }}
17-
<div class="flex flex-col items-center justify-center rounded-md shadow-md border">
17+
<div class="flex flex-col items-center justify-center rounded-md shadow-md dark:shadow-slate-600">
1818
{{- range .Results }}
1919
<a href="/{{ .Service.Name }}" class="block w-full">
20-
<div class="flex justify-between items-center w-full py-6 px-6 md:px-8 lg:px-12 border-b">
20+
<div class="flex justify-between items-center w-full py-6 px-6 md:px-8 lg:px-12 border-b dark:border-slate-600">
2121
<div>
22-
<h3 class="text-lg font-bold md:inline-block md:mr-2 text-avocado-800" >{{ .Service.Name }}</h3>
23-
<span class="text-gray-500 text-sm">{{ $.Sprintf "%.2f" .Uptime }}% over the last {{ $.PrettyDuration .Service.Query.Range }}</span>
22+
<h3 class="text-lg font-bold md:inline-block md:mr-2 text-avocado-800 dark:text-avocado-100" >{{ .Service.Name }}</h3>
23+
<span class="text-gray-500 dark:text-gray-300 text-sm">{{ $.Sprintf "%.2f" .Uptime }}% over the last {{ $.PrettyDuration .Service.Query.Range }}</span>
2424
</div>
2525
<div>
2626
{{- if not .Success }}

‎tailwind.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,8 @@ module.exports = {
2828
},
2929
},
3030
plugins: [],
31+
darkMode: ['variant', [
32+
'@media (prefers-color-scheme: dark) { &:not(.light *) }',
33+
'&:is(.dark *)',
34+
]],
3135
}

0 commit comments

Comments
 (0)