Use Vuetify Theming

[chrismayer]

It would be very handy to use the Vuetify theming mechanism. Goal would be to get rid of the baseColor property in the app-conf, which has to be passed through all components and instead a defining an optional Vuetify theme in the app-config.
Default style of a Wegue app could be a predefined standard Vuetify theme.

See

• https://v2.vuetifyjs.com/en/customization/presets/
• https://vuetifyjs.com/en/features/presets/#generator
• https://material.io/design/material-theming/implementing-your-theme.html#color

[ntma]

Hi there,

How is the progress on this? I might be able to contribute.

[JakobMiksch]

Hi @ntma , it seems there is no current work done on this topic. Hence, a contribution would be very welcome.
Feel free to ask if there any questions. There is a also a Wegue chat on gitter

[ntma]

Perfect, I'll see what I can do 👍

[fschmenger]

Hi @ntma, thanks for working on this. To get you started, here is what I noted down for this topic. IMO there are basically 3 implementation steps:

• As pointed out in the description, we should get rid of the baseColor and possibly also the darkLayout property in the application context. This might involve inheritance of the coloring scheme from the theme for some of the wegue components by e.g. setting the color="primary" or class=primary--text.
• This should then be checked for compability by testing it against some of the themes available on the web or using the Vuetify Theme generator.
• Last but not least we could allow a theme override, e.g. by adding the theme declaration given here to the application context. Here's an (untested) snippet for doing this in main.js.

/**
 * Creates the active vuetify instance.
 *
 * @param {Object} appConfig Global application context.
 * @returns The active vuetify instance.
 */
const createVuetify = function (appConfig) {
  const preset = {
    theme: appConfig.theme,
    icons: {
      iconfont: 'mdiSvg'
    },
    lang: {
      current: LocaleUtil.getPreferredLanguage(appConfig),
      locales: LocaleUtil.importVuetifyLocales()
    }
  };
  return new Vuetify(preset);
}

[ntma]

Hi @fschmenger ,

Thank you for this outline 👍

Allow me to number your bullets to ease the discussion. So:

1. seems to be fairly easy. Wegue will start using the 'primary' and 'secondary' classes to theme the UI according to the material design system;
2. no questions here for now;
3. basically instead of providing a baseColor, we want to provide a preset config. Should this config be placed in the app-config.json?

[fschmenger]

Hi @ntma, I haven't been very concise in my description but happy to see you got it right!

Yes, regarding point 3 I would suggest to support an optional declaration of a top level 'theme' attribute in app-config.json (this is what I meant when refering to 'application context').
I'm a bit busy until mid of next week but will follow this issue in case you have any further question.