How to effectively load new color theme from localStorage?

ravitemer · August 31, 2021, 1:42pm

Hello!
I am working on a PWA with split view using framework7-svelte .
In the settings tab, an user can change color theme dynamically, and next time the app opens, his preferenced color theme will load.

The Problem I’m having is when the app loads, there is a small interval where it shows the default color theme then loads the stored color theme.

In App.svelte, f7 params , on : init

Is there anywhere better I can modify the css so that the default blue color doesn’t appear.

Thanks in advance

I have attached relevant pics

nolimits4web · August 31, 2021, 1:57pm

You should do it before app init, in your main JS file file (app.js or main.js)

ravitemer · August 31, 2021, 2:09pm

Thank you very much…
But here is my app.js file… How can i get f7.${‘html’} or app.something before new App({f7params}).

function loadStyles({layoutColor,themeColor}) {
/*What to do here */
}

let styles = await localForage.getItem(“styles”);
if (styles) {
loadStyles(styles)
} else {
styles = { /* default styles */}
}

Thank you…could you please tell me how to do that.

nolimits4web · August 31, 2021, 2:22pm

import $ from 'dom7';

$(...)

ravitemer · August 31, 2021, 2:49pm

Thank you very much…

Is this the right way?

edit : Thanks that works!! GOD BLESS YOU AND FRAMEWORK7