KJZH001/nezha-2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 默认主题 dark mode

Browse Source
This commit is contained in:
naiba 2024-08-13 23:50:55 +08:00
parent fda0dad5f1
commit da8fb57268
17 changed files with 248 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
cmd/dashboard/controller/controller.go
View File

@ -35,6 +35,12 @@ func ServeWeb(port uint) *http.Server {
pprof.Register(r)
}
r.Use(natGateway)
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")
@ -49,6 +55,7 @@ func ServeWeb(port uint) *http.Server {
panic(err)
}
r.StaticFS("/static", http.FS(staticFs))
}
r.Static("/static-custom", "resource/static/custom")
routers(r)
page404 := func(c *gin.Context) {

148
resource/static/darkmode.css Normal file
View File

@ -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;
}
}

13
resource/static/theme-default/css/main.css vendored
View File

@ -6,19 +6,26 @@
max-width: 1300px !important;
}
}
@media only screen and (max-width:767px) {
.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) {
margin-top: 0.4em !important;
}
.ui.menu .item>img:not(.ui) {
width: 2.2rem;
}
.ui.menu .item:before {
width: 0.5px;
}
.ui.menu .item {
padding: 0.9rem 0.55rem;
}
.ui.large.menu {
font-size: 1rem;
}
@ -28,6 +35,7 @@ i.icon {
color: #000;
width: 1.2em !important;
}
i.fi {
width: 0.9em;
margin: 0px 6px 0px 2px;
@ -91,7 +99,8 @@ td {
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;
}

2
resource/template/common/footer.html vendored
View File

@ -14,8 +14,10 @@
<script>
(function () {
updateLang({{.LANG }});
document.documentElement.setAttribute('nz-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
}) ();
</script>
</body>
</html>
{{end}}

3
resource/template/common/header.html vendored
View File

@ -11,7 +11,8 @@
<link rel="stylesheet" type="text/css" href="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" type="text/css" href="/static/main.css?v2022042314">
<link rel="stylesheet" type="text/css" href="/static/main.css?v20240813">
<link rel="stylesheet" type="text/css" href="/static/darkmode.css?v20240813">
</head>
<body>
{{end}}

2
resource/template/dashboard-default/api.html vendored
View File

@ -10,7 +10,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>{{tr "Token"}}</th>

2
resource/template/dashboard-default/cron.html vendored
View File

@ -10,7 +10,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>ID</th>

2
resource/template/dashboard-default/monitor.html vendored
View File

@ -9,7 +9,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>ID</th>

2
resource/template/dashboard-default/nat.html vendored
View File

@ -10,7 +10,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>ID</th>

4
resource/template/dashboard-default/notification.html vendored
View File

@ -10,7 +10,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>ID</th>
@ -52,7 +52,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th>ID</th>

2
resource/template/dashboard-default/server.html vendored
View File

@ -19,7 +19,7 @@
</button>
</div>
</div>
<table class="ui very basic table">
<table class="ui basic table">
<thead>
<tr>
<th><button onclick="checkAllServer()" class="ui mini nezha-primary-btn button">{{tr "SelectAll"}}</button></th>

5
resource/template/theme-default/footer.html vendored
View File

@ -10,10 +10,11 @@
{{ if not .Conf.DisableSwitchTemplateInFrontend }}
<script>
function showSwitchTemplate(list, currentBackendTheme) {
console.log(list, currentBackendTheme);
console.log("currentBackendTheme:",currentBackendTheme);
// console.log(list, currentBackendTheme);
// console.log("currentBackendTheme:",currentBackendTheme);
}
showSwitchTemplate({{ .Themes }}, {{ .Conf.Site.Theme }})
document.documentElement.setAttribute('nz-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
</script>
{{ end }}
<script>

1
resource/template/theme-default/header.html vendored
View File

@ -14,6 +14,7 @@
<link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" type="text/css" href="/static/theme-default/css/main.css?v20240616">
<link rel="stylesheet" type="text/css" href="/static/darkmode.css?v20240813">
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/semantic-ui@2.4.0/dist/semantic.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

2
resource/template/theme-default/network.html vendored
View File

@ -18,7 +18,7 @@
</div>
</div>
<div class="ui container">
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
<div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;overflow: hidden"></div>
</div>
</div>