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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user