Skip to content

Commit d2c2d19

Browse files
Merge pull request #27 from larsl-net/main
2 parents 2867f48 + 8d32375 commit d2c2d19

File tree

7 files changed

+34
-16
lines changed

7 files changed

+34
-16
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/http/status.go

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ func operational(res []collector.Result) string {
7979
func bannerClasses(outage string) string {
8080
switch outage {
8181
case OutageNone:
82-
return "bg-lime-600 text-white"
82+
return "bg-lime-600 dark:bg-lime-800 text-white"
8383
case OutageFull:
84-
return "bg-red-500 text-white"
84+
return "bg-red-500 dark:bg-red-800 text-white"
8585
case OutagePartial:
8686
fallthrough
8787
default:
88-
return "bg-orange-400"
88+
return "bg-orange-400 dark:bg-orange-800 dark:text-white"
8989
}
9090
}
9191

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-zinc-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: 5 additions & 5 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-none dark:bg-zinc-800 rounded-md shadow-md mb-6">{{ .Graph }}</div>
1010

1111
{{- if .Extras }}
1212
{{- range $name, $graph := .Extras }}
13-
<div class="w-full border rounded-md shadow-md pt-4 mb-6">
14-
<h2 class="text-center text-avocado-800">{{ $name }}</h2>
13+
<div class="w-full border dark:border-none dark:bg-zinc-800 rounded-md shadow-md pt-4 mb-6">
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-none dark:bg-zinc-800">
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-none">
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: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ module.exports = {
33
content: ["internal/resources/views/*.html"],
44
safelist: [
55
'bg-lime-600',
6+
'dark:bg-lime-800',
67
'bg-red-500',
8+
'dark:bg-red-800',
79
'bg-orange-400',
10+
'dark:bg-orange-800',
811
'text-white',
12+
'dark:text-white',
913
'h-full',
1014
],
1115
theme: {
@@ -28,4 +32,8 @@ module.exports = {
2832
},
2933
},
3034
plugins: [],
35+
darkMode: ['variant', [
36+
'@media (prefers-color-scheme: dark) { &:not(.light *) }',
37+
'&:is(.dark *)',
38+
]],
3139
}

0 commit comments

Comments
 (0)