using css variables from a cdn in theme file?

[rramsey]

We have a file of css variables for approved common colors sitting on a cdn. We are a mix of Vue, Angular, and Stencil in our shop, depending on the app, so it is good to have a single source of truth for these colors across all frameworks.

For our Vue apps, I've been looking at Vuetify themes and they've been working great. To keep all of the css color variables on one system, I'd like to be able to pull in that css file and use those same variables. What I have right now is something like:

import { type ThemeDefinition } from 'vuetify';

const myBlack = "#151515";
const myWhite = "#fdfdfd";
const myVariables: { [index: string]: string | number } = {
  'border-radius': '4px',
  'outline-offset': '2px',
  'font-size': '18px';
};

const commonColors:  { [index: string]: string } = {
  "my-black": myBlack,
  "my-white": myWhite
};

const myDarkTheme = {
  dark: true,
  colors: {
    surface: '#151515',
    'on-surface': '#ffffff6c',
  },
  variables: myVariables
};

const myLightTheme = {
  dark: false,
  colors: {
    'on-surface': '#151515',
    'surface': '#ffffff6c',
  },
  variables: myVariables
};

myLightTheme.colors = { ...myLightTheme.colors, ...commonColors };
myDarkTheme.colors = { ...myDarkTheme.colors, ...commonColors };

export { myLightTheme, myDarkTheme };

Which cuts down on repetition and makes it easy to update colors. I'd like to stop duplicating what is in our cdn though. I can't really use an @use or @import to import a css file from a url here. Since it is just javascript, I could use use fetch and do something like this:

const cdnURL = 'https://server/path'
const response = await fetch(cdnURL);
const data = await response.text();

Then parse data and grab the variables and their values and push them into the colors object. That seems a pain though. It seems like there ought to be a better way. The only other thing I could think of was an npm script that did something similar on build, but then I'd be stuck with outdated colors when we have to update them. But that's also a problem with the current system.

Any ideas?