^

1. В CSS создайте два класса: body.dark для тёмной темы и body.light для светлой. Настройте цвета фона и текста, чтобы они отличались для этих классов.
2. В HTML добавьте кнопку или элемент с уникальным ID, например themeToggle, который будет служить переключателем темы.
3. Убедитесь, что на странице <body> есть один из классов dark или light, чтобы задать начальную тему.
4. Подключите скрипт, который при клике на элемент с ID themeToggle меняет класс body с dark на light и обратно.
5. Сохраняйте выбор пользователя в localStorage, чтобы при перезагрузке страницы применялась последняя выбранная тема.
6. Для элементов, которые должны менять цвета вместе с body, используем CSS-переменные. В классе body.dark или body.light задаём переменные, а элементы берут их через var().
--text-color и --bg-color — это переменные, которые задаются в body.
var(--text-color) и var(--bg-color) — это способ взять значение переменной и использовать его в любом элементе.
Так элементы автоматически меняют цвета при смене темы.

Пример:

body.light {
    background: #ffffff;
    color: #000000;
    --text-color: #000000;  /* цвет текста для элементов */
    --bg-color: #ffffff;    /* фон для элементов */
}

body.dark {
    background: #121212;
    color: #ffffff;
    --text-color: #ffffff;
    --bg-color: #121212;
}

.card {
    background: var(--bg-color);  /* подставляет фон из body */
    color: var(--text-color);     /* подставляет цвет текста из body */
    padding: 20px;
    border-radius: 10px;
}

<!-- Скрытый блок с цитатами -->
<div id="quotesSource" style="display:none;">
  <div>Жизнь — это то, что с тобой происходит, пока ты строишь планы. — Джон Леннон</div>
  <div>Не ждите. Время никогда не будет «подходящим». — Наполеон Хилл</div>
  <div>Секрет успеха — начать. — Марк Твен</div>
  <div>Счастье — это путь, а не пункт назначения. — Будда</div>
  <div>Делай то, что можешь, с тем, что имеешь, там, где ты есть. — Теодор Рузвельт</div>
</div>

<!-- Скрытый блок для управления интервалом смены в секундах -->
<!-- Если удалить этот блок, автосмена не будет работать -->
<div id="quoteInterval" style="display:none;">5</div>

<!-- Блок для вывода цитаты -->
<div id="quoteDisplay" style="font-style:italic; margin:10px 0;"></div>

<!-- Кнопка для новой цитаты -->
<button id="newQuoteBtn">Новая цитата</button>

🔹 Как это работает
1. Все цитаты берутся из блока #quotesSource.
2. Интервал смены читается из #quoteInterval (секунды).
3. Если блока #quoteInterval нет — автосмена не работает, цитата меняется только по клику.
4. При клике на кнопку автосмена останавливается, пока снова не будет кликнуто.
5. Очень гибко: можно менять количество секунд прямо в HTML без редактирования JS.

Норман это что-то новое!

Привет! Это текст с мигающим курсором.

Случайное появление букв

Цветной текст

0

ghj

2025-12-31 23:59:59

Heading

L

<!-- Укажи дату в формате YYYY-MM-DD HH:MM:SS и язык через data-lang -->
<div id="targetDate" data-lang="de">2025-12-31 23:59:59</div>

<!-- Сюда выводится обратный отсчёт -->
<div id="countdown"></div>

	1.	data-lang="ru|de|en" — язык счётчика.
	2.	data-label-size="X" — процент высоты блока для текста (например, 60 = 60% от высоты блока).
	3.	Цифры остаются фиксированного размера, подписи масштабируются под блок.
	4.	Мультиязычность для ошибок и конца события.
	5.	Всё автономно — можно ставить на любую страницу.

Подробнее

Здесь можно показать более подробную информацию или подсказку для пользователя.

Загружается погода...

Chisinau

Exemple pdf