Bootstrap.min.css dynamic theme

I’m able to do it, but the help of friends is always welcome!

I will attach the example file.

@charset "UTF-8"; /*!
 * Bootstrap v5.1.3 (
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (
:root {
  --bs-blue: var(--bs-primary);
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd; /* cor do tema no bss */
  --bs-secondary: #6c757d; /* cor do tema no bss */
  --bs-success: #198754; /* cor do tema no bss */
  --bs-info: #0dcaf0; /* cor do tema no bss */
  --bs-warning: #ffc107; /* cor do tema no bss */
  --bs-danger: #dc3545; /* cor do tema no bss */
  --bs-light: #f8f9fa; /* cor do tema no bss */
  --bs-dark: #212529; /* cor do tema no bss */
  --bs-primary-rgb: var(--bs-primary);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529; /* cor do texto */
  --bs-body-bg: #fff; /* cor do fundo */
  --btn-primary-hover: rgb(var(--bs-primary-rgb), 0.4);

.btn-primary:hover {
  color: #fff;
  background-color: var(--btn-primary-hover);
  border-color: #0a58ca;

I would like to know if it is possible, or will work, as well as the help of friends in some doubts.
Using the part of the BSS, Bootstap Theme, (an image attached), I would like to customize a bootstrap.mim.css to use in all my projects, customizing the fields through the program.
I would edit the bootstrap.min.css, to use its variables replacing the color repetitions with them, this part I’ve tested and it worked, but I need help with the RGB’s part.
Would there be any way for me to create a partial RGB and the opacity would be the default bootstrap.min.css, if so how, examples?
As in another image the colors are repeated dozens of times, this generates a monstrous work when editing all the components, using variables all would be updated automatically.
I’m really bad at expressing myself, even worse, using Google Translate to be able to post the text in English here on the forum.

I think the images help more than the text in what I’m trying to do.


I have uploaded my sasstemplate.bss file here:

Open it up, and then in the design tab scroll to the styles > core and find _variables.scss and open it.

You can change your colors in lines 39-48 and then update your primary/secondary etc colors in lines 70-77

You should see the color change in the preview.

Then export the file, making sure in settings you have minify css turned on

in your assets you will have styles.min.css in the css, this will be your new theme to import into bss


Thank you very much, I will use it here, it really works well.

1 Like

Glad it worked for you.

One other thing, save the file as read only, then you have it as a template for the next project.

1 Like