generate tint, share.js

let getColor = '{{ store.colors.primary }}';
let getTextColor = '{{ store.colors.text_of_primary_bg }}';



if (getColor != '' && getColor != '#ffffff' && getColor != '#fff' && getColor != '#FFFFFF' && getColor != '#FFF') {
  getColor;
} 
else {
  getColor = '#8661a3';
}




if (getTextColor != '' && getTextColor != '#ffffff' && getTextColor != '#fff' && getTextColor != '#FFFFFF' && getTextColor != '#FFF') {
  getTextColor;
} else {
  getTextColor = "var(--bs-dark)";
}




let rgb = getColor
  .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
  .substring(1)
  .match(/.{2}/g)
  .map((x) => parseInt(x, 16));

let r = rgb[0];
let g = rgb[1];
let b = rgb[2];

let pad = (hex) => {
  return hex.length === 1 ? '0' + hex : hex;
};

let tint = (getColor, tint) => {
  let red = Math.round((parseInt(getColor.substring(1, 3), 16) * (100 + tint)) / 100);
  let green = Math.round((parseInt(getColor.substring(3, 5), 16) * (100 + tint)) / 100);
  let blue = Math.round((parseInt(getColor.substring(5, 7), 16) * (100 + tint)) / 100);

  if (tint === 0) {
    return [red, green, blue];
  } else {
    red += Math.round(tint * (255 - red));
    green += Math.round(tint * (255 - green));
    blue += Math.round(tint * (255 - blue));

    red = red.toString(16);
    green = green.toString(16);
    blue = blue.toString(16);

    return '#' + pad(red) + pad(green) + pad(blue);
  }
};

let shade = (getColor, shade) => {
  let red = Math.round((parseInt(getColor.substring(1, 3), 16) * (100 - shade)) / 100);
  let green = Math.round((parseInt(getColor.substring(3, 5), 16) * (100 - shade)) / 100);
  let blue = Math.round((parseInt(getColor.substring(5, 7), 16) * (100 - shade)) / 100);

  red = Math.round((1 - shade) * red);
  green = Math.round((1 - shade) * green);
  blue = Math.round((1 - shade) * blue);

  red = red.toString(16);
  green = green.toString(16);
  blue = blue.toString(16);

  return '#' + pad(red) + pad(green) + pad(blue);
};

let tinted = tint(getColor, 0.1);
let shaded = shade(getColor, 0.1);

let rgbaColor = (r, g, b) => `${r} ${g} ${b}`;
let rgbColor = (r, g, b, a) => `${r}, ${g}, ${b}`;

document.documentElement.style.setProperty('--color-primary', getColor);
document.documentElement.style.setProperty('--color-accent', shaded);
document.documentElement.style.setProperty('--color-primary-rgba', rgbaColor(r, g, b, 1));
document.documentElement.style.setProperty('--bs-primary-rgb', rgbColor(r, g, b));

document.documentElement.style.setProperty('--text-color-primary-bg', getTextColor);


let accordion = document.createElement('style');
accordion.type = 'text/css';
accordion.innerHTML = `.accordion { --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23${getColor.substring(
  1,
)}'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important; }`;
document.getElementsByTagName('head')[0].appendChild(accordion);

let formswitch = document.createElement('style');
formswitch.type = 'text/css';
formswitch.innerHTML = `.form-switch .form-check-input:focus {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23${tinted.substring(
  1,
)}'/%3e%3c/svg%3e") !important;}`;
document.getElementsByTagName('head')[0].appendChild(formswitch);