From 85c0f57bf9662693ba29405cfb2446a943967c03 Mon Sep 17 00:00:00 2001 From: Carsten Moberg Hammer Date: Mon, 2 Mar 2026 09:35:56 +0000 Subject: [PATCH] Add dark mode with light/dark/system toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Uses TailwindCSS v4 class-based dark mode via @custom-variant. Adds a persistent theme toggle (localStorage) in the header that cycles light → dark → system, with a blocking script to prevent flash of wrong theme. All templates get dark: class counterparts for backgrounds, text, borders, and severity row colors. Dynamic user/DB badge colors are adjusted via a CSS brightness filter. Co-Authored-By: Claude Opus 4.6 --- internal/handler/kill.go | 2 +- templates/home.html | 10 ++--- templates/instance.html | 30 +++++++------- templates/layout.html | 60 +++++++++++++++++++++++++-- templates/partials/process_table.html | 50 +++++++++++----------- 5 files changed, 103 insertions(+), 49 deletions(-) diff --git a/internal/handler/kill.go b/internal/handler/kill.go index c525c6d..e5d6157 100644 --- a/internal/handler/kill.go +++ b/internal/handler/kill.go @@ -18,7 +18,7 @@ import ( func htmlError(w http.ResponseWriter, code int, msg string) { w.Header().Set("Content-Type", "text/html; charset=utf-8") w.WriteHeader(code) - _, _ = fmt.Fprintf(w, `
%s
`, html.EscapeString(msg)) + _, _ = fmt.Fprintf(w, `
%s
`, html.EscapeString(msg)) } func Kill(cfg *config.Config, dbs map[string]*sql.DB, tableTmpl *template.Template) http.HandlerFunc { diff --git a/templates/home.html b/templates/home.html index 66a5371..d706490 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,14 +1,14 @@ {{define "content"}}
-

Instances

+

Instances

{{range .Instances}} - +
-
- {{.}} +
+ {{.}}
- + diff --git a/templates/instance.html b/templates/instance.html index 073dc77..556f98d 100644 --- a/templates/instance.html +++ b/templates/instance.html @@ -9,13 +9,13 @@
- + @@ -25,15 +25,15 @@ + {{if $hs}}bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900 + {{else}}bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700{{end}}"> {{if $hs}}Show Idle{{else}}Hide Idle{{end}} + {{if $ar}}bg-green-50 dark:bg-green-950 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900 + {{else}}bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700{{end}}"> {{if $ar}}⏸ Pause{{else}}▶ Auto Refresh{{end}}
@@ -42,23 +42,23 @@ {{/* Active filter tags */}} {{if or $fu $fd}}
- Filtered by: + Filtered by: {{if $fu}} + class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-violet-100 dark:bg-violet-900 text-violet-800 dark:text-violet-200 rounded-full hover:bg-violet-200 dark:hover:bg-violet-800 transition-colors"> User: {{$fu}} × {{end}} {{if $fd}} + class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 rounded-full hover:bg-teal-200 dark:hover:bg-teal-800 transition-colors"> DB: {{$fd}} × {{end}}
{{end}} -
+
{{end}} -
- +
+ InnoDB Status - 
{{.InnoDBStatus}}
+ 
{{.InnoDBStatus}}
{{end}} diff --git a/templates/layout.html b/templates/layout.html index 33b2ebf..8005ce2 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -7,18 +7,72 @@ + + - -
- MySQL Admin + +
+ MySQL Admin +
{{template "content" .}}
+ {{end}} diff --git a/templates/partials/process_table.html b/templates/partials/process_table.html index 449336a..2b805ba 100644 --- a/templates/partials/process_table.html +++ b/templates/partials/process_table.html @@ -8,7 +8,7 @@ {{- $hs := index . "hs" -}} {{- $fu := index . "fu" -}} {{- $fd := index . "fd" -}} - {{$label}}{{sortIndicator $sc $sd $col}} @@ -24,11 +24,11 @@ {{$fd := .FilterDB}} {{if not .Processes}} -
No active processes
+
No active processes
{{else}} - + {{template "sortHeader" (dict "name" $name "sc" $sc "sd" $sd "ar" $ar "hs" $hs "fu" $fu "fd" $fd "col" "Id" "label" "Id")}} {{template "sortHeader" (dict "name" $name "sc" $sc "sd" $sd "ar" $ar "hs" $hs "fu" $fu "fd" $fd "col" "User" "label" "User")}} @@ -42,21 +42,21 @@ {{template "sortHeader" (dict "name" $name "sc" $sc "sd" $sd "ar" $ar "hs" $hs "fu" $fu "fd" $fd "col" "Host" "label" "Host")}} - + {{range .Processes}} {{/* Effective time = max(Time, Transaction.ActiveTime) for severity */}} {{$t := .Time}} {{if and .Transaction (gt .Transaction.ActiveTime .Time)}}{{$t = .Transaction.ActiveTime}}{{end}} + {{if eq .Command "Sleep"}}opacity-40 hover:bg-gray-50 dark:hover:bg-gray-800 + {{else if ge $t 60}}bg-red-50 dark:bg-red-950 hover:bg-red-100 dark:hover:bg-red-900 + {{else if ge $t 30}}bg-orange-50 dark:bg-orange-950 hover:bg-orange-100 dark:hover:bg-orange-900 + {{else if ge $t 5}}bg-yellow-50 dark:bg-yellow-950 hover:bg-yellow-100 dark:hover:bg-yellow-900 + {{else}}hover:bg-gray-50 dark:hover:bg-gray-800{{end}}"> - + + - + - + - + - + {{end}}
{{.ID}}{{.ID}} {{/* Clicking filters by this user; clicking again clears the filter */}} - {{if .DB}} - - {{.Command}}{{.Command}}{{formatNumber .Time}}s{{formatNumber .Time}}s{{.State}}{{.State}} {{if .Transaction}}
+ {{if ge .Transaction.ActiveTime 60}}text-red-700 dark:text-red-400 font-semibold + {{else if ge .Transaction.ActiveTime 30}}text-orange-700 dark:text-orange-400 font-medium + {{else if ge .Transaction.ActiveTime 5}}text-yellow-700 dark:text-yellow-400 + {{else}}text-gray-700 dark:text-gray-300{{end}}"> {{formatNumber .Transaction.ActiveTime}}s - + - 
{{join .Transaction.Info "\n"}}
+ 
{{join .Transaction.Info "\n"}}
{{end}} 		-
{{.Info}}
+
{{.Info}}
{{if .Progress}}{{.Progress}}%{{end}}{{if .Progress}}{{.Progress}}%{{end}}{{.Host}}{{.Host}}