Переключение светлых/темных тем

В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно использовать для установки светлых/темных стилей и добавления интерактивных функций с помощью JavaScript. Следуйте инструкциям, и вы готовы к работе!

Вот, что вы выучили, поехали ~

🔖 文章索引

1. <a href="#95a6">為您的網站建立新資料夾</a>
2. <a href="#65ef">建立一些檔案</a>
3. <a href="#57a3">VS Code 安裝延伸模組或套件</a>
4. <a href="#3d19">新增一些 HTML 程式碼</a>
5. <a href="#9d31">CSS 新增 淺/深 色佈景主題</a>
6. <a href="#2f1d">JavaScript 新增容錯</a>
7. <a href="#96e3">設定 Strict 模式</a>

Создайте новую папку для вашего сайта

Откройте VS Code и создайте папку с именем simple-website

Создайте несколько файлов

index.html
main.css
app.js

Расширения или комплекты для установки VS Code

Живой сервер

Добавление некоторого HTML-кода

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
<body class="dark-theme">
  
  <h1>Task List</h1>
  <p id="msg">Current tasks:</p>
  <ul>
    <li class="list">Add visual styles</li>
    <li class="list">Add light and dark themes</li>
    <li>Enable switching the theme</li>
  </ul>
  <div>
    <button class="btn">Light</button>
  </div>
  
  <script src="app.js"></script>
  <noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>

Существует множество различных версий HTML. doctype<!DOCTYPE html> указывает, что этот HTML-файл содержит код HTML5.

Мета-тег представляет собой "отредактированные данные", которые обычно не видны зрителю, если он не просматривает оригинальный код в своем браузере. Мета-элементы или теги предоставляют описательную информацию о веб-странице. Например, он может помочь поисковым системам обработать информацию на вашей веб-странице, которая будет возвращена в результатах поиска.

Набор символов UTF-8 может показаться неважным, но он очень важен для разработки способа интерпретации символов вашим компьютером. Отсутствие данных о реле charset может привести к нарушению безопасности.

CSS добавляет светлые/темные темы

Если вам нужно переключить светлый/темный стиль, вы можете использовать параметры --bg, --fontColor, --btnBg, --btnFontColor, --btnBg, --btnFontColor и --btnFontColor, заданные в имени класса light-theme или dark-theme. btnFontColor, более подробную информацию см. в разделе body {}.

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

/* 淺色 樣式 */
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

/* 深色 樣式 */
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

ul {
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

JavaScript новый допуск к ошибкам

  <script src="app.js"></script>
  <noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>

Добавление элемента <noscript> является примером отказоустойчивости или умеренного снижения производительности. Используя элемент <noscript>, ваш код может обнаружить и спланировать неподдерживаемые или неиспользуемые функции.

Настройка строгого режима

JavaScript разработан таким образом, чтобы облегчить понимание и позволить разработчикам совершать определенные ошибки. Например, даже если вы используете неправильно написанную переменную, JavaScript не отправит сообщение об ошибке, а создаст новую полную доменную переменную. Когда вы только начинаете изучать JavaScript, вы можете ожидать, что не увидите слишком много ошибок, но это также может привести к тому, что код будет менее оптимизирован для браузеров и его будет сложнее обнаружить.

Переключитесь в строгий режим, чтобы получить более полезное сообщение об ошибке, если вы допустили ошибку.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function(e) {
  document.body.classList.toggle('light-theme');
  document.body.classList.toggle('dark-theme');

  const className = document.body.className;

  if (className === 'light-theme') {
    this.textContent = 'Dark';
  } else {
    this.textContent = 'Light';
  }

  console.info('body current class name: ', className);
});