Bootstrap 5.1.0

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

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

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Bootstrap 5.0.2

You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc...

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

Demo

"How to access a theme color in bootstrap 5?"

Short answer, use map-get...

.fa-li {
    color: map-get($theme-colors,"primary")
}

Demo

"I want to define my own theme color so the standard bootstrap elements are overridden and also use the value later for my own components"

Full answer, For your theme changes it would be better to redefine the value of $primary. Then you won't have to use map-get. Simply reference $primary...

$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;

@import "bootstrap";

.fa-li {
    color: $primary
}

Demo

Also see: Overriding Bootstrap SCSS Variables

Bootstrap 5.3 (update 2023)

Here's an example using an existing color variable ($orange).

// required to get $orange variable
@import "functions"; 
@import "variables";

$primary: $orange; // set the $primary variable

// merge with existing $theme-colors map
$theme-colors: map-merge($theme-colors, (
  "primary": $primary
));

// set changes
@import "bootstrap";

https://codeply.com/p/qFez3k8oIF

Bootstrap 5 (update 2021)

The SASS override method is still the same for Bootstrap 5. If you're not referencing any existing Bootstrap variables to set the the new colors, you just need to set the theme variable(s) and @import bootstrap

$primary: rebeccapurple;

@import "bootstrap"; //use full path to bootstrap.scss

https://codeply.com/p/iauLPArGqE

Bootstrap 4*

To change the primary, or any of the theme colors in Bootstrap 4 SASS, set the appropriate variables before importing bootstrap.scss. This allows your custom scss to override the !default values...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

In some cases, you may want to set a new color from another existing Bootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Demo: https://codeply.com/go/lobGxGgfZE

Also see: this answer, this answer or changing the button color in (CSS or SASS)

It's also possible to change the primary color with CSS only but it requires a lot of additional CSS since there are many -primary variations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.