Bootstrap 5.3 Override $primary in darkmode

I want to add dark mode support to my project. The problem I am experiencing now is that my main primary color #6174dd is being applied to bg-primary in dark mode and it's not pleasant on the eyes. I tried overriding primary-bg-subtle-dark, but that does not seem to be doing anything.
@import '~bootstrap/scss/functions';

$primary: #6174dd;
$premium: #ff9066;
$min-contrast-ratio: 3;

@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/variables-dark';

$primary-bg-subtle-dark: $danger;

$custom-colors: (
'premium': $premium,
);

$theme-colors: map-merge($theme-colors, $custom-colors);

// this works, but I really do not want to define every class...
// [data-bs-theme="dark"] {
// .bg-primary {
// background-color: $info;
// }
// }
@import '~bootstrap/scss/functions';

$primary: #6174dd;
$premium: #ff9066;
$min-contrast-ratio: 3;

@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/variables-dark';

$primary-bg-subtle-dark: $danger;

$custom-colors: (
'premium': $premium,
);

$theme-colors: map-merge($theme-colors, $custom-colors);

// this works, but I really do not want to define every class...
// [data-bs-theme="dark"] {
// .bg-primary {
// background-color: $info;
// }
// }
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server