Using themes with Vite #1383
Unanswered
leo-petrucci
asked this question in
Q&A
Using themes with Vite
#1383
Replies: 1 comment 1 reply
-
|
Ended up doing this, but lmk if there's a better way: |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
You could write a small vite plugin that modifies Maybe something like this: const injectThemeClassname = () => {
return {
name: 'html-transform',
async transformIndexHtml(html) {
const { theme } = await import("path/to/theme.css.ts");
return html.replace(
/<body>/,
`<body class="${theme}>"`,
);
},
}
}Maybe there's a simpler way to do this, but this should do the job. See https://vitejs.dev/guide/api-plugin.html#transformindexhtml for more details. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I'm in the process of moving some apps to partially use Vanilla Extract, but I'm currently a bit stuck with Vite.
In Next.js I'm able to pass my theme:
into
<body>by creating alayout.tsxcomponent.However in Vite
<body>is part of the staticindex.htmlThis then gets populated client-side with
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render.If I wrap my component tree in a div and make my theme available there it works in 90% of cases, but not for elements that have been rendered at the root with
React.Portal.Any suggestions on how to tackle this?
Beta Was this translation helpful? Give feedback.
All reactions