2

Can anyone please explain me how is this theme working in vuetify to pass the variables dynamically to scss and change the theme. i.e., how are they passing the theme values from vue.js to scss. Or what is it the are doing. Please provide link for following where I can see the code written for theme I did lookup in their git hub account but to vain I'm not understanding where have they written code for theme.

  Vue.use(Vuetify, {
 theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
 }
})

You can also use the pre-defined material colors.

import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
 theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
 }
         })

I eagerly wanna know about it please whats n hows is it working.You guys only my hope Please help. I wanna know about the core file what is been done to achieve that.Or can anyone provide the exact file link where theme.js is written

Is it possible to run only the themes part?if yes please lemme know how is it possible? i very much wanna learn it

Tested
  • 761
  • 4
  • 16
  • 38
  • They alter classes and attributes so you can use `class="primary"`, `class="text--primary"` and `color="primary"` for example, there are examples in docs. Also by default you can't use them in CSS, see this: https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components/48285278#48285278 – Traxo Nov 23 '18 at 09:42
  • @Traxo if they are not manipulating css? then how altering classes and attributes the r also css please explain clearly m yet not clarified – Tested Nov 23 '18 at 09:56

1 Answers1

1

Most of the code can be found in vuetify/app-theme.js (source). From the created lifecycle hook either applyTheme is called, or this.$ssrContext.head is modified. Either one will add the generated css in generatedStyles to the page, which is a computed property that parses the vuetify options and generates styles from it. Those styles are generated in vuetify/theme.ts (source)

Sumurai8
  • 20,333
  • 11
  • 66
  • 100
  • thank you I saw the code its very much high level to me can you please explain me. its to much for me to digist i dont understand that short please dont mind – Tested Nov 23 '18 at 11:23
  • I don't think it is useful for me to narrate every line of code there. You can just add a debugger statement to the code of this framework to walk through it line by line. The end result is that somewhere on the page a block `` is added, which styles vuetify based on the configuration file. – Sumurai8 Nov 23 '18 at 19:13