Setting $color-mode-type to media-query (rather than data) causes a Sass compilation erro

Created by: RichDeBourke

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I downloaded the Bootstrap GitHub repository (version from 12/19/2022) to try dark mode.

Compiling Sass with the default value (data) compiles successfully (I’m using Glenn Marks’ Live Sass Compiler for VS Code). $color-mode-type: data !default;

If I set $color-mode-type to media-query (overriding the default data) in my _site_variables.scss file, the compiler generates the following error:

Compilation Error
Error: Declarations may only be used within style rules.
    ╷
135 │     --#{$prefix}body-color: #{$body-color-dark};
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\_root.scss 135:5             @content
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\mixins\_color-mode.scss 5:7  color-mode()
  c:\wamp64\www\f3-5\node_modules\bootstrap\scss\_root.scss 133:3             @import
  c:\wamp64\www\f3-5\src\scss\style.scss 25:9                                 root stylesheet
--------------------

I was expecting to have the Sass output something like:

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-color: #adb5bd;
    }
}

Reduced test cases

I don't have a suggested fix and I'm not sure how to do a test case since this version (5.3.0?) is available on a CDN yet.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.3.0