[SOLVED] Apply material theme blue in v4

Questions
1

Hi,

I want to apply the material theme v3 for the v4. But i’m a beginner and i don’t know how to do it.

I develop with vue.js and ES module. I think a simple method (or apply config variable) for this and do not go through this code (for example of course) :

:root {
  --f7-theme-color: #007aff;
  --f7-theme-color-rgb: 0, 122, 255;
  --f7-theme-color-shade: #0066d6;
  --f7-theme-color-tint: #298fff;
}
.text-color-theme {
  --f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-theme {
  --f7-theme-color-bg-color: var(--f7-theme-color);
}

Thanks for your responses

2

i applied this code, it’s functional :

<f7-navbar text-color-primary="white" color="white" bg-color="blue" text-color="white">
  <f7-nav-title :title="this.title" :subtitle="this.subtitle"></f7-nav-title>
</f7-navbar>

but is it a good code or no ?

3

Go to Kitchen Sink preview -> Color Themes and check the Bars Style section

4

Ok thanks, i found solutions to my needs.