[discussion] Idea about themes

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.


@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).

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


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