Changing light theme variables or force a theme on layout level (Nuxt)

[M-Barari]

Hi, I wanna go dark but not with vuetify dark mode! I'm going to use nuxt-color-mode package, but theme--light class won't allow it as it manipulate many variables. so I tried to change $material-light value with $material-dark but didn't work.

// my dark.scss
$material-light: map-deep-merge(
  (
    'status-bar': (
      'regular': map-get($shades, 'black'),
      'lights-out': rgba(map-get($shades, 'black'), 0.2)
    ),
   .....
   .....
   .....
  ),
  $material-light
);
@import '~vuetify/src/styles/styles.sass';

also tried v-theme-provider but only works for children (wont change background) and cant wrap both <cmsnav /> and <Nuxt /> in it and must do it separately :

// my cms layout
<template>
<v-app>
  <v-theme-provider light>
    <cmsnav />
  </v-theme-provider>
  <v-theme-provider light>
    <Nuxt />
  </v-theme-provider>
</v-app>
</template>

<script>
import cmsnav from '@/components/cms/cmsnav.vue'
export default {
    components: {
        'cmsnav': cmsnav,
    },
}
</script>

so is there any way to change theme? or at least force my cms layout (nuxt layout) to use light theme and there layouts use provided theme mode ??

p.s. : don't want to change it in each layout like this:

// my cms layout
<template>
  <v-app>
    <cmsnav />
    <Nuxt />
  </v-app>
</template>

<script>
import cmsnav from '@/components/cms/cmsnav.vue'
export default {
    components: {
        'cmsnav': cmsnav,
    },
    created(){
        this.$vuetify.theme.dark = false
    }
}
</script>