diff --git a/static/css/tech.css b/static/css/tech.css
index 76262f5..d32c145 100644
--- a/static/css/tech.css
+++ b/static/css/tech.css
@@ -100,12 +100,11 @@
box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15);
}
-.theme-toggle{
- border-radius:999px;
- transition:box-shadow .2s,border-color .2s;
+.theme-switch-btn:hover{
+ color:var(--text-primary);
}
-.theme-toggle:hover{
- box-shadow:0 0 16px var(--nav-hover-glow);
+.theme-switch-btn.active{
+ box-shadow:0 0 12px var(--btn-glow);
}
.card{
@@ -120,13 +119,6 @@
.card::after{
animation:tech-shine 5s ease-in-out infinite;
}
-.card-corner{
- width:16px;height:16px;opacity:.55;
- transition:opacity .25s,box-shadow .25s;
-}
-.card:hover .card-corner{opacity:.9;box-shadow:0 0 8px var(--accent)}
-.card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
-.card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
.card h2{letter-spacing:.03em}
.card h2:before{
box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2);
diff --git a/static/js/theme.js b/static/js/theme.js
index 3113231..04b2ac3 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -1,16 +1,24 @@
(function () {
var KEY = 'qihuo-theme';
+ function updateButtons(theme) {
+ document.querySelectorAll('[data-theme-pick]').forEach(function (btn) {
+ var pick = btn.getAttribute('data-theme-pick');
+ var on = pick === theme;
+ btn.classList.toggle('active', on);
+ btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+ });
+ }
+
function apply(theme) {
+ if (theme !== 'light' && theme !== 'dark') {
+ theme = 'dark';
+ }
document.documentElement.setAttribute('data-theme', theme);
try {
localStorage.setItem(KEY, theme);
} catch (e) { /* ignore */ }
- var btn = document.getElementById('theme-toggle');
- if (btn) {
- btn.setAttribute('data-active', theme);
- btn.setAttribute('aria-label', theme === 'light' ? '切换到深色' : '切换到浅色');
- }
+ updateButtons(theme);
}
var saved = null;
@@ -26,11 +34,12 @@
}
document.addEventListener('DOMContentLoaded', function () {
- var btn = document.getElementById('theme-toggle');
- if (!btn) return;
- btn.addEventListener('click', function () {
- var cur = document.documentElement.getAttribute('data-theme') || 'dark';
- apply(cur === 'dark' ? 'light' : 'dark');
+ var cur = document.documentElement.getAttribute('data-theme') || 'dark';
+ updateButtons(cur);
+ document.querySelectorAll('[data-theme-pick]').forEach(function (btn) {
+ btn.addEventListener('click', function () {
+ apply(btn.getAttribute('data-theme-pick'));
+ });
});
});
})();
diff --git a/templates/base.html b/templates/base.html
index 9a0f1f2..9ea9173 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -128,19 +128,22 @@
.site-header{text-align:center;padding:1.5rem 1rem 1.25rem;border-bottom:1px solid var(--border-header);position:relative}
.site-title{font-size:1.75rem;font-weight:700;color:var(--text-title);margin-bottom:1.65rem;line-height:1.3}
.header-tools{position:absolute;top:1rem;left:1.5rem;display:flex;gap:.5rem;align-items:center}
- .theme-toggle{
- display:flex;align-items:center;gap:.35rem;
- padding:.4rem .75rem;border-radius:8px;
- border:1px solid var(--toggle-border);
- background:var(--toggle-bg);
- color:var(--text-primary);
- font-size:.78rem;cursor:pointer;
- transition:.2s;
+ .theme-switch{
+ display:inline-flex;align-items:center;
+ border-radius:999px;border:1px solid var(--toggle-border);
+ background:var(--toggle-bg);padding:3px;gap:2px;
+ }
+ .theme-switch-btn{
+ padding:.38rem .75rem;border:none;border-radius:999px;
+ background:transparent;color:var(--text-muted);
+ font-size:.75rem;cursor:pointer;transition:.2s;
+ white-space:nowrap;
+ }
+ .theme-switch-btn:hover{color:var(--text-primary)}
+ .theme-switch-btn.active{
+ background:linear-gradient(135deg,var(--accent),var(--accent-2));
+ color:#fff;box-shadow:0 0 12px var(--btn-glow);
}
- .theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
- .theme-toggle .icon-light,.theme-toggle .icon-dark{display:none}
- [data-theme="dark"] .theme-toggle .icon-light{display:inline}
- [data-theme="light"] .theme-toggle .icon-dark{display:inline}
.site-nav{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap}
.site-nav a{
padding:.55rem 1.15rem;border-radius:8px;
@@ -183,14 +186,6 @@
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
opacity:.55;pointer-events:none;
}
- .card-corner{
- position:absolute;width:18px;height:18px;pointer-events:none;z-index:0;
- border-color:var(--accent);opacity:.35;
- }
- .card-corner.tl{top:10px;left:10px;border-top:2px solid;border-left:2px solid}
- .card-corner.tr{top:10px;right:10px;border-top:2px solid;border-right:2px solid}
- .card-corner.bl{bottom:10px;left:10px;border-bottom:2px solid;border-left:2px solid}
- .card-corner.br{bottom:10px;right:10px;border-bottom:2px solid;border-right:2px solid}
.card > *{position:relative;z-index:1}
.card h2{
font-size:1.15rem;margin-bottom:1rem;color:var(--text-label);
@@ -432,10 +427,10 @@
-
{% block extra_js %}{% endblock %}