Start the md-theme component

package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",

src/components/mdBottomBar/mdBottomBar.scss

@@ -3,6 +3,7 @@
 .md-bottom-bar {
   width: 100%;
   min-width: 100%;
+  height: 56px;
   position: relative;
   display: flex;
   justify-content: center;
@@ -11,13 +12,12 @@
 .md-bottom-bar-item {
   max-width: 168px;
   min-width: 80px;
-  height: 56px;
+  height: 100%;
   padding: 8px 12px 10px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: space-between;
-  flex: 1;
   position: relative;
   border: none;
   background: transparent;

src/components/mdTheme/index.js

@@ -0,0 +1,34 @@
+const createNewStyleElement = (style, name) => {
+  let head = document.head;
+  let styleId = 'md-theme-' + name;
+
+  if (!head.querySelector('#' + styleId)) {
+    let newTag = document.createElement('style');
+
+    newTag.type = 'text/css';
+    newTag.id = styleId;
+    newTag.textContent = style;
+
+    document.head.appendChild(newTag);
+  }
+};
+
+const registerTheme = (theme, name) => {
+  createNewStyleElement('', name);
+};
+
+export default function install(Vue, themes) {
+  let themeNames = Object.keys(themes);
+
+  if (themeNames.length) {
+    themeNames.forEach((name) => {
+      registerTheme(themes[name].primary, name);
+    });
+  }
+
+  Vue.directive('mdTheme', (theme) => {
+    if (theme) {
+      console.log(theme);
+    }
+  });
+}

src/docs.vue

@@ -36,7 +36,7 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </div>
 
-    <div style="width: 360px; height: 480px;">
+    <div style="width: 360px; height: 480px;" v-md-theme>
       <md-bottom-bar md-shift>
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
@@ -47,9 +47,8 @@
 
       <md-bottom-bar style="margin-top: 24px">
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-        <md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
       </md-bottom-bar>
     </div>

src/main.js

@@ -1,11 +1,24 @@
 import Vue from 'vue';
-import Docs from './docs'
-import Core from './core/core';
+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';
 
+Vue.use(MdTheme, {
+  default: {
+    primary: 'blue',
+    accent: 'red',
+    background: 'white'
+  },
+  header: {
+    primary: 'white',
+    accent: 'blue',
+    background: 'white'
+  }
+});
 Vue.use(MdInkRipple);
 Vue.use(MdButton);
 Vue.use(MdIcon);