media queries in themes

[y-nk]

I'm trying to achieve having media queries applied in a theme (depending on a contract).

With a css such as:

import { createThemeContract } from "@vanilla-extract/css";

export const contract = createThemeContract({
  colors: {
    background: "", // if put null, causes type issues
    foreground: "" // if put null, causes type issues
  }
});

export const lightTheme = createTheme(contract, {
  colors: {
    background: "#fff",
    foreground: "#000"
  }
});

export const darkTheme = createTheme(contract, {
  colors: {
    background: "#000",
    foreground: "#fff"
  }
});

and implemented as:

import { contract  } from "./themes/theme.css";

export const demo = style({
  background: contract.colors.background,
  color: contract.colors.foreground
});

...the goal is that the demo component would automatically toggle light/dark color scheme with that amount of code. I understand this can be done more explicitly with sprinkles, but sprinkles seems not to allow "any css prop" and you'd need to list explicitly all, which is not convenient imho.

I have "hacked" something which works, but it feels like building against the library. https://codesandbox.io/s/rough-meadow-93conb?file=/src/themes/dynamic.css.ts

import { createThemeContract } from "@vanilla-extract/css";

export const contract = createThemeContract({
  colors: {
    background: "", // if use null, breaks the keys in style()
    foreground: "" // if use null, breaks the keys in style()
  }
});

// here we dont use createTheme because it doesnt support media queries :(
export const dynamicTheme = style({
  vars: {
    [contract.colors.background]: "#fff",
    [contract.colors.foreground]: "#000"
  },

  "@media": {
    "(prefers-color-scheme: dark)": {
      vars: {
        [contract.colors.background]: "#000",
        [contract.colors.foreground]: "#fff"
      }
    }
  }
});

So yeah, it works but i think it's not the right construction since we use "style" to create a theme with only vars inside. Hopefully the types are flexible enough to make it work, but I wished it would be as easy as:

const themedQueries = {
  "(prefers-color-scheme: light)": {
    colors: {
      background: "#fff",
      foreground: "#000"
    },
  },

  "(prefers-color-scheme: dark)": {
    colors: {
      background: "#000",
      foreground: "#fff"
    },
  },
}

const themeClass = createMQTheme(
  contract, {
    themedQueries,
    defaultQuery: "(prefers-color-scheme: light)",
   },
 )

I created something which almost works, but not really :) the theme generation fails for an unknown reason, although the inputs i'm passing is 100% similar to what i'm passing manually, so i'm kinda clueless of why it breaks. https://codesandbox.io/s/rough-meadow-93conb?file=/src/themes/createMQTheme.ts

[y-nk]

@markdalgleish any chance you'd give a hint on how to solve this properly?

[susickypavel]

Hi 👋, I'm just letting you know that the code sandboxes aren't available anymore.

[y-nk]

hi @susickypavel sorry for long time without answer. due to the lack of answer/support i just dropped away from vanilla extract altogether. 🤷

[mkarajohn]

Bump

[sjc5]

Why not just do the dynamic css variable defs in a normal CSS file based on preferred media scheme or what-have-you, and then set those css vars as the values of some vanilla-extract style?

[p7gg]

I think this is the simplest solution I could come up with:
https://codesandbox.io/p/sandbox/ve-playground-forked-mct3xh?file=%2Fsrc%2Fglobal.css.ts&selection=%5B%7B%22endColumn%22%3A27%2C%22endLineNumber%22%3A1%2C%22startColumn%22%3A27%2C%22startLineNumber%22%3A1%7D%5D

[y-nk]

[p7gg]

Oh, my bad, I think I deleted the sandbox by mistake, I was able to recover it tho:
https://codesandbox.io/p/sandbox/ve-dynamic-theme-contract-mct3xh?file=%2Fsrc%2FApp.tsx

[y-nk]

no problem :) it's mostly for other people stumbling on this thread. tbh i've moved away from this issue a while ago.

after checking the sandbox, the workaround works but it's on a global level ; where my original question to @markdalgleish was about doing the same at component level.

[astahmer]

related: #977