You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi everyone, I'd like to ask you how to add CSS Variables on head tags.
I'm using it on my project with Next.js to change the colour theme from light to dark which is incredible fast and smooth. Everything's working fine but I wonder where to inject this script on Storybook.
The idea is to inject the default "light" theme by default on:
<head>
<style> Default fallback CSS Variables here </style>
</head>
and after that, on:
<body>
<script> Checking user preferred scheme theme </script>
</body>
I'm using small TypeScript script to check the user preferred color scheme and last check localStorage if user was already setting the theme mode that he want.
So I'm reading the docs and the only way is to using:
manager-head.html for Storybook’s UI (the “manager”)
preview-head.html for Storybook's Canvas (the "preview" iframe)
Is it any native types that I could use and connect to Storybook API to inject CSS Variables before everything's is loading?
I'm just want to add the new Toolbar button to change the theme swapping the colours using CSS Variables.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi everyone, I'd like to ask you how to add CSS Variables on head tags.
I'm using it on my project with Next.js to change the colour theme from light to dark which is incredible fast and smooth. Everything's working fine but I wonder where to inject this script on Storybook.
The idea is to inject the default "light" theme by default on:
and after that, on:
I'm using small TypeScript script to check the user preferred color scheme and last check localStorage if user was already setting the theme mode that he want.
So I'm reading the docs and the only way is to using:
and putting code like this for example:
Is it any native types that I could use and connect to Storybook API to inject CSS Variables before everything's is loading?
I'm just want to add the new Toolbar button to change the theme swapping the colours using CSS Variables.
Thanks and waiting for your suggestions.
Beta Was this translation helpful? Give feedback.
All reactions