tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-22 12:48:14 -05:00
Code Issues 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

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

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

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

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

4
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/component/api.html vendored
View File

@ -10,7 +10,7 @@
</div>
</form>
</div>
<div class=" actions">
<div class="actions">
<div class="ui negative button">{{tr "Cancel"}}</div>
<button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
</button>

2
resource/template/component/cron.html vendored
View File

@ -60,7 +60,7 @@
</p>
</div>
</div>
<div class=" actions">
<div class="actions">
<div class="ui negative button">{{tr "Cancel"}}</div>
<button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
</button>

2
resource/template/component/server.html vendored
View File

@ -71,7 +71,7 @@
</div>
</form>
</div>
<div class=" actions">
<div class="actions">
<div class="ui negative button">{{tr "Cancel"}}</div>
<button class="ui positive nezha-primary-btn right labeled icon button">{{tr "Confirm"}}<i class="checkmark icon"></i>
</button>

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>