Svelte and F7's theme css variables issue

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:

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';


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


: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';

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.

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