You can download the examples.zip file on the site you mentioned which will show you the sass files and all the import and variable settings (example). I would start though if you are going down this rabbit hole to learn how to compile a standard bootstrap css file from the source files on the Bootstrap site. When looking at these “online theme builders” with easy components, you must remember if you choose to import the theme that the theme version number for the css should be the same as the version of the bootstrap.js file that Bootstrap Studio uses. If not then the theme.css file will always be ahead or behind the .js version Bootstrap Studio uses.
I think its better to learn from the theme builders but in the end…always build your own theme from what you have learned from the pros.
For example here are the variables in the examples file for the custome settings in scss…
// Variables
$enable-rounded: true !default;
$enable-rfs: true !default;
$enable-antialiasing: true !default;
$enable-negative-margins: true !default;
$border-width: 1px !default;
$border-color: #C2C9D2 !default;
$min-contrast-ratio: 2 !default;
$body-bg: #F1F5FB !default;
$body-color: #15181C !default;
$text-muted: #67798E !default;
$headings-color: #15181C !default;
$white: #fff !default;
$black: #000 !default;
$gray-100: #E1E4E8 !default;
$gray-200: #C2C9D2 !default;
$gray-300: #A4AFBB !default;
$gray-400: #8594A5 !default;
$gray-500: #67798E !default;
$gray-600: #526172 !default;
$gray-700: #3E4955 !default;
$gray-800: #293039 !default;
$gray-900: #15181C !default;
$primary: #382CDD !default;
$secondary: #67798E !default;
$success: #17BB84 !default;
$info: #2D70F5 !default;
$warning: #F67A28 !default;
$danger: #E85444 !default;
$light: #E1E4E8 !default;
$dark: #293039 !default;
$primary-light: #EBEAFC !default;
$secondary-light: #F1F5FB !default;
$success-light: #E8F8F3 !default;
$info-light: #EAF1FE !default;
$warning-light: #FEF2EA !default;
$danger-light: #FDEEEC !default;
$light-light: #F1F5FB !default;
$primary-dark: #161258 !default;
$secondary-dark: #293039 !default;
$success-dark: #094B35 !default;
$info-dark: #122D62 !default;
$warning-dark: #623110 !default;
$danger-dark: #5D221B !default;
$light-dark: #A4AFBB !default;
$theme-colors: (
primary: $primary,
secondary: $secondary,
success: $success,
info: $info,
warning: $warning,
danger: $danger,
light: $light,
dark: $dark,
primary-light: $primary-light,
secondary-light: $secondary-light,
success-light: $success-light,
info-light: $info-light,
warning-light: $warning-light,
danger-light: $danger-light,
light-light: $light-light,
primary-dark: $primary-dark,
secondary-dark: $secondary-dark,
success-dark: $success-dark,
info-dark: $info-dark,
warning-dark: $warning-dark,
danger-dark: $danger-dark,
light-dark: $light-dark
) !default;
$blue: #2D70F5 !default;
$red: #E85444 !default;
$orange: #F67A28 !default;
$green: #17BB84 !default;
$blue-100: #D5E2FD !default;
$blue-200: #ABC6FB !default;
$blue-300: #81A9F9 !default;
$blue-400: #578DF7 !default;
$blue-500: #2D70F5 !default;
$blue-600: #245AC4 !default;
$blue-700: #1B4393 !default;
$blue-800: #122D62 !default;
$blue-900: #D5E2FD !default;
$indigo-100: #D7D5F8 !default;
$indigo-200: #AFABF1 !default;
$indigo-300: #8880EB !default;
$indigo-400: #6056E4 !default;
$indigo-500: #382CDD !default;
$indigo-600: #2D23B1 !default;
$indigo-700: #221A85 !default;
$indigo-800: #161258 !default;
$indigo-900: #0B092C !default;
$purple-100: #E6D4F8 !default;
$purple-200: #CDA9F2 !default;
$purple-300: #B37EEB !default;
$purple-400: #9A53E5 !default;
$purple-500: #8128DE !default;
$purple-600: #6720B2 !default;
$purple-700: #4D1885 !default;
$purple-800: #341059 !default;
$purple-900: #1A082C !default;
$red-100: #FADDDA !default;
$red-200: #F6BBB4 !default;
$red-300: #F1988F !default;
$red-400: #ED7669 !default;
$red-500: #E85444 !default;
$red-600: #BA4336 !default;
$red-700: #8B3229 !default;
$red-800: #5D221B !default;
$red-900: #2E110E !default;
$orange-100: #FDE4D4 !default;
$orange-200: #FBCAA9 !default;
$orange-300: #FAAF7E !default;
$orange-400: #F89553 !default;
$orange-500: #F67A28 !default;
$orange-600: #C56220 !default;
$orange-700: #944918 !default;
$orange-800: #623110 !default;
$orange-900: #311808 !default;
$green-100: #D1F1E6 !default;
$green-200: #A2E4CE !default;
$green-300: #74D6B5 !default;
$green-400: #45C99D !default;
$green-500: #17BB84 !default;
$green-600: #12966A !default;
$green-700: #0E704F !default;
$green-800: #094B35 !default;
$green-900: #05251A !default;
$container-max-widths: (
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1156px
) !default;
$font-family-base: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-size-base: 1rem !default;
$font-size-sm: 0.875rem !default;
$font-size-lg: 1.125rem !default;
$font-weight-bold: 700 !default;
$small-font-size: 0.875rem !default;
$line-height-lg: 2rem !default;
$headings-font-weight: 700 !default;
$headings-font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$headings-line-height: 1 !default;
$h1-font-size: 3.75rem !default;
$h2-font-size: 2.25rem !default;
$h3-font-size: 1.875rem !default;
$h4-font-size: 1.5rem !default;
$h5-font-size: 1.25rem !default;
$h6-font-size: 1rem !default;
$display-font-weight: 400 !default;
$display-font-sizes: (
1: 8rem,
2: 6rem,
3: 4.5rem,
4: 3.75rem,
5: 3rem
) !default;
$display-line-height: 1 !default;
$lead-font-size: 1rem !default;
$lead-font-weight: 500 !default;
$box-shadow: 0px 4px 8px -4px #15181C14 !default;
$box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
$box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !default;
$box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !default;
$spacers: (
0: 0px,
1: 0.25rem,
2: 0.5rem,
3: 0.75rem,
4: 1rem,
5: 1.25rem,
6: 1.5rem,
7: 1.75rem,
8: 2rem,
9: 2.25rem,
10: 2.5rem,
11: 2.75rem,
12: 3rem,
14: 3.5rem,
16: 4rem,
20: 5rem,
24: 6rem,
28: 7rem,
32: 8rem,
36: 9rem,
40: 10rem,
44: 11rem,
48: 12rem,
52: 13rem,
56: 14rem,
60: 15rem,
64: 16rem,
72: 18rem,
80: 20rem,
96: 24rem
) !default;
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
$badge-font-size: 0.75rem !default;
$badge-font-weight: 400 !default;
$badge-color: #fff !default;
$badge-padding-y: 0.25rem !default;
$badge-padding-x: 0.5rem !default;
$badge-border-radius: 9999px !default;
$badge-text-transform: null !default;
$input-btn-padding-y: 0.5rem !default;
$input-btn-padding-x: 1rem !default;
$input-btn-font-size: 0.75rem !default;
$input-btn-padding-y-sm: 0.375rem !default;
$input-btn-padding-x-sm: 0.75rem !default;
$input-btn-font-size-sm: 0.75rem !default;
$input-btn-padding-y-lg: 0.75rem !default;
$input-btn-padding-x-lg: 1.25rem !default;
$input-btn-font-size-lg: 0.875rem !default;
$btn-border-radius: 0.25rem !default;
$btn-font-weight: 500 !default;
$btn-text-transform: null !default;
$input-bg: transparent !default;
$input-color: #15181C !default;
$input-border-color: #C2C9D2 !default;
$input-placeholder-color: #67798E !default;
$input-padding-y: 0.5rem !default;
$input-padding-x: 1rem !default;
$input-border-radius: 0 !default;
$nav-link-font-size: 0.875rem !default;
$nav-link-font-weight: 400 !default;
$navbar-padding-y: 1.5rem !default;
$navbar-padding-x: 1rem !default;
$navbar-nav-link-padding-x: 1.5rem !default;
$navbar-light-color: #67798E !default;
$navbar-light-hover-color: #526172 !default;
$navbar-light-active-color: #526172 !default;
$navbar-light-disabled-color: #8594A5 !default;
$navbar-dark-color: #F1F5FB !default;
$navbar-dark-hover-color: #E1E4E8 !default;
$navbar-dark-active-color: #E1E4E8 !default;
$navbar-dark-disabled-color: #67798E !default;
$navbar-toggler-border: 0 !default;
$navbar-toggler-font-size: 0.875rem !default;
$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.25rem !default;
$alert-color: null !default;
$alert-font-size: null !default;
$alert-border-width: 0 !default;
$alert-border-radius: 0 !default;
$alert-border-top-width: $alert-border-width !default;
$alert-border-right-width: $alert-border-width !default;
$alert-border-bottom-width: $alert-border-width !default;
$alert-border-left-width: $alert-border-width !default;
$alert-border-top-right-radius: $alert-border-radius !default;
$alert-border-top-left-radius: $alert-border-radius !default;
$alert-border-bottom-right-radius: $alert-border-radius !default;
$alert-border-bottom-left-radius: $alert-border-radius !default;
Example download as Theme in Bootstrap Studio