在明暗主題之間切換從未如此簡單

在明暗主題之間切換

我們已經(jīng)完成了黑暗模式。從暗模式到亮模式再到暗模式。在個人計算的曙光中，黑暗模式是唯一的選擇。單色CRT計算機監(jiān)視器通過將電子束發(fā)射到磷光屏幕上來工作。早期CRT中使用的熒光粉是綠色的，導致文本顯示為綠色，而屏幕的其余部分為黑色。這些模型通常被稱為綠屏。

隨后引入彩色CRT，通過使用紅色，綠色和藍色熒光粉可以顯示多種顏色。通過同時激活所有三種磷光體來產(chǎn)生白色?，F(xiàn)在我們已經(jīng)回歸到黑暗的主題，因為它更容易在眼睛上，并且在主觀上，更美觀。

我是Web組件的忠實粉絲，并喜歡他們?nèi)绾问筗eb開發(fā)面向組件。讓我們僅使用Web組件構(gòu)建一個黑暗和明亮的主題切換。

“面向組件的編程將成為未來?！?- Indrek Lasn

Web組件是一套不同的技術(shù)，允許您創(chuàng)建可重用的自定義元素 - 將其功能與其他代碼封裝在一起 - 并在Web應用程序中使用它們。如果你不確定Web組件，檢查出“ w ^ 一言以蔽之EB組件 ”。

入門

我們所需要的只是一個Web瀏覽器和一個文本編輯器。繼續(xù)創(chuàng)建index.html文件。如果您正在使用emmet，則只需鍵入!并按Tab鍵即可。這將為您提供index.html樣板代碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Toggle</title>
</head>
<body>
  
</body>
</html>

每個Web應用程序構(gòu)建塊， **index.html**

`<dark-mode-toggle>` 元件

感謝開源代碼，我們已經(jīng)為我們的需求提供了一個便利的組件。它被稱為[dark-mode-toggle](https://github.com/GoogleChromeLabs/dark-mode-toggle)- 我們可以通過CDN包含組件或?qū)⑵浒惭b為NPM包。

暗模式切換 - https://github.com/GoogleChromeLabs/dark-mode-toggle

以下組件是一個自定義元素，允許您輕松地在您的網(wǎng)站上放置暗模式??切換，因此您最初可以根據(jù)用戶的喜好[prefers-color-scheme](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)，但也允許他們（可選地永久地）覆蓋他們的系統(tǒng)設置你的網(wǎng)站。

該[prefers-color-scheme](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme)媒體功能用于檢測用戶是否已經(jīng)請求的頁面使用淺色或深色的主題。它具有以下三個值。

no-preference：表示用戶未使瀏覽器知道任何首選項。此關(guān)鍵字值的計算方式false與布爾上下文相同。
light：表示用戶已通知瀏覽器他們更喜歡具有淺色主題的頁面（淺色背景上的深色文本）。
dark：表示用戶已通知瀏覽器他們更喜歡具有深色主題的頁面（深色背景上的淺色文本）。

將以下代碼放在以下<head>部分index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
      <link rel="stylesheet" href="common.css" />
      <link
        rel="stylesheet"
        href="light.css"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <link
        rel="stylesheet"
        href="dark.css"
        media="(prefers-color-scheme: dark)"
      />
      <script
        type="module"
        src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"
      ></script>

      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Toggle</title>
    </head>
  <body>
  </body>
</html>

自定義元素假定您已將CSS組織在不同的文件中，這些文件是根據(jù)media樣式表的相應link元素中的屬性有條件加載的。以下樣式表被命名common.css，light.css并且dark.css- 注意每個主題如何具有自己的封裝樣式。繼續(xù)創(chuàng)建三個樣式表。

touch common.css light.css dark.css

這是一個很棒的性能模式，因為你不強迫人們根據(jù)他們當前的主題偏好下載他們不需要的CSS，但是不匹配的樣式表仍然會被加載但是不會在關(guān)鍵渲染路徑中爭奪帶寬。

接下來，將<dark-mode-toggle>元素添加到我們的index.html

<aside>
  <dark-mode-toggle
    id="dark-mode-toggle"
    legend="Theme Switcher"
    light="Light"
    dark="Dark"
    appearance="switch"
    permanent="false"
  ></dark-mode-toggle>
</aside>

添加暗模式切換元素

雖然我們在那里，但我們也要添加一些內(nèi)容。畢竟，我們希望看到并測試我們的結(jié)果。以下是我們index.html現(xiàn)在的樣子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="common.css" />
    <link
      rel="stylesheet"
      href="light.css"
      media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
    />
    <link
      rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)"
    />
    <script
      type="module"
      src="https://googlechromelabs.github.io/dark-mode-toggle/src/dark-mode-toggle.mjs"
    ></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Toggle</title>
  </head>
  <body>
    <aside>
      <dark-mode-toggle
        id="dark-mode-toggle"
        legend="Theme Switcher"
        light="Light"
        dark="Dark"
        appearance="switch"
        permanent="false"
      ></dark-mode-toggle>
    </aside>

    <main>
      <h1>Hi there!</h1>
      <p>
        Lorem ipsum dolor sit amet, legere ancillae ne vis. Ne vim laudem
        accusam consectetuer, eu utinam integre abhorreant sea. Quo eius veri
        ei.
      </p>
      <form id="content">
        <fieldset>
          <legend>Lorem ipsum</legend>
          <div>
            <select>
              <option>Lorem</option>
              <option>Ipsum</option>
            </select>
          </div>
          <div>
            <button type="button">Lorem</button>
          </div>
          <div>
            <input type="text" value="Lorem ipsum" />
          </div>
          <div>
            <input type="search" value="Lorem ipsum" />
          </div>
          <div>
            <label><input checked type="checkbox" /> Lorem</label>
            <label><input type="checkbox" /> Ipsum</label>
          </div>
          <div>
            <label><input checked name="foo" type="radio" /> Lorem</label>
            <label><input name="foo" type="radio" /> Ipsum</label>
          </div>
        </fieldset>
      </form>
    </main>
  </body>
