Dark mode toggle in Astro | Astro Lounge | Page 1

brittle beacon Nov 3, 2022, 2:38 PM

#

I face a UI flick when using dark mode toggle in Astro when I move to new pages.
Website - https://vkleetcodesolutions.netlify.app/
Github - https://github.com/jsvigneshkanna/leetcode_solved_programs

GitHub

GitHub - jsvigneshkanna/leetcode_solved_programs: Hey 🥸, This is pl...

Hey 🥸, This is placeholder project where I would be storing my solved Leetcode programs. Come lets all learn together from this Project 🍻 - GitHub - jsvigneshkanna/leetcode_solved_programs: Hey 🥸, ...

cedar pewter Nov 3, 2022, 3:10 PM

#

Try to use <script is:inline> in header to determine the current color mode

#

Currently your color mode is not determined until your darkModeToggler component is downloaded and executed. This will be too late.

#

This is how I did it: https://github.com/mrcaidev/mrcai.dev/blob/master/src/components/Head/BaseHead.astro#L39

GitHub

mrcai.dev/BaseHead.astro at master · mrcaidev/mrcai.dev

Yuwang Cai's portfolio and blog. Contribute to mrcaidev/mrcai.dev development by creating an account on GitHub.

#

Astro official example uses this approach too: https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/docs?file=/src/components/HeadCommon.astro:710-1063

CodeSandbox

@example/docs - CodeSandbox

@example/docs using @algolia/client-search, @astrojs/preact, @astrojs/react, @docsearch/css, @docsearch/react, @types/node, @types/react, @types/react-dom, astro

brittle beacon Nov 3, 2022, 3:38 PM

#

Great, will check

stiff aspen Nov 3, 2022, 5:59 PM

#

Hey there! I'm having the same issue, and the is:inline does fix it, however I'm wondering if there's a different way to achieve this without inlining the script? I was hoping to be able to import this script and also maybe bundle it with others, but that's not possible when using is:inline if I'm understanding right (or what I've tried at least).

#Dark mode toggle in Astro