feat(client): added support for custom theming via custom.css file provided at runtime

This commit is contained in:
Will Moss
2024-01-04 12:52:51 +01:00
parent 25330090dc
commit 6e53323b2c
3 changed files with 26 additions and 2 deletions

View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
<!-- <link rel="stylesheet" type="text/css" href="/assets/css/custom.css" /> -->
<link rel="stylesheet" type="text/css" href="/assets/css/custom.css" />
<script type="text/javascript" src="/assets/js/isaiah.js"></script>
<title>Manage your Docker fleet with ease - Isaiah</title>

View File

@@ -112,8 +112,16 @@ func main() {
}
server.Melody.Config.MaxMessageSize = _strconv.ParseInt(_os.GetEnv("SERVER_MAX_READ_SIZE"), 10, 64)
// Set up static file serving for the front-end
// Set up static file serving for the front-end with support for color-theming
serverRoot := _fs.Sub(clientAssets, "client")
http.HandleFunc("/assets/css/custom.css", func(w http.ResponseWriter, r *http.Request) {
if _, err := os.Stat("custom.css"); errors.Is(err, os.ErrNotExist) {
w.WriteHeader(200)
return
}
http.ServeFile(w, r, "custom.css")
})
http.Handle("/", http.StripPrefix("/", http.FileServer(http.FS(serverRoot))))
// Set up an endpoint to handle Websocket connections with Melody

16
app/sample.custom.css Normal file
View File

@@ -0,0 +1,16 @@
:root {
--color-terminal-background: #000000;
--color-terminal-base: #ffffff;
--color-terminal-accent: #4af626;
--color-terminal-accent-selected: #73f859;
--color-terminal-hover: rgba(255, 255, 255, 0.15);
--color-terminal-border: #ffffff;
--color-terminal-danger: #ff0000;
--color-terminal-warning: #f67e26;
--color-terminal-accent-alternative: #26e1f6;
--color-terminal-json-key: darkturquoise;
--color-terminal-json-value: beige;
--color-terminal-cell-failure: #ff9999;
--color-terminal-cell-success: #9bff99;
--color-terminal-cell-paused: beige;
}