Bootstrap Color Palette

DOM

<h4 id="changed2">Example #2 <h4>
<div id="example2"><div>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';
              
const myPal2 = new BootstrapColorPalette({
 "selector" : "#example2",
 "func": ChangeRGB,
 "type": "rgb"
});
              
function ChangeRGB(col){
 $('#changed2').css({
  'background-color' : 'rgb(var('+col+'))'
 });
 $('.return2').text(col);
}
              

DOM

<h4 id="changed3">Example #3 <h4>
<div id="example3"><div>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';
              
const myPal3 = new BootstrapColorPalette({
 "selector" : "#example3",
 "func": ChangeBg,
 "type": "bg"
});

function ChangeBg(col){
  var elClass;
  if ($('#changed3').attr('class')){
    elClass = $('#changed3').attr('class').split(' ');
    var arrCol = [
      "bg-primary",
      "bg-secondary",
      "bg-success",
      "bg-danger",
      "bg-warning",
      "bg-info",
      "bg-light",
      "bg-dark",
      "bg-body-secondary",
      "bg-body-tertiary",
      "bg-body","bg-black",
      "bg-white",
      "bg-transparent"
    ];
    var bgCl;
    for (let i = 0; i < elClass.length; i++) {
      if (arrCol.indexOf(elClass[i]) !== -1){
        bgCl = elClass[i];
        break;
      }
    }
    if (bgCl) $('#changed3').removeClass(bgCl);
  }
  $('#changed3').addClass(col);
  $('.return3').text(col);
}
              

DOM

<h4>Example #4</h4>
<p id="changed4">
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua.
</p>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';

const myPal4 = new BootstrapColorPalette({
  "selector" : "#example4",
  "func": ChangeText,
  "type": "<span class="text-danger">text</span>"
});

function ChangeText(col){
  var elClass;
  if ($('#changed4').attr('class')){
    elClass = $('#changed4').attr('class').split(' ');
    var arrCol = [
      "text-primary",
      "text-secondary",
      "text-success",
      "text-danger",
      "text-warning",
      "text-info",
      "text-light",
      "text-dark",
      "text-body",
      "text-muted",
      "text-white",
      "text-black"
    ];
    var bgCl;
    for (let i = 0; i < elClass.length; i++) {
      if (arrCol.indexOf(elClass[i]) !== -1){
         bgCl = elClass[i];
         break;
      }
    }
    if (bgCl) $('#changed4').removeClass(bgCl);
  }
  $('#changed4').addClass(col);
  $('.return4').text(col);
}

DOM

<h4 class="mb-3">Example #5</h4>
<button id="changed5" class="btn btn-dark w-100" type="button" name="button">Button</button>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';

const myPal5 = new BootstrapColorPalette({
  "selector" : "#example5",
  "func": ChangeBtn,
  "type": "<span class="text-danger">btn<span>"
});

function ChangeBtn(col){
  var elClass;
    if ($('#changed5').attr('class')){
    elClass = $('#changed5').attr('class').split(' ');
    var arrCol = [
      "btn-primary",
      "btn-secondary",
      "btn-success",
      "btn-danger",
      "btn-warning",
      "btn-info",
      "btn-light",
      "btn-dark",
      "btn-link",
      "btn-outline-primary",
      "btn-outline-secondary",
      "btn-outline-success",
      "btn-outline-danger",
      "btn-outline-warning",
      "btn-outline-info",
      "btn-outline-light",
      "btn-outline-dark"
    ];
    var bgCl;
    for (let i = 0; i < elClass.length; i++) {
      if (arrCol.indexOf(elClass[i]) !== -1){
         bgCl = elClass[i];
         break;
      }
    }
    if (bgCl) $('#changed5').removeClass(bgCl);
  }
  $('#changed5').addClass(col);
  $('.return5').text(col);
}

DOM

<div id="changed6" class="my-4 p-3 border border-2 shadow">
  <h4 class="mb-3">Example #6</h4>
</div>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';

const myPal6 = new BootstrapColorPalette({
  "selector" : "#example6",
  "func": ChangeBorder,
  "type": "<span class="text-danger">border</span>"
});

function ChangeBorder(col){
  var elClass;
    if ($('#changed6').attr('class')){
    elClass = $('#changed6').attr('class').split(' ');
    var arrCol = [
      "border-primary",
      "border-secondary",
      "border-success",
      "border-danger",
      "border-warning",
      "border-info",
      "border-light",
      "border-dark"
    ];
    var bgCl;
    for (let i = 0; i < elClass.length; i++) {
      if (arrCol.indexOf(elClass[i]) !== -1){
         bgCl = elClass[i];
         break;
      }
    }
    if (bgCl) $('#changed6').removeClass(bgCl);
  }
  $('#changed6').addClass(col);
  $('.return6').text(col);
}

DOM

<h4 id="changed7" class="my-4 p-5 shadow">Example #7</h4>

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';

const myPal7 = new BootstrapColorPalette({
  "selector" : "#example7",
  "func": ChangeRGBA,
  "type": "<span class="text-danger">rgba</span>"
});

function ChangeRGBA(col){
  $('.return7').text(JSON.stringify(col,null,2));
  $('#changed7').css({"background" : `rgba(var(${col.color}),${col.opacity})`});
}

CSS

@import "bootstrap/scss/bootstrap";

JS

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import BootstrapColorPalette from 'color-palette-for-users';

const myPal8 = new BootstrapColorPalette({
  "selector" : "#example8",
  "type": "<span class="text-danger">main</span>",
  "func": ChangeMain
});

//Retur an array of the form:

[
  {
    "name": "Body",
    "color": "--bs-body-bg",
    "value": "#ffffff",
    "type": "hex"
  },
  {
    "name": "Body RGB",
    "color": "--bs-body-bg-rgb",
    "value": "255,255,255",
    "type": "rgb"
  }
  ...
]

function ChangeMain(arr){
  for (var i = 0; i < arr.length; i++) {
    getClassByName(':root').style.setProperty(arr[i].color, arr[i].value);
  }
}

function getClassByName(className) {
  for (var ssNum in document.styleSheets)
    for (var ruleNum in document.styleSheets[ssNum].cssRules)
      if (document.styleSheets[ssNum].cssRules[ruleNum].selectorText)
        if (document.styleSheets[ssNum].cssRules[ruleNum].selectorText.indexOf(className) == 0)
          return document.styleSheets[ssNum].cssRules[ruleNum];
}