Тёмная тема и подвал

Страница готова в светлых цветах. Теперь её тёмная версия и, наконец, подвал.

Напомним, как работает тёмная тема на этой странице: в style.css есть строка @custom-variant dark (&:where(.dark, .dark *));, поэтому классы с dark: действуют, когда у элемента html есть класс dark. Кнопка 🌙 в шапке добавляет и убирает его маленьким скриптом в конце страницы. Нажимайте её в предпросмотре и по ходу работы проверяйте тёмную версию.

• Пары цветов. Каждому светлому фону — тёмный, а каждому тёмному тексту — светлый: например, bg-white dark:bg-stone-800 для блоков на странице с dark:bg-stone-900 и text-stone-600 dark:text-stone-300 для приглушённых текстов.
• Тени на тёмном фоне почти не видны. Вместо них блоки выделяются более светлым фоном.
• Более светлые оттенки основного цвета лучше читаются на тёмном фоне, например dark:text-brand-400 для логотипа. Оранжевые кнопки с белым текстом можно оставить как есть.
• Полупрозрачные фоны остаются полупрозрачными: dark:bg-stone-900/90.

Проверки включают тёмную тему сами: на мгновение они добавляют класс dark элементу html, сравнивают цвета, а затем снова убирают его.