fix: tweak dark-mode colours

henrywhitaker3 · henrywhitaker3 · commit 8d323757a1fd · 2025-02-04T20:54:17.000Z
diff --git a/internal/http/status.go b/internal/http/status.go
@@ -79,13 +79,13 @@ func operational(res []collector.Result) string {
 func bannerClasses(outage string) string {
 	switch outage {
 	case OutageNone:
-		return "bg-lime-600 text-white"
+		return "bg-lime-600 dark:bg-lime-800 text-white"
 	case OutageFull:
-		return "bg-red-500 text-white"
+		return "bg-red-500 dark:bg-red-800 text-white"
 	case OutagePartial:
 		fallthrough
 	default:
-		return "bg-orange-400"
+		return "bg-orange-400 dark:bg-orange-800 dark:text-white"
 	}
 }
 
diff --git a/internal/resources/views/base.html b/internal/resources/views/base.html
@@ -7,7 +7,7 @@
         <link rel="icon" type="image/png" href="/static/icon.png" />
         <title>{{ .Config.UI.PageTitle }}</title>
     </head>
-    <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">
+    <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">
         <div>
             {{ template "content" . }}
         </div>
diff --git a/internal/resources/views/service.html b/internal/resources/views/service.html
@@ -6,11 +6,11 @@ <h1 class="text-xl font-bold md:inline-block md:mr-2 text-avocado-800 dark:text-
         <span class="text-gray-500 dark:text-gray-300 text-sm">{{ $.Sprintf "%.2f" .Result.Uptime  }}% over the last {{ $.PrettyDuration .Result.Service.Query.Range }}</span>
     </div>
 
-    <div class="h-64 md:h-96 w-full border dark:border-slate-600 rounded-md shadow-md mb-6">{{ .Graph }}</div>
+    <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>
 
     {{- if .Extras }}
     {{- range $name, $graph := .Extras }}
-    <div class="w-full border dark:border-slate-600 rounded-md shadow-md pt-4 mb-6">
+    <div class="w-full border dark:border-none dark:bg-zinc-800 rounded-md shadow-md pt-4 mb-6">
         <h2 class="text-center text-avocado-800 dark:text-avocado-100">{{ $name }}</h2>
         <div class="h-64 md:h-96 w-full">{{ $graph }}</div>
     </div>
diff --git a/internal/resources/views/status.html b/internal/resources/views/status.html
@@ -14,10 +14,10 @@
     {{- if not (eq .Name "default") }}
     <h2 class="text-xl mb-2 pl-1 text-avocado-800 dark:text-avocado-100">{{ .Name }}</h2>
     {{- end }}
-    <div class="flex flex-col items-center justify-center rounded-md shadow-md dark:shadow-slate-600">
+    <div class="flex flex-col items-center justify-center rounded-md shadow-md dark:shadow-none dark:bg-zinc-800">
         {{- range .Results }}
         <a href="/{{ .Service.Name }}" class="block w-full">
-            <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">
+            <div class="flex justify-between items-center w-full py-6 px-6 md:px-8 lg:px-12 border-b dark:border-none">
                 <div>
                     <h3 class="text-lg font-bold md:inline-block md:mr-2 text-avocado-800 dark:text-avocado-100" >{{ .Service.Name }}</h3>
                     <span class="text-gray-500 dark:text-gray-300 text-sm">{{ $.Sprintf "%.2f" .Uptime  }}% over the last {{ $.PrettyDuration .Service.Query.Range }}</span>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,9 +3,13 @@ module.exports = {
   content: ["internal/resources/views/*.html"],
   safelist: [
     'bg-lime-600',
+    'dark:bg-lime-800',
     'bg-red-500',
+    'dark:bg-red-800',
     'bg-orange-400',
+    'dark:bg-orange-800',
     'text-white',
+    'dark:text-white',
     'h-full',
   ],
   theme: {
