Возвращаемся на сушу. Превратите свой блог из дневного в ночной, и для этого не нужен остров!

Теперь, когда вы можете создавать «острова» Astro для интерактивных элементов, не забудьте, что вы можете добиться многого, используя только обычный JavaScript и CSS!

Давайте создадим кликабельный иконку, которая позволит вашим пользователям переключаться между светлым и тёмным режимами, используя ещё один тег <script> для интерактивности… и не отправляя браузеру никакого JavaScript от фреймворка.

Приготовьтесь…

Создать интерактивный переключатель темы, используя только JavaScript и CSS
Отправить браузеру как можно меньше JavaScript!

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

Создайте новый файл по адресу src/components/ThemeIcon.astro и вставьте в него следующий код:

---
---
<button id="themeToggle">
  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
    <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
  </svg>
</button>

<style>
  #themeToggle {
    border: 0;
    background: none;
  }
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

Добавьте иконку в Header.astro, чтобы она отображалась на всех страницах. Не забудьте импортировать компонент.

---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
import ThemeIcon from './ThemeIcon.astro';
---
<header>
  <nav>
    <Hamburger />
    <ThemeIcon />
    <Navigation />
  </nav>
</header>

Посетите предварительный просмотр в браузере по адресу http://localhost:4321, чтобы увидеть иконку теперь на всех ваших страницах. Вы можете попробовать нажать на нее, но вы ещё не написали скрипт, чтобы сделать ее интерактивной.

Добавьте стили CSS для тёмной темы

Выберите некоторые альтернативные цвета для использования в тёмном режиме.

В global.css определите некоторые тёмные стили. Вы можете выбрать свои собственные или скопировать и вставить:
src/styles/global.css
```
html.dark {
  background-color: #0d0950;
  color: #fff;
}

.dark .nav-links a {
  color: #fff;
}
```

Добавьте интерактивность на стороне клиента

Чтобы добавить интерактивность в компонент Astro, вы можете использовать тег <script>. Этот скрипт может проверять и устанавливать текущую тему из localStorage и переключать тему при клике по иконке.

Добавьте следующий тег <script> в src/components/ThemeIcon.astro после вашего тега <style>:

<style>
  .sun { fill: black; }
  .moon { fill: transparent; }

  :global(.dark) .sun { fill: transparent; }
  :global(.dark) .moon { fill: white; }
</style>

<script>
  const theme = (() => {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
      return localStorage.getItem('theme');
    }
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
      return 'light';
  })();

  if (theme === 'light') {
    document.documentElement.classList.remove('dark');
  } else {
    document.documentElement.classList.add('dark');
  }

  window.localStorage.setItem('theme', theme);

  const handleToggleClick = () => {
    const element = document.documentElement;
    element.classList.toggle("dark");

    const isDark = element.classList.contains("dark");
    localStorage.setItem("theme", isDark ? "dark" : "light");
  }

  document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script>

Проверьте предварительный просмотр в браузере по адресу http://localhost:4321 и нажмите на иконку темы. Убедитесь, что вы можете переключаться между светлым и тёмным режимами.

Чек-лист

Я могу использовать JavaScript для интерактивности, когда не хочу добавлять фреймворк.

Ресурсы

Клиентский <script> в Astro