I’m pulling my hair out with this. I’m trying to follow the bootstrap docs for version 5.3.3

I’ve created a custom theme all started off well. Until I hit the dark mode switch. I noticed some of the colours worked in light mode but not dark(accessibility issues on contrast) so I’m trying to fix some of them when the user selects dark mode.

Mainly some text where i have used the class text-primary to make it red. But in dark mode its hard to read so where ever the class text-primarys been used in light mode when in dark mode make it green for eaxmple.

But everything i try doesnt work for the text 🙁 heres my scss sheet.

`// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

//BOOTSTRAP Primary Color Overides
$primary: #e4002b;
$secondary: #706f6f;
$success: #c4d600;
$info: #0072ce;
$warning: #ffc72c;
$danger: #a70000;
$light: #b2b2b2;
$dark: #060202;

// ************Links************
//

// LIGHT MODE
$link-color: #000;

// ************DARK MODE************
//
//LINKS
$link-color-dark: #fff;
$text-color-dark: #00ff0d;

// ************Accordion************
$accordion-button-bg: transparent;
$accordion-button-active-bg: transparent;


// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

@import '../node_modules/bootstrap/scss/bootstrap';


Tried everything from posts on here to chattgpt but nothing seems to work.`