How to effectively load new color theme from localStorage?

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 :slight_smile:

I have attached relevant pics

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

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) {
} else {
styles = { /* default styles */}

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

import $ from 'dom7';

1 Like

Thank you very much…

Is this the right way?

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

1 Like