#Bug: When I click a Navigation link in Dark mode my Portfolio theme flashes the light theme

65 messages · Page 1 of 1 (latest)

craggy marlin
#

CONTEXT
I am pretty new to Astro and I am going through the Build a Blog tutorial. I am trying to add light mode and dark mode to my website.

PROBLEM
However, I have a bug. When I am in Dark mode, and I click on a link in my Navigation Bar. The light mode flashes. I don't know why this happens. I may be missing some important knowledge on how <scripts> are executed in Astro or there me a bug that has slipped through the cracks.

REQUEST
Would really appreciate if anyone can help me find it. Here is the link to my GitHub Repo: https://github.com/fumzy123/astro-blog-project/tree/style-component-and-pages

GitHub
GitHub - fumzy123/astro-blog-project at style-component-and-pages

So I attended a Google Developer Conference in St. John's and a speaker name dropped this framework called Astro, and I was like I gotta check it out. This is my first ever Astro Project. E...

green sleet
#

Hello @craggy marlin, I can't see your toggle button in your deployed app.

craggy marlin
#

@frosty totem
I fixed the bug that @halcyon pine pointed out here in my code: #general message

BUT

I am getting a different bug now. I get a quick flash of the light theme before the dark theme settles in. This happens when I am in darkmode and I click a Navigation link.

I seem to be missing some fundamental knowledge about how Astro is working with pages or how page swithes or reloading runs in Astro or how script tags are executed.

Because I don't understand how a Navigation click is affecting the theme.

green sleet
#

your last deployment crashed

#

tho

craggy marlin
green sleet
#

oh nvm

craggy marlin
#

IThanks for trying to help. I am going to try and see if I can update Netlify to deploy my style-component-and-pages branch.

green sleet
craggy marlin
#

You can take a look.

green sleet
#

it doesn't seem to be flashing on my end

craggy marlin
#

Okay that is very strange

#

It has stopped flashing too on my end.

green sleet
#

weird

#

if it happens again

#

let us know

craggy marlin
#

Will do.

#

In the mean time is there anything you can share about how Astro pages switch pages. When you switch from one page to another through a link are all the script tags in each component executed ?

green sleet
#

which browser are you using?

craggy marlin
#

I am using chrome

#

I mean edge

green sleet
#

can you run npx astro info?

#

on the cli

craggy marlin
#

I just pushed again to my github branch. Try checking again.

halcyon pine
#

FOUC can be annoying for sure, but in general so you know

Astro by default ( aka without view transitions ) switches pages the same way your browser does when you click a link. It’s a “MPA” multiple page app structure meaning every page is completely separate.

So every script on your page will run, in astro a <script> tag with no extra attributes will be “bundled and optimized” meaning it is transformed into a module type script and the typescript is turned into minified javascript

craggy marlin
#

If you are able to re-produce the bug.

green sleet
#

nothing is wrong with your latest deploy

#

i think there might be something going on with edge

craggy marlin
halcyon pine
#

always good to shut everything down every now and then and restart and use incognito tabs

#

Browsers can cache scripts etx

#

etc

green sleet
craggy marlin
halcyon pine
#

Yup it should

snow onyx
#

For scripts changes classes on body, you'll typically want them to execute right as the initial layout is being parsed by the browser. What I mean by that, is that you most likely want the script to be in right next to <body> in your layout, and in the case of Astro, you also want the is:inline attribute, like this: https://github.com/Princesseuh/erika.florist/blob/bfbf1a0e0f9b05ddfb0f4aa447ec983e12191703/src/layouts/BaseLayout.astro#L59

GitHub
erika.florist/src/layouts/BaseLayout.astro at bfbf1a0e0f9b05ddfb0f4...

My website. Contribute to Princesseuh/erika.florist development by creating an account on GitHub.

craggy marlin
green sleet
craggy marlin
snow onyx
#

I edited my message with more details!

#

The behaviour you're seeing on your website isn't exactly related to how the routing system works, but moreso how JavaScript is executed in browsers. Since Astro hoists your script into the head of the page and adds the type="module" attribute to it, it gets executed after your entire page has been loaded, so the browser has the time to show the page before the script executes

craggy marlin
craggy marlin
snow onyx
#

You'd need to move the script tag to your main layout, right after <body> and add the is:inline attribute to it

#

(just like in the link I shared)

#

You can keep the click handler in your component, however

#

Only the theme switching on the body parts needs to happen at that time

craggy marlin
#

What benefit does adding the is:inline template directive provide in terms of applying the theme before the body is loaded ?

snow onyx
#

Otherwise Astro hoists the script tag to the <head> and adds the type="module" attribute automatically, making the script async

#

With is:inline, Astro leaves the script tag as written, where it was written

craggy marlin
snow onyx
#

Ah yeah, if the component is early enough in the page that will also work!

craggy marlin
#

I see its becoming clear

#

Thank you

#

Now I have a Question

how do you go about knowing where to add your scripts?

The Build a Blog tutorial which I am following places the script for the theme change in the ThemeIcon component.

Do you have any best practices of how you think about adding scripts to your components or to your page as a whole?

I guess. How do you make decisions about where to place your <script></script> tags is what I am asking

snow onyx
#

I've never put a script there apart from the theme change