diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
index 41bcd4279b..93d102199a 100644
--- a/site/content/docs/5.3/customize/color.md
+++ b/site/content/docs/5.3/customize/color.md
@@ -480,6 +480,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`)
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
diff --git a/site/content/docs/5.3/customize/overview.md b/site/content/docs/5.3/customize/overview.md
index 25c31bdb6c..ed890acd01 100644
--- a/site/content/docs/5.3/customize/overview.md
+++ b/site/content/docs/5.3/customize/overview.md
@@ -12,6 +12,8 @@ sections:
     description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
   - title: Color
     description: Learn about and customize the color systems that support the entire toolkit.
+  - title: Color modes
+    description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
   - title: Components
     description: Learn how we build nearly all our components responsively and with base and modifier classes.
   - title: CSS variables
diff --git a/site/content/docs/5.3/utilities/api.md b/site/content/docs/5.3/utilities/api.md
index a4da942242..aa7d6b88bd 100644
--- a/site/content/docs/5.3/utilities/api.md
+++ b/site/content/docs/5.3/utilities/api.md
@@ -389,6 +389,7 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -415,6 +416,7 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -444,6 +446,7 @@ You can enable responsive classes for an existing set of utilities that are not
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -499,6 +502,7 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -522,6 +526,7 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -537,6 +542,7 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
@@ -558,6 +564,7 @@ You can add, remove, and modify many utilities all at once with the [`map-merge(
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";