[discussion] Idea about themes

Questions
1

Webpack + Vue + F7

I want to change the theme color, which is defined in framework7.less

@themeColorIos: #007aff;
@themeColorMd: #2196f3;

  1. Solution A is copy framework7.css and replace every #007aff to my color OR clone f7 repo and build my own css file. => this is bad because every time f7 updates, new css needs to be updated manually.

  2. Solution B (the one I’m using). add f7-theme.less in src/css, import framework7.less, set ff. and change import of framework7.css to this less. webpack works fine but some components’ style is missing. I found that not all components are listed in framework7.less. then I added imports for all components.

src/css/f7-theme.less

@import '../../node_modules/framework7/framework7.less';

@themeColorIos: #2d3e50;
@themeColorMd: #2d3e50;

@import url('../../node_modules/framework7/components/accordion/accordion.less');
@import url('../../node_modules/framework7/components/actions/actions.less');
....

for now this hack is working great. but what if f7 add a new components?

So my suggestion is:

Maybe f7 could provide a less file, with everything (components, vars) ready, then what i need to do is

@import '../../node_modules/framework7/framework7.less';

@themeColorIos: #2d3e50;
@themeColorMd: #2d3e50;

And what if other vars could be overwritten here? eg. @barsBg, @navbarBg, @toolbarBg? (not supported for now).

2

The way you use it now is correct, things will change in v4 where it will use CSS Variables

2 Likes
3

Please, use variables for anything (including fonts, sizes (font-size and, for instance, header height) and all colors (even those little gray lines =P))

1 Like