الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

الدليل الإضافي إلى الوضع المظلم و Bootstrap 5

استمرار لـ V4 Dark Mode POC ، ولكن هذه المرة لـ V5

هذا هو متابعة للدليل النهائي لوضع الظلام و Bootstrap 4 من العمل ، ويتعلق بالتمهيد 5 (Github repo.) .

إذا كنت بعد نفس العمل لـ Bootstrap 4 ، فيرجى زيارة repo vinorodrigues/bootstrap-dark.

ملاحظة مهمة حول حالة هذا المشروع:

وصلت جهود التطوير مرة أخرى في مستودع Bootstrap 5 الأساسي إلى V5.3 - وهو ما يتضمن الآن "أوضاع الألوان" وضمن تنفيذ الوضع المظلم. يرى:

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

هذا ، بالتالي ، يجعل هذا المشروع زائداً عن الحاجة وسيتم تقاعده ، مما يترك رمزه ومستودعه هنا لصالح التعليم.

عن

لن يكون هذا الرمز منطقيًا إلا إذا لم تقرأ الدليل النهائي لوضع الظلام و Bootstrap 4 أولاً.

ماذا تحصل؟

يقوم الرمز بتجميع الطرق الأربعة (والمتغيرات - ستة في المجموع ) من مجموعة العمل الأصلية ، ولكن تم تجميعها من أجل الحصول على Bootstrap 5 . هذه هي:

الطريقة 1

(رابط إلى الأصل)

  • bootstrap-night : هذا ببساطة موضوع bootstrap مظلم. ومع ذلك ، يمكن استخدامه مع CSS الأساسية Bootstrap لتقديم وظيفة وضع الظلام 2 ترفع.

الطريقة 2

(رابط إلى الأصل)

  • bootstrap-nightfall : هذا ببساطة "اللون فقط" CSS لجميع مكونات Bootstrap Core ، ولكن الظلام ، ويهدف إلى استخدامه كإضافة. يمكن أيضًا ، مع استعلام وسائط بسيط ، قيادة التبديل الأوتوماتيكي للوضع الظلام.

الطريقة 3

(رابط إلى الأصل)

  • bootstrap-nightshade : هذا تعديل للباس Bootstrap ويضيف CSS لونه داكن لجميع المكونات ، ولكنه مظلم ، متداخل في غلاف فئة html.dark . في حد ذاته ، لا يمكن أن يوفر تبديل الوضع المظلم ، ولكن أضف مكتبة darkmode.js المضمّنة ولديك متغير تفاعلي للوضع المظلم من Bootstrap مع دعم زر "Toggle" المدمج.

  • bootstrap-blackbox : هذا المتغير هو في الأساس نفس متغير "NightShade" ، ولكن بدلاً من استخدام فئة علامة HTML ، فإنه يستخدم سمة بيانات علامة HTML ؛ data-bs-color-scheme . نفس مكتبة darkmode.js يدفع هذا ، كل ما عليك فعله هو إضافة سمة البيانات إلى علامة HTML الخاصة بك.

الطريقة 4

(رابط إلى الأصل)

  • bootstrap-dark : هذه هي الطريقة الموصى بها ؛ واحد CSS مع كل من المواضيع الخفيفة والظلام ، يمكن تبديل فقط مع نظام التشغيل أو المستعرض prefers-color-scheme .

  • bootstrap-unlit : هذا البديل هو في الأساس نفس المتغير "المظلم" ، ولكن مع مخطط "الظلام" باعتباره الأساسي/الاحتياطي و "الضوء" كما هو مختار في نظام الألوان.

ابدأ

1. bootstrap-night 2. bootstrap-nightfall 3. bootstrap-nightshade 3 ب. bootstrap-blackbox 4. bootstrap-dark 4 ب. 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. تعديل _variables.scss و _variables-alt.scss في مجلد scss الفرعي.
  4. تشغيل npm run build لبناء موضوعك.
  5. سيكون الرمز المترجم في مجلد dist .

يعتمد نظام الإنشاء على البرامج النصية NPM. ستحتاج معظم أدوات الإنشاء (وحدات NPM) إلى تثبيت "Global" لضمان تنفيذ البرامج النصية من سطر الأوامر. 

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 لإضافة وظيفة "الوضع الظلام" ويُعلن كـ "دليل على المفهوم" (POC) - وهذا يعني أنه ليس المقصود منه كمصدر إنتاج ، ولكن مجرد تمرين لإثبات أن الوضع المظلم يمكن تحقيقه عبر طرق مختلفة ، أي قطعة تعليمية. وهذا يعني أيضًا أن المؤلف (Vino Rodrigues) غير مضطر لدعمه.

الملاحظة 2:

لن يجمع هذا المشروع مع العقدة. ارجع إلى مستندات Bootstrap 5 الأصلية ، خاصة هنا (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass) ، وستلاحظ أنها قد حرمت من استخدام العقدة sass لصالح dart-sass.

وهم بدورهم يستشهدون بهذا (https://sass-lang.com/blog/libsass-is-deprecated) حيث يذكر منسقي SASS أنهم لن يدعموا libsass ، أن العقدة تعتمد عليها.

NPM

يمكن للمطورين تضمين مجلدات scss و dist في مشروعك الخاص بـ:

npm install bootstrap-dark-5

CDN

يمكنك أيضًا ربط السمة عبر CDN باستخدام JSDelivr.com.

يمكنك الوصول إلى ملف CSS السمة من إصدار GitHub:

  • bootstrap-dark perfers-color-scheme Media

    • الإنتاج / البديل المصغر:
    • البديل التنمية / التصحيح:
    • أيضا ، اقرأ دليل البدء السريع.

  • bootstrap-nightshade - متغير مكتبة html.dark CSS + JS

    • الإنتاج / المتغيرات المصغرة:
    • المتغيرات التنمية / التصحيح:
    • أيضا ، اقرأ دليل البدء السريع ومرجع darkmode.js .

  • bootstrap-night - هذا الموضوع المظلم فقط البديل

    • الإنتاج / البديل المصغر:
    • البديل التنمية / التصحيح:
    • أيضا ، اقرأ دليل البدء السريع.

  • المصدر وما إلى ذلك هنا ، لكنني أوصي باستخدام GitHub.

مزيد من القراءة

يجب أن تقرأ لجميع المطورين الراغبين في الكتابة عن الوضع المظلم:

  • ... من الواضح ، المحتوى الأصلي: الدليل النهائي لوضع الظلام والتمهيد 4

  • Web.Dev ، Thomas Steiner (@Tomayac) ، 27 يونيو 2019 (تم تحديثه في 9 يونيو ، 2020) ، "تفضل Color-Scheme: Hello Darkness ، صديقي القديم"

  • Web.dev ، Thomas Steiner (tomayac) ، 8 أبريل 2020 (تم تحديثه في 16 يونيو 2020) ، "تصميم Dark Dark Default مع خاصية CSS Color-Action وعلامة التعريف المقابلة"

  • CSS-Tricks ، Adhuham ، 9 سبتمبر ، 2020 "دليل كامل للوضع المظلم على الويب"

  • بيتي عن الصور والاعتبارات الأخرى في بلدي ".. دليل نهائي .." قطعة.

تعليق

إذا كان لديك ملاحظات مفيدة ، قم بإسقاط "مشكلة" على صفحة قضايا GitHub.

© 2022

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل