WebUI: MD3 2026 redesign + light/dark theme toggle

- Rewrite CSS with full MD3 color tokens + elevation + shape system
- Add light theme with data-theme="light"
- Theme toggle button in top bar (persists to localStorage)
- 268 lines CSS, covers login/shell/dashboard/plugins/projects/proxy
This commit is contained in:
2026-06-11 11:53:32 +08:00
parent 7436f699fb
commit b37cbf076c
2 changed files with 335 additions and 145 deletions
+16
View File
@@ -12,6 +12,7 @@
<div class="title">🐱 SenSu Alpha <span id="ver-badge" style="font-size:0.7em; opacity:0.5; margin-left:4px;"></span></div>
<div class="user-info">
<span id="uname">Loading...</span>
<button class="theme-toggle" onclick="toggleTheme()" title="切换日夜间模式">🌓</button>
<button class="logout-btn" onclick="doLogout()">退出</button>
</div>
</header>
@@ -49,3 +50,18 @@
<script src="./static/js/app.js"></script>
</body>
</html>
<script>
function toggleTheme(){
var t=document.documentElement.getAttribute("data-theme")==="light"?"dark":"light";
document.documentElement.setAttribute("data-theme",t);
localStorage.setItem("sensu-theme",t);
document.querySelector(".theme-toggle").textContent=t==="light"?"☀️":"🌙";
}
(function(){
var s=localStorage.getItem("sensu-theme")||"dark";
document.documentElement.setAttribute("data-theme",s);
var btn=document.querySelector(".theme-toggle");
if(btn) btn.textContent=s==="light"?"☀️":"🌙";
})();
</script>