Define Theme Colors: Customize the color values in the $theme-colors map according to your design needs. The map defines colors for different purposes, such as primary, secondary, etc.
Copy the SCSS Code: Once you have customized the $theme-colors, copy the entire SCSS code block.
Import Bootstrap SCSS: Ensure that the @import "bootstrap/scss/bootstrap"; statement is included. This imports the Bootstrap framework’s SCSS files, allowing your custom colors to be applied throughout the framework.
Include in Your Project: Paste the SCSS code into your project’s SCSS file (e.g., styles.scss).
Compile SCSS to CSS: Use a SCSS compiler (like Dart Sass, node-sass, or a build tool like Webpack) to compile the SCSS into CSS.
Apply in HTML: Link the compiled CSS file in your HTML document. Your Bootstrap components will now use the customized theme colors.
Test and Adjust: Preview the changes in a browser, and adjust the color values in the $theme-colors map if needed.
