Супер простой темный режим для веб-сайтов, это действительно супер просто!

внешний интерфейс
Супер простой темный режим для веб-сайтов, это действительно супер просто!

Оригинальный адрес:Implement Dark Mode On Your Website.

Оригинальный автор:Matthew Marquise

Переводчик и корректор: HelloGitHub — вяленая рыба и тушеное яйцо

Темный режим — популярная функция веб-сайтов, которую можно реализовать с помощью HTML, CSS и JS. Но почему вы не реализовали темную функцию на своем личном сайте? С помощью этих трех простых шагов вы можете использовать темный режим. Практика начинается! (Перевод: не все знают CSS, поэтому я перевожу эту статью, это очень просто!)

Содержание этой статьи

  • Темный режим Шаг 1
  • Темный режим, шаг 2
  • Темный режим, шаг 3
  • Отображение результатов

Темный режим Шаг 1:

Если у вас еще нет личного веб-сайта, просто сначала создайте файл HTML.

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    ...
  <body>
</html>

Теперь, когда у нас есть веб-сайт, давайте реализуем HTML и CSS.

Темный режим Шаг 2:

Чтобы начать добавлять то, что мы хотим, в HTML, давайте сначала добавим способ связать файлы JS и CSS, напримерADD CSS FILEа такжеADD JS FILEКак отмечено ниже:

<!-- index.html -->

<!DOCTYPE html>
  <head>
    <title>Dark Mode Feature</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ADD CSS FILE -->
    <link rel="stylesheet" href="main.css">

    <!-- ADD JS FILE -->
    <script src="main.js"></script>
  </head>

  <body>
    ...
  <body>
</html>

Теперь приступим к созданию файлов JS и CSS. Не стесняйтесь изменять свой файл CSS, здесь я добавил код:

/* main.css */
body {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

существуетbodyмы устанавливаем белый цвет фона веб-страницы по умолчанию, черный текст и вdark-modeмодуль, мы меняем цвет фона веб-страницы на черный, а текст на белый.

Хорошо, давайте создадимmain.jsфайл, который является ключом к реализации темной функции;

//main.js

function darkmode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

После успешного создания файлов CSS и JS вам осталось сделать только одну последнюю вещь.

Режим Diablo Шаг 3:

После вышеуказанных 2-х шагов вы можете подумать, что темный режим реализован, но это не так. Задайте себе вопрос: что делать, если мой сайт состоит из нескольких страниц? Как включить темный режим на каждой странице вместо белого фона по умолчанию? Ответ намного проще, чем вы думаете. в начале каждой страницыbody tagДобавить:

onload="onload()"

Это так просто, надеюсь, это будет полезно для вас, спасибо, что прочитали это ^^

Отображение результатов

Вы также можете испытать темный режим по этой ссылке:codespray.IO/Мэтт Маркиз…

Наконец, вы можете присоединиться к серии HelloGitHub «Перевод и танец» и дать волю своим талантам! Делитесь отличными статьями с большим количеством людей. Требовать:

  • Обычно просматривайте GitHub, открытый исходный код, программирование, программисты и другие новости и статьи на английском языке.
  • Я хочу поделиться отличными английскими статьями, которые я прочитал, с большим количеством людей
  • Перевод точный, но не прямой или машинный перевод
  • Гарантированно перевести или исправить не менее 1 качественной статьи в месяц
  • Понимание уценки и типографики
  • Свяжитесь со мной: xueweihan (Примечание: перевод)
Категории