幾秒鐘內為您的網站添加黑暗模式/夜間模式

Darkmode.Js 是一款開源項目，只需要添加一段代碼，就可以為網站添加夜晚模式/黑暗模式/夜間模式/護眼模式，讓你的網站跟上 UI 界的潮流。

這個庫使用css混合混合模式，以便為您的任何網站帶來黑暗模式。只需復制粘貼片段，你就會得到一個小部件來打開和關閉暗模式。您也可以在沒有小部件的情況下以編程方式使用它。這個插件是輕量級的，內置于VanillaJS中。默認情況下，它還使用localstorage，因此您的上一個設置將被記住！

• 小部件自動出現
• 保存用戶選擇
• 如果OS首選主題為深色（如果瀏覽器支持首選配色方案），則自動顯示暗模式
• 可以不使用小部件以編程方式使用

Wordpress插件

如果你正在使用Wordpress，你可能需要看看這些插件基于黑暗模式.js:

• https://wordpress.org/plugins/blackout-darkmode-widget/
• https://wordpress.org/plugins/darkmode/

如何使用

Darkmode.js 很容易使用，只需復制粘貼下面的代碼或使用npm包。

簡單方法（使用jsdeliver CDN）

只需將此代碼添加到html頁面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.6/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

如果要使用npm就用下面的代碼：

npm install darkmode-js

以下是可用的選項：

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

如果不想顯示小部件并以編程方式啟用/禁用Darkmode，可以使用toggle（）方法。您還可以檢查是否使用isActivated（）方法激活了darkmode。請在下面的示例中查看它們的實際操作。

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated())

替代樣式

• 當darkmode被激活時，一個CSS類darkmode--activated被添加到body標記中。您可以利用它替代樣式并擁有自定義樣式
• 在不想應用暗碼的地方使用darkmode-ignore類
• 您還可以添加以下樣式：isolation:isolate；在css中，這也會忽略暗碼。
• 它也可以恢復黑暗模式與這種風格mix-blend-mode: difference;

.darkmode--activated p, .darkmode--activated li {
  color: #000;
}

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

<span class="darkmode-ignore"><span>

如果不起作用，您可能需要添加以下代碼，但這將使要重寫的類無效。

頁自動適配操作系統/瀏覽器夜間模式

最近在瀏覽一些博主的網站，發現一個很好玩的效果，當手機瀏覽器切換到暗色模式后，網頁也跟著切換暗色效果，切換白天模式就會切換另外的一個效果，然后用F12深入了解一下，就發現一個prefers-color-scheme這個新的css類，以前沒有了解過，趕緊上網查一下。

在developer.mozilla.org中有提到，感興趣可以了解一下。

簡單了解一下，目前主流的瀏覽器都開始通過prefers-color-scheme這個css特征來檢測操作系統的主題色設置亮色或者暗色。

使用這種方法可以在操作系統或者瀏覽器更改系統主題時切換到暗色或者亮色，樣式實時切換無需刷新，也不同于使用JS代碼的定時刷新變更切換，但是這個css特征對部分瀏覽器兼容不好。

語法

no-preference
表示系統未得知用戶在這方面的選項。在布爾值上下文中，其執行結果為 false

light
表示用戶已告知系統他們選擇使用淺色主題的界面。

dark
表示用戶已告知系統他們選擇使用暗色主題的界面。

備注： “未得知”、“已告知”等用語，英文原文如此。 “未得知”可理解為：瀏覽器的宿主系統不支持設置主題色，或者支持主題色并默認為/被設為了未設置/無偏好。 “已告知”為：瀏覽器的宿主系統支持設置主題色，且被設置為了亮色或者暗色。
目前，若結果為 ，無法通過此媒體特性獲知宿主系統是否支持設置主題色，或者用戶是否主動將其設置為無偏好。出于隱私保護等方面的考慮，用戶或用戶代理也可能在一些情況下在瀏覽器內部將其設置為 。no-preferenceno-preference

關鍵代碼

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

瀏覽器兼容性

這個兼容性基本兼容了主流瀏覽器，親測Chrome、Edge、Firefox這些最新的瀏覽器都支持。

效果展示

在Chrome、Edge瀏覽器打開本站，手機或者Windows切換到暗色模式，效果就會實時呈現無需刷新網頁。

是 Typora Markdown 編輯器的類似 Vue 文檔風格的自定義主題。

簡介

Typora是一款支持實時預覽的 Markdown 編輯器和閱讀器，支持Windows、macOS、Linux三大平臺。Typora 作為一款合格的 Markdown 編輯器，支持圖片、列表、表格、代碼、公式、目錄等功能，同時這款軟件還支持（一鍵）動態預覽功能，讓一切都變得如此干凈、純粹。并且有多種主題模板。typora-vue-theme就是參考了Vue文檔風格而開發的一個 Typora 自定義主題。

安裝主題

0. 下載本主題中的vue.css、vue-dark.css文件和包含字體的vue文件夾；
1. 打開 Typora，點擊“偏好設置” => “打開主題文件夾”按鈕，將彈出 Typora 的主題文件夾；
2. 將下載好的vue.css和vue-dark.css文件和包含字體的vue文件夾放到 Typora 的主題文件夾中；
3. 關閉并重新打開 Typora，從菜單欄中選擇 “主題” => “Vue” 或者 “Vue Dark” 即可。

效果圖

Vue 白天模式

Vue 夜晚模式

感謝: 本主題中的vue-dark.css來自typora-vue-dark-theme.

鏈接見下。該模版非常漂亮！必須贊一個