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

Теперь, когда вы можете создавать «острова» 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