SolidJS•2y ago

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

2 Replies

Unknown User•2y ago

Message Not Public

RATIU5OP•2y ago

Browser outputs:

<Head>
  <script data-hk="0-0-0-0-0-0-0-0-0-0-4">console.log("test");</script>
  ...
</Head>

<Head>
  <script data-hk="0-0-0-0-0-0-0-0-0-0-4">console.log("test");</script>
  ...
</Head>

But nothing in the console. I'll try it without the quotes as that should work. Adding it directly between script tags causes syntax errors from adding logic JS inside JSX. I got it working. My console defaulted to errors only.

Gaming

Programming

Small preload script after document load but before page load