Can anyone explain onto the vuetify themes code
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
vue.js vuetify.js
asked Nov 23 '18 at 9:39
TestedTested
1741217
add a comment |
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
vue.js vuetify.js
asked Nov 23 '18 at 9:39
TestedTested
1741217
They alter classes and attributes so you can useclass="primary",class="text--primary"andcolor="primary"for example, there are examples in docs. Also by default you can't use them in CSS, see this: stackoverflow.com/questions/48280990/…
– Traxo
Nov 23 '18 at 9: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 9:56
add a comment |
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
vue.js vuetify.js
asked Nov 23 '18 at 9:39
TestedTested
1741217
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
vue.js vuetify.js
vue.js vuetify.js
asked Nov 23 '18 at 9:39
TestedTested
1741217
asked Nov 23 '18 at 9:39
TestedTested
1741217
edited Nov 23 '18 at 13:03
Tested
asked Nov 23 '18 at 9:39
TestedTested
1741217
asked Nov 23 '18 at 9:39
TestedTested
1741217
asked Nov 23 '18 at 9:39
TestedTested
1741217
1741217
They alter classes and attributes so you can useclass="primary",class="text--primary"andcolor="primary"for example, there are examples in docs. Also by default you can't use them in CSS, see this: stackoverflow.com/questions/48280990/…
– Traxo
Nov 23 '18 at 9: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 9:56
add a comment |
They alter classes and attributes so you can useclass="primary",class="text--primary"andcolor="primary"for example, there are examples in docs. Also by default you can't use them in CSS, see this: stackoverflow.com/questions/48280990/…
– Traxo
Nov 23 '18 at 9: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 9:56
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: stackoverflow.com/questions/48280990/…– Traxo
Nov 23 '18 at 9:42
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: stackoverflow.com/questions/48280990/…– Traxo
Nov 23 '18 at 9: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 9:56
@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 9:56
add a comment |
1 Answer
1
active
oldest
votes
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)
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
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<style>theme classes</style>is added, which styles vuetify based on the configuration file.
– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444062%2fcan-anyone-explain-onto-the-vuetify-themes-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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)
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
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<style>theme classes</style>is added, which styles vuetify based on the configuration file.
– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
add a comment |
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)
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
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<style>theme classes</style>is added, which styles vuetify based on the configuration file.
– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
add a comment |
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)
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
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)
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
answered Nov 23 '18 at 10:31
Sumurai8Sumurai8
13.3k83263
13.3k83263
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<style>theme classes</style>is added, which styles vuetify based on the configuration file.
– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
add a comment |
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<style>theme classes</style>is added, which styles vuetify based on the configuration file.
– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
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
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
<style>theme classes</style> is added, which styles vuetify based on the configuration file.– Sumurai8
Nov 23 '18 at 19:13
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
<style>theme classes</style> is added, which styles vuetify based on the configuration file.– Sumurai8
Nov 23 '18 at 19:13
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
thank you :) ill look into it
– Tested
Nov 24 '18 at 14:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444062%2fcan-anyone-explain-onto-the-vuetify-themes-code%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
They alter classes and attributes so you can use
class="primary",class="text--primary"andcolor="primary"for example, there are examples in docs. Also by default you can't use them in CSS, see this: stackoverflow.com/questions/48280990/…– Traxo
Nov 23 '18 at 9: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 9:56