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

src/components/WikiHeader.astro

@@ -5,7 +5,6 @@ import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
 import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
-import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
 
 const shouldRenderSearch =
   config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
@@ -38,14 +37,30 @@ const topLinks = [
       {shouldRenderSearch && <Search />}
     </div>
 
-    <div class="sl-hidden md:sl-flex print:hidden right-group">
-      <div class="sl-flex social-icons">
-        <SocialIcons />
-      </div>
-      <ThemeSelect />
-      <LanguageSelect />
+  <div class="sl-hidden md:sl-flex print:hidden right-group">
+    <div class="sl-flex social-icons">
+      <SocialIcons />
     </div>
+    <button class="theme-toggle-btn" 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>
+    <LanguageSelect />
   </div>
+</div>
   <div class="wiki-read-progress" aria-hidden="true">
     <div class="wiki-read-progress__fill" data-read-progress></div>
   </div>
@@ -75,6 +90,7 @@ const topLinks = [
 
   const bindReadProgress = () => {
     const backToTopBtn = document.querySelector('[data-back-to-top]');
+    const themeToggleBtn = document.querySelector('[data-theme-toggle]');
 
     if (backToTopBtn instanceof HTMLElement) {
       if (backToTopBtn.parentElement !== document.body) {
@@ -86,6 +102,16 @@ const topLinks = [
       });
     }
 
+    if (themeToggleBtn instanceof HTMLButtonElement) {
+      themeToggleBtn.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 });
     window.addEventListener('resize', setReadProgress);
@@ -114,7 +140,7 @@ const topLinks = [
       justify-content: space-between;
       align-items: center;
       height: 100%;
-      padding-bottom: 0.28rem;
+      padding-block: 0.34rem;
     }
 
     .title-wrapper {
@@ -157,11 +183,70 @@ const topLinks = [
       align-items: center;
     }
 
+    .theme-toggle-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.25rem;
+      height: 2.25rem;
+      border: 1px solid color-mix(in srgb, var(--sl-color-hairline) 78%, transparent);
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent);
+      color: #2a5f4d;
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--sl-color-hairline) 28%, transparent);
+      transition: color 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease,
+        box-shadow 160ms ease;
+    }
+
+    .theme-toggle-btn:hover {
+      transform: translateY(-1px) scale(1.02);
+      border-color: color-mix(in srgb, var(--sl-color-accent) 46%, transparent);
+      box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--sl-color-accent) 24%, transparent),
+        0 6px 14px color-mix(in srgb, var(--sl-color-accent) 22%, transparent);
+    }
+
+    .theme-toggle-btn svg {
+      width: 1.15rem;
+      height: 1.15rem;
+      stroke: currentColor;
+      stroke-width: 1.9;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .theme-toggle-btn .icon-sun,
+    .theme-toggle-btn .icon-moon {
+      display: none;
+    }
+
+    :global(:root[data-theme='dark']) .theme-toggle-btn .icon-moon {
+      display: block;
+    }
+
+    :global(:root[data-theme='light']) .theme-toggle-btn .icon-sun {
+      display: block;
+    }
+
+    :global(:root[data-theme='dark']) .theme-toggle-btn {
+      color: #66f5df;
+      background: color-mix(in srgb, #0f1b2a 86%, transparent);
+      border-color: color-mix(in srgb, #2b4c5a 65%, transparent);
+    }
+
+    :global(:root[data-theme='light']) .theme-toggle-btn {
+      color: #2e6b57;
+      background: color-mix(in srgb, #f2f7ff 92%, transparent);
+      border-color: color-mix(in srgb, #b4c5db 72%, transparent);
+    }
+
     .wiki-read-progress {
-      position: absolute;
+      position: fixed;
       inset-inline: 0;
-      inset-block-end: 0;
+      top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
       height: 2px;
+      z-index: calc(var(--sl-z-index-navbar) - 1);
+      pointer-events: none;
       background: color-mix(in srgb, var(--sl-color-hairline) 65%, transparent);
       overflow: hidden;
     }
@@ -270,10 +355,6 @@ const topLinks = [
     }
 
     @media (max-width: 50rem) {
-      .wiki-header {
-        padding-bottom: 0.34rem;
-      }
-
       .wiki-back-to-top {
         top: auto;
         right: max(0.62rem, env(safe-area-inset-right));