Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-24 08:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

apply theme-color based on primary theme color

Browse source
This commit is contained in:
Marcos Moura 2017-02-07 02:53:31 -02:00
parent 60400af732
commit f1b654a71c
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/core/components/mdTheme/index.js
View file

@ -43,8 +43,9 @@ const createNewStyleElement = (style, name) => {
};
let registeredThemes = [];
let registeredPrimaryColor = {};
const parseStyle = (style, theme) => {
const parseStyle = (style, theme, name) => {
VALID_THEME_TYPE.forEach((type) => {
style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d*)-?(\\d*\\.?\\d+)?', 'g'), (match, paletteType, colorType, hue, opacity) => {
let color;
@ -72,6 +73,10 @@ const parseStyle = (style, theme) => {
}
}
if (type === 'primary') {
registeredPrimaryColor[name] = color[colorVariant];
}
if (opacity) {
return rgba(color[colorVariant], opacity);
}
@ -102,7 +107,7 @@ const registerTheme = (theme, name, themeStyles) => {
let parsedStyle = [];
themeStyles.forEach((style) => {
parsedStyle.push(parseStyle(style, theme));
parsedStyle.push(parseStyle(style, theme, name));
});
createNewStyleElement(parsedStyle.join('\n'), name);
@ -117,6 +122,20 @@ const registerAllThemes = (themes, themeStyles) => {
});
};
const changeHtmlMetaColor = (color) => {
let themeColorElement = document.querySelector('meta[name="theme-color"]');
if (themeColorElement) {
themeColorElement.setAttribute('content', color);
} else {
themeColorElement = document.createElement('meta');
themeColorElement.setAttribute('name', 'theme-color');
themeColorElement.setAttribute('content', color);
document.head.appendChild(themeColorElement);
}
};
export default function install(Vue) {
Vue.material = new Vue({
data: () => ({
@ -137,6 +156,7 @@ export default function install(Vue) {
registerAllThemes(theme, this.styles);
},
applyCurrentTheme(themeName) {
changeHtmlMetaColor(registeredPrimaryColor[themeName]);
document.body.classList.remove('md-theme-' + this.currentTheme);
document.body.classList.add('md-theme-' + themeName);
this.currentTheme = themeName;