首頁>建站資源>網站數據
下載

黑暗模式和引導5的輔助指南5

V4 Dark Mode POC的延續，但是這次是V5

這是深色模式和自行車4工作的權威指南的後續，以及與Bootstrap 5 （Github Repo。）有關的後續指南。

如果您正在為Bootstrap 4做同樣的工作，請訪問Vinorodrigues/Bootstrap-Dark Repo。

關於該項目狀態的重要說明：

Bootstrap 5的核心存儲庫的開發工作已達到v5.3-現在包括“顏色模式”以及在黑暗模式的實現之內。看：

https://getbootstrap.com/docs/5.3/customize/color-modes/

因此，這使該項目變得多餘並將退休，並將其代碼和存儲庫留在此處，以造福教育。

關於

如果您不首先閱讀《暗模式的權威指南》，並且首先閱讀Bootstrap 4，則此代碼將毫無意義。

你得到什麼？

該代碼編譯了原始工作主體的四種方法（以及總共六種） ，但為Bootstrap 5編譯。這些都是：

方法1

（鏈接到原始）

  • bootstrap-night ：這只是一個黑暗的引導主題。但是，它可以與Bootstrap Core CSS一起使用，以提供2文件的暗模式功能。

方法2

（鏈接到原始）

  • bootstrap-nightfall ：這僅僅是Bootstrap Core的所有組件的“僅Color” CSS，但旨在用作附加組件。它還可以通過簡單的媒體查詢，驅動自動暗模式切換。

方法3

（鏈接到原始）

  • bootstrap-nightshade ：這是對Bootstrap Core的修改，並為所有組件添加了深色CSS，但深色，嵌套在html.dark類包裝中。它本身無法提供暗模式切換，而是添加隨附的darkmode.js庫，並且您具有互動的暗模式切換變體，並帶有內置的“切換”按鈕支持。

  • bootstrap-blackbox ：此變體本質上與“夜幕降低”變體相同，但是它不使用HTML標籤類，而是使用HTML標籤數據屬性； data-bs-color-scheme 。相同的darkmode.js庫驅動此一個，您需要做的就是將數據屬性添加到您的HTML標籤中。

方法4

（鏈接到原始）

  • bootstrap-dark ：這是推薦的方法；一個CSS具有淺色和深色主題，僅使用OS或瀏覽器prefers-color-scheme媒體查詢。

  • bootstrap-unlit ：此變體本質上與“ Dark”變體相同，但具有“ Dark”方案為主要/後備和“ Light”，如配色方案中所選擇的。

開始

1. bootstrap-night 2。 bootstrap-nightfall 3。 bootstrap-nightshade 3b。 bootstrap-blackbox 4。 bootstrap bootstrap-dark 4b。 bootstrap-unlit
快速啟動指南快速啟動指南快速啟動指南快速啟動指南快速啟動指南快速啟動指南
darkmode.js參考darkmode.js參考
請參見示例請參見示例請參見示例

證據在布丁中

一些測試頁面已在Vinorodrigues.github.io/bootstrap-dark-5上設置

你可以使用這個嗎？

是的。

許可證是麻省理工學院。即，只要您歸功於原始作者，就可以使用它，並原位留下版權。

如果您是主題構建器或想在自己的項目中使用其原理，則需要安裝git和節點。

  1. 叉子或下載存儲庫： git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
  2. 安裝節點依賴項： npm install （請參見下面的註釋。）
  3. scss折疊器中的修改_variables.scss和_variables-alt.scss 。
  4. 運行npm run build以構建您的主題。
  5. 編譯的代碼將在dist文件夾中。

構建系統基於NPM腳本。大多數構建工具（NPM模塊）將需要安裝為“全局”，以確保腳本可以從命令行執行。 

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

注1：

該代碼只是Bootstrap 5核心代碼的重新啟動，以添加“ DAMB MODE”功能，並將其聲明為“概念驗證” （POC） - 這意味著它不打算作為生產源，而只是一種練習，可以證明可以通過多種方法來實現暗模式，即是一種教育性的作品。這也意味著它的作者（Vino Rodrigues）並沒有被迫支持它。

注2：

該項目將不會與節點 - 薩斯一起編譯。請參閱原始的Bootstrap 5文檔，尤其是在此（https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass），您會注意到他們已經將node-sass棄用而不是dart-sass。

他們又引用了這一點（https://sass-lang.com/blog/libsass-is-deprecated）文章，其中SASS策展人指出，他們將不再支持libsass，該節點sass取決於。

NPM

開發人員可以將scss和dist文件夾包括在您自己的項目中：

npm install bootstrap-dark-5

CDN

您也可以使用JSDELIVR.com通過CDN hot鏈接主題。

您可以從GITHUB版本訪問主題CSS文件：

  • bootstrap-dark @Media perfers-color-scheme變體

    • 生產 /縮小變體：
    • 開發 /調試變體：
    • 另外，請閱讀快速啟動指南。

  • bootstrap-nightshade html.dark CSS類 + JS庫變體

    • 生產 /縮小變體：
    • 開發 /調試變體：
    • 另外，請閱讀快速啟動指南和darkmode.js參考。

  • bootstrap-night - 黑暗主題僅變體

    • 生產 /縮小變體：
    • 開發 /調試變體：
    • 另外，請閱讀快速啟動指南。

  • 來源等在這裡，但我建議使用github。

進一步閱讀

必須為所有想要為黑暗模式寫入的開發人員讀取：

  • ...顯然，原始內容：深色模式的權威指南和bootstrap 4

  • Web.dev，Thomas Steiner（@Tomayac），2019年6月27日（2020年6月9日更新） ，“偏愛彩色 - 彩色：你好，黑暗，我的老朋友”

  • Web.dev，Thomas Steiner（@Tomayac），2020年4月8日（2020年6月16日更新） ，“改進了帶有Color-Scheme CSS屬性和相應的META標籤的暗模式默認樣式”

  • CSS-Tricks，Adhuham，9月9日，2020年，“網絡上黑暗模式的完整指南”

  • 我對“最終指南..”一件圖像和其他考慮因素的關注。

回饋

如果您有有用的反饋，請在GitHub問題頁面上給我一個“問題”。

©2022

展開
附加信息
相關應用
爲您推薦
相關資訊 全部