Dynamic theming with remotely fetched theme data

[jwpaine]

Hello,

I am working on a project (remix 2.8.1 and vanilla-extract/css 1.14.2 ): https://github.com/jwpaine/base

I'd like to query theme data from a GraphQL server, and pass the theme data (key-value pairs) to createTheme. I'm running into two issues. The first and biggest roadblock is:

Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
    at Object.getFileScope (/home/username/Projects/base/node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.cjs.dev.js:35:11)
    at generateIdentifier (/home/username/Projects/base/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:175:49)
    at Module.createTheme (/home/username/Projects/base/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.dev.js:325:24)

dynamicTheme.ts is responsible for fetching and creating the theme:

import { createTheme } from '@vanilla-extract/css';
import { vars } from './styles.css';
// import client from '~/graphql/client';
// import { GET_THEME } from '~/graphql/queries';

export const fetchTheme = async (domain: string) => {
  // Fake response for testing purposes
  const fakeResponse = {
    theme: {
      color: {
        brand: 'green'
      },
    },
  };

  const themeData = fakeResponse.theme;

  return createTheme(vars, themeData);
};

styles.css.ts houses theme contract and styles:

import { createThemeContract, globalStyle } from '@vanilla-extract/css';

export const vars = createThemeContract({
  color: {
    brand: null,
  },
});

// Remove margin and padding from body and use the theme variable for background
globalStyle('body', {
  margin: '0',
  padding: '0',
  background: vars.color.brand,
});

...and root.tsx loads the dynamically generated theme:

import { fetchTheme } from '~/theme/dynamicTheme';

export async function loader({ request }: LoaderFunctionArgs) {
  // replace this with a GraphQL query
  const theme = await fetchTheme('localhost');
 return { theme };
}

I'm hoping someone might point me in the right direction? Is dynamic theming like this possible with vanilla-extract?

Thank you!
John

[askoufis]

createTheme generates static CSS from its input at build time. There's currently no way to generate CSS at runtime with Vanilla Extract, so your current implementation will not work.

If the thing you want to fetch is just the theme values/tokens, then you could try defining your theme contract upfront (at build time), and then dynamically assigning values/tokens that you've fetched at runtime using the @vanilla-extract/dynamic package.