Ionic set global variables through Javascript with values from API

Question

I'm building an ionic web app and I have an API datasource which includes basic theming ie: Save button color, text color, background color, cancelBtn color, etc... these are currently in Hex format.

What I would like to do is integrate these values into my ionic theming. Something along the lines of:

LOCATED in variables.scss
:root {
  --ion-editBtnColor: var(editBtnColor)
  --bs-font-sans-serif: "Lato";
  --ios-font-family: "Lato";
}

LOCATED in .ts file:
themeColors = {
addSaveBtnColor: "#6bbd54"
backgroundColor: "#1f80b8"
cancelBtnColor: "#bf9a04"
editBtnColor: "#bd4639"
eventsBtnColor: "#325467"
homeBtnColor: "#42a5cf"
pageHeadingColor: "#fff111"
projectLogo: "<img style='background-color:#ffffff' src=''>"
recID: 8
textLabelColor: "#ffffff"
}

editBtnColor = themeColors.editBtnColor;

All searching/documentation I've been finding are more related to me setting a scss file for different themes, and conditionally setting the theme.

I don't really have a code example, as my code currently has been adding custom classes with the updated values, but that's not playing with Ionic well.

API Example

{
addSaveBtnColor: "#6bbd54"
backgroundColor: "#1f80b8"
cancelBtnColor: "#bf9a04"
editBtnColor: "#bd4639"
eventsBtnColor: "#325467"
homeBtnColor: "#42a5cf"
pageHeadingColor: "#fff111"
projectLogo: "<img style='background-color:#ffffff' src=''>"
recID: 8
textLabelColor: "#ffffff"
}