apply initial theme

docs/src/pages/GettingStarted.vue

@@ -88,60 +88,6 @@
         </section>
       </article>
 
-      <article>
-        <section>
-          <h2 class="md-headline">Themes</h2>
-
-          <p>To get Vue Material working properly, you'll need to configure a default theme. You can also register multiple themes at once. Apply your theme on each code part that you want using <code>v-md-theme</code> directive:</p>
-
-          <md-tabs :md-dynamic-height="false" class="md-transparent">
-            <md-tab md-label="Single Theme">
-              <code-block lang="javascript">
-                Vue.material.theme.register('default', {
-                  primary: 'cyan',
-                  accent: 'pink'
-                })
-              </code-block>
-
-              <code-block lang="xml">
-                &lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
-                  &lt;md-toolbar&gt;
-                    &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
-                  &lt;/md-toolbar&gt;
-
-                  &lt;md-button&gt;My Button&lt;/md-button&gt;
-                &lt;/div&gt;
-              </code-block>
-            </md-tab>
-
-            <md-tab md-label="Multiple Themes">
-              <code-block lang="javascript">
-                Vue.material.theme.registerAll({
-                  default: {
-                    primary: 'cyan',
-                    accent: 'pink'
-                  },
-                  indigo: {
-                    primary: 'indigo',
-                    accent: 'pink'
-                  }
-                })
-              </code-block>
-
-              <code-block lang="xml">
-                &lt;div id=&quot;app&quot; v-md-theme=&quot;&#039;default&#039;&quot;&gt;
-                  &lt;md-toolbar&gt;
-                    &lt;div class=&quot;md-title&quot;&gt;My App&lt;/div&gt;
-                  &lt;/md-toolbar&gt;
-
-                  &lt;md-button v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;My Button&lt;/md-button&gt;
-                &lt;/div&gt;
-              </code-block>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </article>
-
       <article>
         <h2 class="md-headline">Codepen Examples</h2>
 

docs/src/pages/themes/Configuration.vue

@@ -49,7 +49,7 @@
         <h3 class="md-headline">Registering themes</h3>
         <p>To configure the colors of your application you can use the API.</p>
         <code-block lang="javascript">
-          Vue.material.theme.register('default', {
+          Vue.material.registerTheme('default', {
             primary: 'cyan',
             accent: 'pink',
             warn: 'red',
@@ -57,10 +57,10 @@
           })
         </code-block>
         <p>
-          You can call the <code>register</code> function how many times you want. However Vue Material have a <code>registerAll</code> function to create multiple themes:
+          You can call the <code>registerTheme</code> function how many times you want. However you can pass a object containing all the themes that you want to create:
         </p>
         <code-block lang="javascript">
-          Vue.material.theme.registerAll({
+          Vue.material.registerTheme({
             app: {
               primary: 'cyan'
             },

src/core/components/mdTheme/component.js

@@ -1,21 +0,0 @@
-export default {
-  props: {
-    mdTag: String,
-    mdName: {
-      type: String,
-      default: 'default'
-    }
-  },
-  data: () => ({
-    name: 'md-theme'
-  }),
-  render(render) {
-    if (this.mdTag || this.$slots.default.length > 1) {
-      return render(this.mdTag || 'div', {
-        staticClass: 'md-theme'
-      }, this.$slots.default);
-    }
-
-    return this.$slots.default[0];
-  }
-};

src/core/components/mdTheme/index.js

@@ -1,6 +1,6 @@
 import palette from './palette';
 import rgba from './rgba';
-import component from './component';
+import MdTheme from './MdTheme';
 
 const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3'];
 const DEFAULT_THEME_COLORS = {
@@ -120,30 +120,30 @@ const registerAllThemes = (themes, themeStyles) => {
 };
 
 export default function install(Vue) {
-  const registerTheme = (name, spec) => {
-    let theme = {};
+  Vue.material = new Vue({
+    data: () => ({
+      styles: [],
+      currentTheme: null
+    }),
+    methods: {
+      registerTheme(name, spec) {
+        let theme = {};
 
-    if (typeof name === 'string') {
-      theme[name] = spec;
-    } else {
-      theme = name;
+        if (typeof name === 'string') {
+          theme[name] = spec;
+        } else {
+          theme = name;
+        }
+
+        registerAllThemes(theme, this.styles);
+      },
+      setCurrentTheme(themeName) {
+        document.body.classList.remove('md-theme-' + this.currentTheme);
+        document.body.classList.add('md-theme-' + themeName);
+        this.currentTheme = themeName;
+      }
     }
+  });
 
-    registerAllThemes(theme, Vue.material.styles);
-  };
-
-  const setCurrentTheme = (themeName) => {
-    document.body.classList.remove('md-theme-' + Vue.material.currentTheme);
-    document.body.classList.add('md-theme-' + themeName);
-    Vue.material.currentTheme = themeName;
-  };
-
-  Vue.material = {
-    styles: [],
-    registerTheme,
-    setCurrentTheme
-  };
-
-  Vue.component('md-theme', component);
-  setCurrentTheme('default');
+  Vue.component('md-theme', MdTheme);
 }

src/core/components/mdTheme/mdTheme.vue

@@ -0,0 +1,23 @@
+<script>
+  export default {
+    props: {
+      mdTag: String,
+      mdName: {
+        type: String,
+        default: 'default'
+      }
+    },
+    data: () => ({
+      name: 'md-theme'
+    }),
+    render(render) {
+      if (this.mdTag || this.$slots.default.length > 1) {
+        return render(this.mdTag || 'div', {
+          staticClass: 'md-theme'
+        }, this.$slots.default);
+      }
+
+      return this.$slots.default[0];
+    }
+  };
+</script>

src/core/components/mdTheme/mixin.js

@@ -32,13 +32,14 @@ export default {
         theme = this.closestThemedParent.mdName;
       }
 
-      return 'md-theme-' + (theme || this.defaultTheme);
-    },
-    defaultTheme() {
-      return Vue.material.currentTheme;
+      return 'md-theme-' + (theme || Vue.material.currentTheme);
     }
   },
   mounted() {
     this.closestThemedParent = this.getClosestThemedParent(this.$parent);
+
+    if (!Vue.material.currentTheme) {
+      Vue.material.setCurrentTheme('default');
+    }
   }
 };

src/core/index.js

@@ -15,10 +15,7 @@ export default function install(Vue) {
 
   install.installed = true;
 
-  Vue.material = {
-    styles: [CoreTheme]
-  };
-
   Vue.use(MdTheme);
   Vue.use(MdInkRipple);
+  Vue.material.styles.push(CoreTheme);
 }