SolidJSS
SolidJS•4y ago•
4 replies
RATIU5

Small preload script after document load but before page load

I'm trying to port the theme toggle from tailwindcss.com to Solid.js. I'm getting stuck at this part. The following script:
try {
  if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.documentElement.classList.add("dark");
    document.querySelector('meta[name="theme-color"]')?.setAttribute("content", "#0B1120");
  } else {
    document.documentElement.classList.remove("dark");
  }
} catch (_) {}

needs to load after the base document loads in order to read localstorage but before the page elements load to prevent a theme change flash. (See the tailwind implementation https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/pages/_document.js)

I tried adding a script inside the Head tags from Solid.js like this: 
<script innerHTML={`console.log("test");`} />

But it didn't work and I got no log in the console.

Could anyone point me to the direction to add a custom script at this point in the page render?
Was this page helpful?