Fresh best way to include script tag in html | Deno | Page 1

static yacht Nov 11, 2022, 4:01 PM

#

I'm working on a darkmode toggle on my fresh site and I want to export a small script tag as part of the rendered html (to avoid the "flash" of light mode that can happen before the .js files are loaded)

This is how I am doing it in my island:

return (
      <>
        <Head>
          <script>
            let dark = localStorage.getItem('darkmode');

            document.querySelector(':root')?.classList.toggle('dark', dark === 'true');
          </script>
        </Head>
      </>

I'm wondering if there is a more elegant way to do this?

alpine fulcrum Nov 11, 2022, 4:08 PM

#

A workaround would be to set darkmode as a cookie and assign the dark class server side

static yacht Nov 11, 2022, 4:14 PM

#

Would that work with a toggle button on the page? Sending a request to the server to set/unset a cookie seems like a pain

alpine fulcrum Nov 11, 2022, 4:20 PM

#

It's basically this https://github.com/AnInternetTroll/registry/blob/master/src/routes/set_cookie.ts
https://github.com/AnInternetTroll/registry/blob/7f4fd2af907b45db5142e3480bcefaa4989a7eed/src/utils/render.tsx#L84

GitHub

registry/set_cookie.ts at master · AnInternetTroll/registry

A simple registry written in deno for deno and the web - registry/set_cookie.ts at master · AnInternetTroll/registry

#

I think you can set cookies client side as well if a request costs too much in this economy

static yacht Nov 11, 2022, 4:25 PM

#

makes sense. How to you assign the class to the document root server side though?

alpine fulcrum Nov 11, 2022, 4:26 PM

#

The second link has a class={theme} thing, but idk about fresh. Look into app.tsx

static yacht Nov 11, 2022, 4:29 PM

#

Fresh just has the undocumented _app.tsx but the example that the deno site uses doesn't have the root <html> element in it. https://github.com/denoland/dotland/blob/main/routes/_app.tsx

alpine fulcrum Nov 11, 2022, 4:32 PM

#

Set on div then

weak thicket Jan 5, 2024, 5:58 AM

#

alpine fulcrum Set on div then

Long time no see! Welcome back!

broken verge Jan 5, 2024, 6:02 AM

#

@weak thicket this thread was dead, and I accidentally revived it today (while searching for Troll's messages for something), then deleted my message

#

sorry for the noise, everyone