Skip to content

Commit 2819766

Browse files
angelyongangelyong
committed
Dark Mode Created
1 parent 6ba3a26 commit 2819766

1 file changed

Lines changed: 148 additions & 0 deletions

File tree

‎src/main/resources/templates/newui2.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,137 @@
5151
.last-card {
5252
margin-bottom: 70px; /* 增加输出代码区域与底部的距离 */
5353
}
54+
55+
/* ===== DARK THEME TOGGLE BUTTON ===== */
56+
#darkModeBtn {
57+
position: fixed;
58+
top: 14px;
59+
right: 18px;
60+
z-index: 9999;
61+
width: 40px;
62+
height: 40px;
63+
border-radius: 50%;
64+
border: 2px solid #aaa;
65+
background-color: #fff;
66+
cursor: pointer;
67+
font-size: 18px;
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
72+
transition: background-color 0.3s, border-color 0.3s;
73+
}
74+
#darkModeBtn:hover {
75+
border-color: #555;
76+
}
77+
78+
/* ===== DARK THEME STYLES ===== */
79+
body.dark-mode {
80+
background-color: #1a1a2e;
81+
color: #e0e0e0;
82+
}
83+
body.dark-mode .header-bar {
84+
background-color: #16213e;
85+
border-bottom-color: #0f3460;
86+
}
87+
body.dark-mode .header-bar .logo {
88+
color: #e0e0e0;
89+
}
90+
body.dark-mode .header-bar small {
91+
color: #b0b8c8;
92+
}
93+
body.dark-mode .header-bar .links a {
94+
color: #58a6ff;
95+
}
96+
body.dark-mode .footer-bar {
97+
background-color: #16213e;
98+
border-top-color: #0f3460;
99+
color: #b0b8c8;
100+
}
101+
body.dark-mode .card {
102+
background-color: #1e2a3a;
103+
border-color: #2d4a6a;
104+
color: #e0e0e0;
105+
}
106+
body.dark-mode .card-header {
107+
background-color: #162032;
108+
border-bottom-color: #2d4a6a;
109+
color: #e0e0e0;
110+
}
111+
body.dark-mode .card-title {
112+
color: #e0e0e0;
113+
}
114+
body.dark-mode .card-body {
115+
background-color: #1e2a3a;
116+
color: #e0e0e0;
117+
}
118+
body.dark-mode textarea {
119+
background-color: #111827;
120+
color: #e0e0e0;
121+
border-color: #2d4a6a;
122+
}
123+
body.dark-mode textarea::placeholder {
124+
color: #6b7b8f;
125+
}
126+
body.dark-mode blockquote.quote-secondary {
127+
background-color: #162032;
128+
border-left-color: #58a6ff;
129+
color: #b0b8c8;
130+
}
131+
body.dark-mode .el-form-item__label {
132+
color: #c0cad8 !important;
133+
}
134+
body.dark-mode .el-input__inner {
135+
background-color: #111827 !important;
136+
border-color: #2d4a6a !important;
137+
color: #e0e0e0 !important;
138+
}
139+
body.dark-mode .el-select .el-input__inner {
140+
background-color: #111827 !important;
141+
border-color: #2d4a6a !important;
142+
color: #e0e0e0 !important;
143+
}
144+
body.dark-mode .el-button {
145+
background-color: #1e2a3a !important;
146+
border-color: #2d4a6a !important;
147+
color: #e0e0e0 !important;
148+
}
149+
body.dark-mode .el-button--primary {
150+
background-color: #1a4a7a !important;
151+
border-color: #2d6ab0 !important;
152+
color: #e0e0e0 !important;
153+
}
154+
body.dark-mode .el-button--primary.is-plain {
155+
background-color: #162032 !important;
156+
border-color: #2d4a6a !important;
157+
color: #58a6ff !important;
158+
}
159+
body.dark-mode .el-button--primary.is-plain.is-disabled,
160+
body.dark-mode .el-button--primary.is-plain.is-disabled:active,
161+
body.dark-mode .el-button--primary.is-plain.is-disabled:focus,
162+
body.dark-mode .el-button--primary.is-plain.is-disabled:hover {
163+
background-color: #2a3a4a !important;
164+
border-color: #3a5a7a !important;
165+
color: #8aaabb !important;
166+
}
167+
body.dark-mode hr {
168+
border-color: #2d4a6a;
169+
}
170+
body.dark-mode .btn-tool {
171+
color: #b0b8c8 !important;
172+
}
173+
body.dark-mode #darkModeBtn {
174+
background-color: #1e2a3a;
175+
border-color: #58a6ff;
176+
color: #e0e0e0;
177+
}
54178
</style>
55179
</head>
56180
<body>
181+
182+
<!-- ===== DARK MODE TOGGLE BUTTON ===== -->
183+
<button id="darkModeBtn" title="切换深色/浅色模式" onclick="toggleDarkMode()">🌙</button>
184+
57185
<div id="app">
58186
<div class="header-bar">
59187
<div class="logo">
@@ -256,5 +384,25 @@ <h5 class="card-title m-0">输出代码</h5>
256384
vm.outputStr="${(value.outputStr)!!}";
257385
loadAllCookie()
258386
</script>
387+
388+
<!-- ===== DARK MODE SCRIPT ===== -->
389+
<script>
390+
function toggleDarkMode() {
391+
var body = document.body;
392+
var btn = document.getElementById('darkModeBtn');
393+
var isDark = body.classList.toggle('dark-mode');
394+
btn.textContent = isDark ? '☀️' : '🌙';
395+
localStorage.setItem('darkMode', isDark ? '1' : '0');
396+
}
397+
398+
// Restore preference on page load
399+
(function() {
400+
if (localStorage.getItem('darkMode') === '1') {
401+
document.body.classList.add('dark-mode');
402+
var btn = document.getElementById('darkModeBtn');
403+
if (btn) btn.textContent = '☀️';
404+
}
405+
})();
406+
</script>
259407
</body>
260408
</html>

0 commit comments

Comments
 (0)