</html>

向index.html添加內(nèi)容

最后，我們需要為明暗主題聲明樣式。從下面的代碼片段中獲取樣式。

common.css

這些樣式在黑暗和淺色主題之間重復使用。


:root {
  color-scheme: dark light; /* stylelint-disable-line property-no-unknown */
  --heading-color: red;
  --duration: 0.5s;
  --timing: ease;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  transition: color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
  font-family: sans-serif;
  font-size: 12pt;
  background-color: var(--background-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
}

main {
  margin: 1rem;
  max-width: 30rem;
  position: relative;
}

h1 {
  color: var(--heading-color);
  text-shadow: 0.1rem 0.1rem 0.1rem var(--shadow-color);
  transition: text-shadow var(--duration) var(--timing);
}

img {
  max-width: 100%;
  height: auto;
  transition: filter var(--duration) var(--timing);
}

p {
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

fieldset {
  border: solid 0.1rem;
  box-shadow: 0.1rem 0.1rem 0.1rem var(--shadow-color);
  transition: box-shadow var(--duration) var(--timing);
}

div {
  padding: 0.5rem;
}

aside {
  position: absolute;
  right: 0;
  padding: 0.5rem;
}

aside:nth-of-type(1) {
  top: 0;
}

aside:nth-of-type(2) {
  top: 3rem;
}

aside:nth-of-type(3) {
  top: 7rem;
}

aside:nth-of-type(4) {
  top: 12rem;
}

#content select,
#content button,
#content input[type="text"],
#content input[type="search"] {
  width: 15rem;
}

dark-mode-toggle {
  --dark-mode-toggle-remember-font: 0.75rem "Helvetica";
  --dark-mode-toggle-legend-font: bold 0.85rem "Helvetica";
  --dark-mode-toggle-label-font: 0.85rem "Helvetica";
  --dark-mode-toggle-color: var(--text-color);
  --dark-mode-toggle-background-color: none;

  margin-bottom: 1.5rem;
}

#dark-mode-toggle {
  --dark-mode-toggle-dark-icon: url("moon.png");
  --dark-mode-toggle-light-icon: url("sun.png");
  --dark-mode-toggle-icon-size: 1rem;
  --dark-mode-toggle-icon-filter: invert(100%);
}

common.css

注意該color-scheme財產(chǎn)。該color-scheme物業(yè)仍處于開發(fā)階段，可能尚未完全支持。Chrome將全面支持2019年底。

dark.css

這些是我們黑暗主題的風格。

:root {
  --background-color: rgb(40, 44, 53);
  --text-color: rgb(240, 240, 240);
}

.icon {
  filter: invert(100%);
}

/* If no dark mode user agent stylesheet exists, emulate it */
select,
input,
button,
option {
  color: var(--text-color);
  background-color: var(--background-color);
  border-width: 1px;
  border-radius: 1px;
}

/* Else, use the user agent stylesheet */
@media (prefers-color-scheme: dark) {
  select,
  input,
  button,
  option {
    color: unset;
    background-color: unset;
  }
}

dark.css

light.css

最后，為輕主題設計風格。

:root {
  --background-color: rgb(240, 240, 240);
  --text-color: rgb(15, 15, 15);
}

light.css

在瀏覽器中打開index.html文件。您可以在本地打開它，也可以啟動快速HTTP服務器。在我的例子中，我將使用內(nèi)置的Python服務器打開它。

$ python -m SimpleHTTPServer

現(xiàn)在，如果我們打開瀏覽器并輸入localhost:8000- 我們應該看到以下內(nèi)容：

繼續(xù)，然后單擊右上角的主題切換器按鈕。

切換主題

真棒！它就像一個魅力。您可以在此處找到GitHub存儲庫中的所有圖像資源。

感謝閱讀，我希望你學到了一兩件事。保持好狀況！

翻譯自：https://medium.com/better-programming/how-to-build-dark-and-light-theme-with-web-components-a63ca1570bfe

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

如何使用Web組件構(gòu)建明暗主題

如何使用Web組件構(gòu)建明暗主題

在明暗主題之間切換從未如此簡單

入門

`<dark-mode-toggle>` 元件

common.css

dark.css

light.css

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

如何使用Web組件構(gòu)建明暗主題

在明暗主題之間切換從未如此簡單

入門

<dark-mode-toggle> 元件

common.css

dark.css

light.css

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

`<dark-mode-toggle>` 元件