جافا سكريبت - نص زر Bootstrap 5 لونه أسود بدلاً من الأبيض مثل عرضهم التجريبي

لست متأكدًا مما إذا كان هذا خطأً مني عند تثبيت Bootstrap 5، لكن الكثير من أزراري تستخدم خطًا باللون الأسود بدل الخط الأبيض كما هو موضح في توثيق Bootstrap 5

على سبيل المثال، يبدو .btn-primary في وثائق Bootstrap هكذا:

ومع ذلك عند استخدامي لنفس HTML أحصل على هذه النتيجة:

للتوضيح، HTML في مثالهم ومثالي هو:

<button type="button" class="btn btn-primary">Primary</button>

ليس فقط أن لون النص مختلف، بل لون الخلفية مختلف أيضًا. في الواقع، عند النظر من خلال ملف .css المجمّع الخاص بي، يبدو أن جزءًا كبيرًا من ألوان bootstrap المستخدمة في جميع أنحاء الكود له هذا المظهر "المفتوح" المماثل للون الأزرق في الزر. من أدوات تطوير Chrome، يبدو أن النمط يأتي من ملفات Bootstrap نفسها، وليس من أي نمط أقوم بتطبيقه عن غير قصد. يتم تجميع SCSS إلى ملفات CSS عبر إعداد Laravel العادي (webpack mix). أنا فقط أستخدم حزم NPM لـ bootstrap 5.

window.bootstrap=require('bootstrap'); وحزمة NPM "bootstrap": "^5.1.3"،

ملف app.scss الخاص بي لا يحتوي على الكثير على الإطلاق:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";

// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";

// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";

// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";

// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";

h1 {
    font-family: 'Lobster', cursive;
}

a.torn-link {
    color: $orange;
}

.ttt-title {
    font-family: 'Lobster', cursive;
}
.card-title {
    font-family: 'Cuprum', sans-serif;
}
html {
    background-color: #fff;
    color: #636b6f;
}
body {
    background-color: #fff;
    color: #636b6f;
}
.links {
    >a {
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
    }
}
#settings-button {
    &:hover {
        fill: rgba(189, 189, 189, 0.25);
    }
}
.ui-dialog-title {
    font-family: 'Cuprum', sans-serif;
}

thead, th {
    text-align: center;
}

تعديل: حتى جميع الروابط الملونة في Bootstrap تبدو باهتة. على سبيل المثال، لا يمكن استخدام اللون الأصفر .link-warning لأنه باهت جدًا بحيث لا يمكن قراءته. بينما الأصفر في صفحتهم قابل للقراءة بالكامل. لذلك الأمر ليس مجرد أنني أطبق نمطًا على زر أو شيء من هذا القبيل عن طريق الخطأ.

تحرير2:

إليك كيف يبدو زري في أدوات المطور (لاحظ أن الألوان تختلف عن الألوان الموجودة في مستندات Bootstrap 5)

وزر CSS يأتي فقط من ملف app.css المجمّع الناتج عن طريق webpack:

تعديل 3: ملف _variables.scss الخاص بي:

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

الإجابة رقم 1

في ملف _variables.scss في مرحلة ما عند إضافة Bootstrap 5 إلى Laravel 8، يبدو أن أحد السكريبتات أضاف ألوانًا، أو أنني ارتكبت خطأً في مرحلة ما وأضفت لوحة ألوان في ملف المتغيرات.

جميع الألوان في ملف المتغيرات كانت مشابهة لألوان Bootstrap الافتراضية، لكنها كانت نسخة أكثر باهتة. هذا ما كان يسبب ظهور أي شيء في Bootstrap يستخدم هذه المتغيرات بشكل باهت.

ببساطة، إزالة جميع الألوان التي كنت قد عرَّفتها في ملف _variables.scss حلت المشكلة.

الإجابة رقم 2

يتميز Bootstrap 5 بوظيفة تباين الألوان. يتم استخدام هذا المقتطف البرمجي في جميع أنحاء Bootstrap لضمان أن المكونات تلبي إرشادات الوصول لتباين الألوان حسب WCAG. عندما تقوم بإنشاء مكوّن .btn-primary، يقوم Bootstrap بتشغيل القيمة الست عشرية $primary/$blue من خلال وظيفة تباين الألوان ويفحص لمعانها النسبي. في هذه الحالة، #3490dc لا تتمتع بتباين كافٍ مع تنسيق النص الافتراضي color: #FFFFFF للزر، لذا يقوم بتغييرها إلى color: #000000 بدلاً من ذلك.