Start the implementation of themes

build/webpack.base.conf.js

@@ -1,7 +1,7 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
+var path = require('path');
+var config = require('../config');
+var utils = require('./utils');
+var projectRoot = path.resolve(__dirname, '../');
 
 module.exports = {
   entry: {
@@ -16,9 +16,9 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components')
+      src: path.resolve(__dirname, '../src'),
+      assets: path.resolve(__dirname, '../src/assets'),
+      components: path.resolve(__dirname, '../src/components')
     }
   },
   resolveLoader: {
@@ -54,6 +54,10 @@ module.exports = {
         test: /\.json$/,
         loader: 'json'
       },
+      {
+        test: /\.theme$/,
+        loaders: ['raw', 'sass']
+      },
       {
         test: /\.html$/,
         loader: 'vue-html'
@@ -82,4 +86,4 @@ module.exports = {
   vue: {
     loaders: utils.cssLoaders()
   }
-}
+};

build/webpack.dev.conf.js

@@ -1,14 +1,14 @@
-var config = require('../config')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var utils = require('./utils')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+var config = require('../config');
+var webpack = require('webpack');
+var merge = require('webpack-merge');
+var utils = require('./utils');
+var baseWebpackConfig = require('./webpack.base.conf');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
+Object.keys(baseWebpackConfig.entry).forEach(function(name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]);
+});
 
 module.exports = merge(baseWebpackConfig, {
   module: {
@@ -31,4 +31,4 @@ module.exports = merge(baseWebpackConfig, {
       inject: true
     })
   ]
-})
+});

package.json

@@ -41,6 +41,7 @@
     "json-loader": "^0.5.4",
     "node-sass": "^3.8.0",
     "ora": "^0.2.3",
+    "raw-loader": "^0.5.1",
     "sass-loader": "^4.0.0",
     "shelljs": "^0.7.0",
     "url-loader": "^0.5.7",

src/components/mdBottomBar/index.js

@@ -1,7 +1,10 @@
 import MdBottomBar from './mdBottomBar.vue';
 import MdBottomBarItem from './mdBottomBarItem.vue';
+import MdBottomBarTheme from './mdBottomBar.theme';
 
 export default function install(Vue) {
   Vue.component('md-bottom-bar', Vue.extend(MdBottomBar));
   Vue.component('md-bottom-bar-item', Vue.extend(MdBottomBarItem));
+
+  window.VueMaterial.styles.push(MdBottomBarTheme);
 }

src/components/mdBottomBar/mdBottomBar.scss

@@ -77,6 +77,7 @@
   .md-text {
     transform: scale(.8571) translateY(2px);
     transition: $swift-ease-out,
+                color $swift-linear-duration $swift-linear-timing-function,
                 opacity $swift-linear-duration $swift-linear-timing-function;
   }
 

src/components/mdBottomBar/mdBottomBar.theme

@@ -0,0 +1,18 @@
+.THEME_NAME {
+  .md-bottom-bar {
+    &:not(.md-shift) {
+      .md-active {
+        color: PRIMARY;
+      }
+    }
+
+    &.md-shift {
+      background-color: PRIMARY;
+      color: #fff;
+
+      &.md-accent {
+        background-color: ACCENT;
+      }
+    }
+  }
+}

src/components/mdButton/index.js

@@ -1,7 +1,10 @@
 import MdButton from './mdButton.vue';
 import MdLinkButton from './mdLinkButton.vue';
+import MdButtonTheme from './mdButton.theme';
 
 export default function install(Vue) {
   Vue.component('md-button', Vue.extend(MdButton));
   Vue.component('md-link-button', Vue.extend(MdLinkButton));
+
+  window.VueMaterial.styles.push(MdButtonTheme);
 }

src/components/mdButton/mdButton.theme

@@ -0,0 +1,15 @@
+.THEME_NAME {
+  .md-button {
+    &.md-primary {
+      background-color: PRIMARY;
+
+      &:hover {
+        background-color: ACCENT;
+      }
+    }
+
+    &.md-accent {
+      background-color: ACCENT;
+    }
+  }
+}

src/components/mdTheme/index.js

@@ -5,6 +5,8 @@ const createNewStyleElement = (style, name) => {
   if (!head.querySelector('#' + styleId)) {
     let newTag = document.createElement('style');
 
+    style = style.replace(/THEME_NAME/g, styleId);
+
     newTag.type = 'text/css';
     newTag.id = styleId;
     newTag.textContent = style;
@@ -13,8 +15,24 @@ const createNewStyleElement = (style, name) => {
   }
 };
 
+const parseStyle = (style, theme) => {
+  style = style
+    .replace(/PRIMARY/g, theme.primary)
+    .replace(/ACCENT/g, theme.accent)
+    .replace(/BACKGROUND/g, theme.background);
+
+  return style;
+};
+
 const registerTheme = (theme, name) => {
-  createNewStyleElement('', name);
+  let themeStyles = window.VueMaterial.styles;
+  let parsedStyle = [];
+
+  themeStyles.forEach((style) => {
+    parsedStyle.push(parseStyle(style, theme));
+  });
+
+  createNewStyleElement(parsedStyle.join('\n'), name);
 };
 
 export default function install(Vue, themes) {
@@ -22,10 +40,12 @@ export default function install(Vue, themes) {
 
   if (themeNames.length) {
     themeNames.forEach((name) => {
-      registerTheme(themes[name].primary, name);
+      registerTheme(themes[name], name);
     });
   }
 
+  document.body.classList.add('md-theme-default');
+
   Vue.directive('mdTheme', (theme) => {
     if (theme) {
       console.log(theme);

src/core/core.vue

@@ -1,3 +1,9 @@
+<script>
+  window.VueMaterial = {
+    styles: []
+  };
+</script>
+
 <style lang="sass">
   /* Common mixins */
   @import 'utils/mixins';

src/core/structure.scss

@@ -1,5 +1,6 @@
 body {
   min-height: 100%;
+  margin: 0;
   position: relative;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;

src/main.js

@@ -1,12 +1,16 @@
 import Vue from 'vue';
 import Docs from './docs';
 import './core/core';
-import MdTheme from './components/mdTheme';
 import MdInkRipple from './components/mdInkRipple';
 import MdButton from './components/mdButton';
 import MdIcon from './components/mdIcon';
 import MdBottomBar from './components/mdBottomBar';
+import MdTheme from './components/mdTheme';
 
+Vue.use(MdInkRipple);
+Vue.use(MdButton);
+Vue.use(MdIcon);
+Vue.use(MdBottomBar);
 Vue.use(MdTheme, {
   default: {
     primary: 'blue',
@@ -19,10 +23,6 @@ Vue.use(MdTheme, {
     background: 'white'
   }
 });
-Vue.use(MdInkRipple);
-Vue.use(MdButton);
-Vue.use(MdIcon);
-Vue.use(MdBottomBar);
 
 /* eslint-disable no-new */
 new Vue({