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 (_) {}

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

Head

tags from Solid.js like this:

<script innerHTML={`console.log("test");`} />

<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?

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 (_) {}

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 (_) {}

Head

Head

tags from Solid.js like this:

<script innerHTML={`console.log("test");`} />

<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?

Small preload script after document load but before page load

Similar Threads

Small preload script after document load but before page load

Similar Threads

Similar Threads

Similar Threads