Hi,

Thanks for reaching out.

Bootstrap's primary / secondary come from the compiled CSS, so the quickest way is to override them. Go to System → Site Template Styles → your template → Custom Code → Custom CSS (or add it to /templates/YOUR_TEMPLATE/css/custom.css) and paste this, swapping in your own hex values:

:root{
  --bs-primary:#5b8db8; --bs-primary-rgb:91,141,184;
  --bs-secondary:#000; --bs-secondary-rgb:0,0,0;
  --bs-link-color:#5b8db8; --bs-link-hover-color:#46718f;
}
.btn-primary{
  --bs-btn-bg:#5b8db8; --bs-btn-border-color:#5b8db8;
  --bs-btn-hover-bg:#46718f; --bs-btn-hover-border-color:#46718f;
  --bs-btn-active-bg:#46718f; --bs-btn-active-border-color:#46718f;
  background-color:#5b8db8; border-color:#5b8db8;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:#46718f;border-color:#46718f}
.btn-secondary{
  --bs-btn-bg:#000; --bs-btn-border-color:#000;
  --bs-btn-hover-bg:#222; --bs-btn-hover-border-color:#222;
  background-color:#000; border-color:#000;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{background-color:#222;border-color:#222}
.text-primary{color:#5b8db8!important} .bg-primary{background-color:#5b8db8!important}
.text-secondary{color:#000!important} .bg-secondary{background-color:#000!important}
a{color:#5b8db8} a:hover{color:#46718f}

Clear your Joomla cache afterwards.

Two notes:

• The template's Presets tab changes the general colour scheme (background, text, links), but not Bootstrap's primary/secondary classes — you still need the CSS above for those.
• If the buttons are inside SP Page Builder pages, they use the addon's own colour settings. For those, set up reusable colours in SP Page Builder → Settings → Color Library: https://www.joomshaper.com/documentation/sp-page-builder/color-library

Best regards,

Did that help?