Svelte and F7's theme css variables issue

Questions
1

Hello,
I am trying to style the F7 theme for a Svelte app with :root variables but I can’t seem to make it work the way I would like.

Right now I am doing the following:
app.js

...
import other generated f7 resources here
...
import './sass/app.scss'; //this is the file that I would like to set the variables in

import App from './components/app.svelte';

Framework7.use(Framework7Svelte);

const app = new App({
    target: document.getElementById('app')
});

app.scss

:root {
    --f7-color-primary: #ff6b22;
    --f7-theme-color: #ff6b22;
    --f7-theme-color-rgb: 255, 107, 34;
    --f7-theme-color-shade: #f85200;
    --f7-theme-color-tint: #ff864b;
}

However this doesn’t seem to be working.

I’ve also tried importing the scss file inside my app.svelte

<style global>
@import 'path/to/app.scss';
</style>

But this also doesn’t apply the variables.

I can make it work by changing my app.svelte to look like this:

...
    let themeParams = {
        colors: {
            primary: '#ff6b22'
        }
    };
...
<App safeAreas {...f7params} {...themeParams}>
...

As well as passing the variables as props to other elements, however this doesn’t seem right as there are other things that I would like to change and it would become quite messy.

What am I doing wrong and how I can achieve this goal in a proper way?

Any help would be appreciated.
Thanks.

2

Look at the generated CSS variables, your rules must be stronger to overwrite them Color Themes | Framework7 Documentation