File tree Expand file tree Collapse file tree 7 files changed +34
-16
lines changed Expand file tree Collapse file tree 7 files changed +34
-16
lines changed Original file line number Diff line number Diff line change @@ -53,6 +53,12 @@ services:
53
53
ui :
54
54
# Optional. The title of the page (default: Status Page)
55
55
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
56
62
# Optional. The interval that the page reloads on (default: 30s)
57
63
refresh : 30s
58
64
# Optional. Configure graph settings
Original file line number Diff line number Diff line change @@ -37,6 +37,7 @@ type UI struct {
37
37
PageTitle string `yaml:"title"`
38
38
RefreshInterval time.Duration `yaml:"refresh"`
39
39
Graphs Graphs `yaml:"graphs"`
40
+ Theme string `yaml:"theme"`
40
41
}
41
42
42
43
type Metrics struct {
@@ -149,6 +150,9 @@ func setDefaults(conf *Config) {
149
150
if conf .UI .Graphs .Points <= 0 {
150
151
conf .UI .Graphs .Points = 200
151
152
}
153
+ if conf .UI .Theme == "" {
154
+ conf .UI .Theme = "light"
155
+ }
152
156
}
153
157
154
158
func setDefaultQueryValues (q * Query ) {
Original file line number Diff line number Diff line change @@ -79,13 +79,13 @@ func operational(res []collector.Result) string {
79
79
func bannerClasses (outage string ) string {
80
80
switch outage {
81
81
case OutageNone :
82
- return "bg-lime-600 text-white"
82
+ return "bg-lime-600 dark:bg-lime-800 text-white"
83
83
case OutageFull :
84
- return "bg-red-500 text-white"
84
+ return "bg-red-500 dark:bg-red-800 text-white"
85
85
case OutagePartial :
86
86
fallthrough
87
87
default :
88
- return "bg-orange-400"
88
+ return "bg-orange-400 dark:bg-orange-800 dark:text-white "
89
89
}
90
90
}
91
91
Original file line number Diff line number Diff line change 1
1
<!DOCTYPE html>
2
- < html lang ="en ">
2
+ < html lang ="en " {{ if ne .Config.UI.Theme "auto" }}class=" {{ .Config.UI.Theme }} " {{ end }} >
3
3
< head >
4
4
< meta charset ="UTF-8 ">
5
5
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
6
< link rel ="stylesheet " href ="/static/tailwind.css?v={{ .Version }} " />
7
7
< link rel ="icon " type ="image/png " href ="/static/icon.png " />
8
8
< title > {{ .Config.UI.PageTitle }}</ title >
9
9
</ 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 ">
11
11
< div >
12
12
{{ template "content" . }}
13
13
</ div >
14
14
15
- < div class ="mt-6 text-center text-gray-400 ">
15
+ < div class ="mt-6 text-center text-gray-400 dark:text-gray-200 ">
16
16
Built with < a class ="text-avocado-600 hover:text-avocado-500 " href ="https://github.com/henrywhitaker3/prompage "> PromPage</ a > |
17
17
Checked {{ .Age }} ago
18
18
</ div >
Original file line number Diff line number Diff line change 2
2
{{- if not (eq .Graph "") }}
3
3
< div class ="flex flex-col justify-between items-center ">
4
4
< 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 >
7
7
</ div >
8
8
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 >
10
10
11
11
{{- if .Extras }}
12
12
{{- 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 >
15
15
< div class ="h-64 md:h-96 w-full "> {{ $graph }}</ div >
16
16
</ div >
17
17
{{- end }}
Original file line number Diff line number Diff line change 12
12
{{- if .Results }}
13
13
< div class ="mb-5 ">
14
14
{{- 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 >
16
16
{{- 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 ">
18
18
{{- range .Results }}
19
19
< 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 ">
21
21
< 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 >
24
24
</ div >
25
25
< div >
26
26
{{- if not .Success }}
Original file line number Diff line number Diff line change @@ -3,9 +3,13 @@ module.exports = {
3
3
content : [ "internal/resources/views/*.html" ] ,
4
4
safelist : [
5
5
'bg-lime-600' ,
6
+ 'dark:bg-lime-800' ,
6
7
'bg-red-500' ,
8
+ 'dark:bg-red-800' ,
7
9
'bg-orange-400' ,
10
+ 'dark:bg-orange-800' ,
8
11
'text-white' ,
12
+ 'dark:text-white' ,
9
13
'h-full' ,
10
14
] ,
11
15
theme : {
@@ -28,4 +32,8 @@ module.exports = {
28
32
} ,
29
33
} ,
30
34
plugins : [ ] ,
35
+ darkMode : [ 'variant' , [
36
+ '@media (prefers-color-scheme: dark) { &:not(.light *) }' ,
37
+ '&:is(.dark *)' ,
38
+ ] ] ,
31
39
}
You can’t perform that action at this time.
0 commit comments