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
Uh oh!
There was an error while loading. Please reload this page.
-
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