From da8fb57268f450e43688c5d7d0af57a021c8a93d Mon Sep 17 00:00:00 2001 From: naiba Date: Tue, 13 Aug 2024 23:50:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=BB=98=E8=AE=A4=E4=B8=BB=E9=A2=98=20?= =?UTF-8?q?dark=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cmd/dashboard/controller/controller.go | 33 ++-- resource/static/darkmode.css | 148 ++++++++++++++++++ resource/static/theme-default/css/main.css | 111 +++++++------ resource/template/common/footer.html | 4 +- resource/template/common/header.html | 3 +- resource/template/component/api.html | 2 +- resource/template/component/cron.html | 2 +- resource/template/component/server.html | 2 +- resource/template/dashboard-default/api.html | 2 +- resource/template/dashboard-default/cron.html | 2 +- .../template/dashboard-default/monitor.html | 2 +- resource/template/dashboard-default/nat.html | 2 +- .../dashboard-default/notification.html | 4 +- .../template/dashboard-default/server.html | 2 +- resource/template/theme-default/footer.html | 5 +- resource/template/theme-default/header.html | 1 + resource/template/theme-default/network.html | 2 +- 17 files changed, 248 insertions(+), 79 deletions(-) create mode 100644 resource/static/darkmode.css diff --git a/cmd/dashboard/controller/controller.go b/cmd/dashboard/controller/controller.go index 927976952f..66287813b9 100644 --- a/cmd/dashboard/controller/controller.go +++ b/cmd/dashboard/controller/controller.go @@ -35,20 +35,27 @@ func ServeWeb(port uint) *http.Server { pprof.Register(r) } r.Use(natGateway) - tmpl := template.New("").Funcs(funcMap) - var err error - tmpl, err = tmpl.ParseFS(resource.TemplateFS, "template/**/*.html") - if err != nil { - panic(err) - } - tmpl = loadThirdPartyTemplates(tmpl) - r.SetHTMLTemplate(tmpl) - r.Use(mygin.RecordPath) - staticFs, err := fs.Sub(resource.StaticFS, "static") - if err != nil { - panic(err) + if os.Getenv("NZ_LOCAL_TEMPLATE") == "true" { + r.SetFuncMap(funcMap) + r.Use(mygin.RecordPath) + r.Static("/static", "resource/static") + r.LoadHTMLGlob("resource/template/**/*.html") + } else { + tmpl := template.New("").Funcs(funcMap) + var err error + tmpl, err = tmpl.ParseFS(resource.TemplateFS, "template/**/*.html") + if err != nil { + panic(err) + } + tmpl = loadThirdPartyTemplates(tmpl) + r.SetHTMLTemplate(tmpl) + r.Use(mygin.RecordPath) + staticFs, err := fs.Sub(resource.StaticFS, "static") + if err != nil { + panic(err) + } + r.StaticFS("/static", http.FS(staticFs)) } - r.StaticFS("/static", http.FS(staticFs)) r.Static("/static-custom", "resource/static/custom") routers(r) page404 := func(c *gin.Context) { diff --git a/resource/static/darkmode.css b/resource/static/darkmode.css new file mode 100644 index 0000000000..7afaf2872a --- /dev/null +++ b/resource/static/darkmode.css @@ -0,0 +1,148 @@ +.ui.container { + width: 95vw !important; + max-width: 1680px !important; +} + +html[nz-theme='dark'] { + body { + background-color: #121212 !important; + color: #fff !important; + } + + .ui.menu { + background-color: #282828 !important; + } + + .ui.menu * { + color: #fff !important; + } + + .accordion { + background-color: #282828 !important; + } + + .accordion .title { + color: #fff !important; + } + + .ui.card { + background-color: #3f3f3f !important; + border: none !important; + box-shadow: none !important; + } + + .header { + color: #fff !important; + } + + .description { + color: #fff !important; + } + + .icon { + color: #fff !important; + } + + .ui.popup { + background-color: #575757 !important; + color: #fff !important; + } + + .ui.table { + background-color: #282828 !important; + color: #fff !important; + } + + .ui thead th { + background-color: #3f3f3f !important; + color: #fff !important; + } + + .ui.buttons .button { + background-color: #3f3f3f !important; + color: #fff !important; + } + + .ui.modal { + background-color: #282828 !important; + } + + .ui.modal * { + color: #fff !important; + } + + textarea, + input, + select, + .dropdown { + background-color: #3f3f3f !important; + color: #fff !important; + } + + .ui.message { + background-color: unset !important; + } + + .ui.dropdown .menu { + background-color: #575757 !important; + color: #fff !important; + } + + .ui.modal>.header { + background-color: #3f3f3f !important; + } + + .ui.modal>.content { + background-color: #282828 !important; + } + + .ui.modal>.actions { + background-color: #3f3f3f !important; + } + + #alert { + background-color: #3f3f3f !important; + color: #fff !important; + } + + .ui.form .field>label { + color: unset !important; + } + + .ui.segment { + background-color: #3f3f3f !important; + } + + .ui.segment textarea, + input, + select, + .dropdown { + background-color: #575757 !important; + color: #fff !important; + } + + form label { + color: #fff !important; + } + + .ui.inverted.segment { + background-color: #121212 !important; + } + + .ui.inverted.segment * { + color: #8b8b8b !important; + } + + .menu .dropdown { + background-color: #282828 !important; + color: #fff !important; + } + + .ui.menu .ui.dropdown .menu>.item { + color: #fff !important; + } + + .login .ui.message{ + color: #8b8b8b !important; + } +} \ No newline at end of file diff --git a/resource/static/theme-default/css/main.css b/resource/static/theme-default/css/main.css index e464120935..a4e83f1cee 100644 --- a/resource/static/theme-default/css/main.css +++ b/resource/static/theme-default/css/main.css @@ -1,46 +1,54 @@ /* 屏幕适配 */ @media only screen and (min-width:1200px) { .ui.container { - width:95% !important; + width: 95% !important; font-size: 90% !important; max-width: 1300px !important; } } + @media only screen and (max-width:767px) { - .ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui) { - margin-top:0.4em !important; + + .ui.card>.content>.header:not(.ui), + .ui.cards>.card>.content>.header:not(.ui) { + margin-top: 0.4em !important; } - .ui.menu .item>img:not(.ui){ + + .ui.menu .item>img:not(.ui) { width: 2.2rem; } - .ui.menu .item:before{ - width:0.5px; + + .ui.menu .item:before { + width: 0.5px; } - .ui.menu .item{ + + .ui.menu .item { padding: 0.9rem 0.55rem; } - .ui.large.menu{ + + .ui.large.menu { font-size: 1rem; } } i.icon { - color:#000; - width:1.2em !important; + color: #000; + width: 1.2em !important; } + i.fi { - width:0.9em; - margin:0px 6px 0px 2px; + width: 0.9em; + margin: 0px 6px 0px 2px; } body { - content:" " !important; - background:fixed !important; - z-index:-1 !important; - top:0 !important; - right:0 !important; - bottom:0 !important; - left:0 !important; + content: " " !important; + background: fixed !important; + z-index: -1 !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; } td { @@ -65,79 +73,80 @@ td { padding-top: unset; } -.login.nb-container > .grid { +.login.nb-container>.grid { width: 100%; margin: 0 auto; } -.login.nb-container > .grid .column { +.login.nb-container>.grid .column { max-width: 450px; } -.ui.menu .item-right:before{ - width:0px; +.ui.menu .item-right:before { + width: 0px; } .status.cards .flag { margin-right: 0 !important; } -.status.cards .header > .info.icon { +.status.cards .header>.info.icon { float: right; margin-right: 0; } .ui.grid { - margin-bottom:-0.5em + margin-bottom: -0.5em } -.ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui){ +.ui.card>.content>.header:not(.ui), +.ui.cards>.card>.content>.header:not(.ui) { line-height: 1em; } .status.cards .wide.column { padding-top: 0 !important; padding-bottom: 0 !important; - height:2.3rem !important; + height: 2.3rem !important; } .status.cards .wide.column:nth-child(1) { - margin-top:1.2rem !important; + margin-top: 1.2rem !important; } .status.cards .wide.column:nth-child(2) { - margin-top:1.2rem !important; + margin-top: 1.2rem !important; } .status.cards .three.wide.column { text-align: center; - width: 22%!important; + width: 22% !important; } -.status.cards .thirteen.wide.column{ - width: 78%!important; - padding-left:0; +.status.cards .thirteen.wide.column { + width: 78% !important; + padding-left: 0; } .status.cards .description { - padding-bottom:0 !important; + padding-bottom: 0 !important; } .status.cards .flag { - margin-right:0.5rem !important; + margin-right: 0.5rem !important; } -.status.cards .header > .info.icon { +.status.cards .header>.info.icon { float: right; - margin-right:0 !important; + margin-right: 0 !important; } .ui.popup:before { display: none; } -.closePopup{ - color:rgb(10, 148, 242) !important; +.closePopup { + color: rgb(10, 148, 242) !important; position: absolute; top: 7px; right: 10px; @@ -150,26 +159,26 @@ td { } .ui.content { - margin:0 !important; - padding:1em !important; + margin: 0 !important; + padding: 1em !important; } .status.cards .ui.content.popup { - min-width:calc(100%)!important; - line-height:2rem !important; - border-radius:5px !important; - border:1px solid transparent !important; - font-family:Arial,Helvetica,sans-serif !important; + min-width: calc(100%) !important; + line-height: 2rem !important; + border-radius: 5px !important; + border: 1px solid transparent !important; + font-family: Arial, Helvetica, sans-serif !important; } .status.cards .outline.icon { - margin-right:1px !important; + margin-right: 1px !important; } .ui.progress .bar { - min-width:1.8em !important; - border-radius:5px !important; - line-height:1.65em !important; + min-width: 1.8em !important; + border-radius: 5px !important; + line-height: 1.65em !important; text-align: right; padding-right: 0.4em; color: rgba(255, 255, 255, 0.7); @@ -182,7 +191,7 @@ td { align-items: center; } -.service-status .delay-today > i { +.service-status .delay-today>i { display: inline-block; width: 1.2em; height: 1.2em; diff --git a/resource/template/common/footer.html b/resource/template/common/footer.html index 015e6ae8df..1fc1fda36f 100644 --- a/resource/template/common/footer.html +++ b/resource/template/common/footer.html @@ -14,8 +14,10 @@ + {{end}} \ No newline at end of file diff --git a/resource/template/common/header.html b/resource/template/common/header.html index d8b382f9fb..e723e96682 100644 --- a/resource/template/common/header.html +++ b/resource/template/common/header.html @@ -11,7 +11,8 @@ - + + {{end}} \ No newline at end of file diff --git a/resource/template/component/api.html b/resource/template/component/api.html index 02b6c6c601..6d613e03c3 100644 --- a/resource/template/component/api.html +++ b/resource/template/component/api.html @@ -10,7 +10,7 @@ -
+
{{tr "Cancel"}}
diff --git a/resource/template/component/cron.html b/resource/template/component/cron.html index 1ac346348d..ecaf653bad 100644 --- a/resource/template/component/cron.html +++ b/resource/template/component/cron.html @@ -60,7 +60,7 @@

-
+
{{tr "Cancel"}}
diff --git a/resource/template/component/server.html b/resource/template/component/server.html index 6635f500d4..24bb58ff3d 100644 --- a/resource/template/component/server.html +++ b/resource/template/component/server.html @@ -71,7 +71,7 @@
-
+
{{tr "Cancel"}}
diff --git a/resource/template/dashboard-default/api.html b/resource/template/dashboard-default/api.html index cf92564324..9a3fc3dc34 100644 --- a/resource/template/dashboard-default/api.html +++ b/resource/template/dashboard-default/api.html @@ -10,7 +10,7 @@
- +
diff --git a/resource/template/dashboard-default/cron.html b/resource/template/dashboard-default/cron.html index d136e7602e..df07da43de 100644 --- a/resource/template/dashboard-default/cron.html +++ b/resource/template/dashboard-default/cron.html @@ -10,7 +10,7 @@ -
{{tr "Token"}}
+
diff --git a/resource/template/dashboard-default/monitor.html b/resource/template/dashboard-default/monitor.html index 241cbc619b..f61a12c396 100644 --- a/resource/template/dashboard-default/monitor.html +++ b/resource/template/dashboard-default/monitor.html @@ -9,7 +9,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/nat.html b/resource/template/dashboard-default/nat.html index 3f159bf284..e2449fc5e9 100644 --- a/resource/template/dashboard-default/nat.html +++ b/resource/template/dashboard-default/nat.html @@ -10,7 +10,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/notification.html b/resource/template/dashboard-default/notification.html index 133aa8ec42..1d855e2fa5 100644 --- a/resource/template/dashboard-default/notification.html +++ b/resource/template/dashboard-default/notification.html @@ -10,7 +10,7 @@ -
ID
+
@@ -52,7 +52,7 @@ -
ID
+
diff --git a/resource/template/dashboard-default/server.html b/resource/template/dashboard-default/server.html index a219e13445..66655ca320 100644 --- a/resource/template/dashboard-default/server.html +++ b/resource/template/dashboard-default/server.html @@ -19,7 +19,7 @@ -
ID
+
diff --git a/resource/template/theme-default/footer.html b/resource/template/theme-default/footer.html index 8108af9bb1..57e2ff2fb2 100644 --- a/resource/template/theme-default/footer.html +++ b/resource/template/theme-default/footer.html @@ -10,10 +10,11 @@ {{ if not .Conf.DisableSwitchTemplateInFrontend }} {{ end }} diff --git a/resource/template/theme-default/network.html b/resource/template/theme-default/network.html index d7490b6d63..c57abc320f 100644 --- a/resource/template/theme-default/network.html +++ b/resource/template/theme-default/network.html @@ -18,7 +18,7 @@
-
+