KPC
Kevin Powell - Community•3y ago
Sora

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

Did you find this page helpful?