vol_west/saiti-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлено переключение темы и улучшены стили кнопок в хедере

Browse Source
This commit is contained in:
tolst
2026-04-19 10:42:45 +03:00
parent 195add8230
commit 201ae9300a
2 changed files with 173 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/WikiHeader.astro
View File

@@ -33,8 +33,30 @@ const topLinks = [
</nav>
</div>
<div class="sl-flex print:hidden">
<div class="sl-flex print:hidden header-tools">
{shouldRenderSearch && <Search />}
<button
class="theme-toggle-btn mobile-theme-toggle md:sl-hidden"
type="button"
aria-label="Переключить тему"
data-theme-toggle
>
<svg class="icon-sun" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="4" />
<line x1="12" y1="2.5" x2="12" y2="5.5" />
<line x1="12" y1="18.5" x2="12" y2="21.5" />
<line x1="2.5" y1="12" x2="5.5" y2="12" />
<line x1="18.5" y1="12" x2="21.5" y2="12" />
<line x1="5" y1="5" x2="7.3" y2="7.3" />
<line x1="16.7" y1="16.7" x2="19" y2="19" />
<line x1="5" y1="19" x2="7.3" y2="16.7" />
<line x1="16.7" y1="7.3" x2="19" y2="5" />
</svg>
<svg class="icon-moon" aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none">
<path d="M15.3 3.8A8.9 8.9 0 1 0 20.2 16a7.4 7.4 0 1 1-4.9-12.2Z" />
<path d="m19.9 4.4.7 1.6 1.6.7-1.6.7-.7 1.6-.7-1.6-1.6-.7 1.6-.7.7-1.6Z" />
</svg>
</button>
</div>
<div class="sl-hidden md:sl-flex print:hidden right-group">
@@ -90,7 +112,7 @@ const topLinks = [
const bindReadProgress = () => {
const backToTopBtn = document.querySelector('[data-back-to-top]');
const themeToggleBtn = document.querySelector('[data-theme-toggle]');
const themeToggleBtns = document.querySelectorAll('[data-theme-toggle]');
if (backToTopBtn instanceof HTMLElement) {
if (backToTopBtn.parentElement !== document.body) {
@@ -102,15 +124,16 @@ const topLinks = [
});
}
if (themeToggleBtn instanceof HTMLButtonElement) {
themeToggleBtn.addEventListener('click', () => {
themeToggleBtns.forEach((btn) => {
if (!(btn instanceof HTMLButtonElement)) return;
btn.addEventListener('click', () => {
const root = document.documentElement;
const current = root.dataset.theme === 'light' ? 'light' : 'dark';
const next = current === 'dark' ? 'light' : 'dark';
root.dataset.theme = next;
localStorage.setItem('starlight-theme', next);
});
}
});
setReadProgress();
window.addEventListener('scroll', setReadProgress, { passive: true });
@@ -183,6 +206,11 @@ const topLinks = [
align-items: center;
}
.header-tools {
align-items: center;
gap: 0.5rem;
}
.theme-toggle-btn {
display: inline-flex;
align-items: center;