Suggestion on Dark theme enable - Casper

#1

Hi,

I have modified the CSS of my Ghost blog to enable a dark theme.

Currently what I am doing is, add dark CSS class to the body element on the document.ready event by checking a property stored in local storage.

As you can see/understand, it takes some time to fire the document.ready event with every page load and initially the white theme has been set. This is resulting in a white flash before enabling the dark theme at every page load.

Press Alt + N together on technews.lk if you want to test it yourself.

Can anybody suggest me a solution for this?

  • Can we use a session and load a CSS file based on that?
  • Can a service worker do the CSS class addition? (I guess it’s not possible since the response is readonly in service workers)

Thank you. :slight_smile:

#2

I’m not using ember for my blog, and if you should inspect your dev tools, you’ll see the body tag attaches the dark after the DOM is loaded. My approach to this, in your case, is to use js to attach that css before the page is loaded. Or, inline a script to attached the css before or after the body tag :man_shrugging:t4:

Im still not sure this is possible. But something I’ll explore with next.

1 Like
#3

Thank you very much for the response. I was already using an inline script for that. Finally I found the issue here. I was using Cloudflare Rocket Loader™ technology to improve JS performance.

When It’s enabled, it seems all inline javascripts also waiting till the document.ready. I just turned it off and now I have the expected outcome.

If someone’s looking for the same here’s what I’ve done.

Thank you! :slight_smile:

1 Like
#4

Love it. For reference, is this your own theme?

#5

I have done some modifications to the Casper theme over a year. That’s all.

#6

Well it looks quite nice, I think.

Are you willing to share some of the work you did, mostly with regards to the theme and also the dark mode?

#7

Since this is tightly bound with a business, I cannot share the theme, but I might be able to help you guys to improve yours… If you need, I can share the code snippets to get the dark mode on…

#8

That would be nice! I think it’s a nice feature to have.

#10

Here you go! :slight_smile:

closed #11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.