Currently, I'm working on tweaking the data-bs-theme in Bootstrap 5.3. My goal is to adjust the pre-defined CSS variables of the Bootstrap dark theme and refresh the color palette. Specifically, I want to change the shade of blue for my blue button (btn-primary) when html[data-bs-theme='dark'] is active.
This is the code snippet that I am currently focusing on:
html[data-bs-theme='dark'] {
--bs-btn-color: #fff;
--bs-btn-bg: #ff0000;
--bs-btn-border-color: #ff0000;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff0000;
--bs-btn-hover-border-color: #ff0000;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #ff0000;
--bs-btn-active-border-color: #ff0000;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #ff0000;
--bs-btn-disabled-border-color: #ff0000;
}
This snippet represents some exaggerated test code aimed at experimenting with red or green colors.
The following showcases how the Bootstrap CSS appears upon website loading:
.btn-primary
{
--bs-btn-color: #fff;
--bs-btn-bg: #0d6efd;
--bs-btn-border-color: #0d6efd;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd;
}
I know I can target .btn-primary in my CSS file to override it, but I find that approach messy (unless advised otherwise by an expert).
If possible, I'd like to avoid using SCSS due to the setup time and hosting deployment size implications, especially since this is just a small website with 1-3 pages.
I'm eager to receive any feedback or recommendations on the most efficient way to handle this while keeping it clean and organized.