fix: make meta colors off by default and add an option to enable it

marcosmoura · marcosmoura · commit c67a1c078f38 · 2017-07-03T02:50:06.000-03:00
diff --git a/docs/app/pages/UiElements/Scrollbar/Scrollbar.vue b/docs/app/pages/UiElements/Scrollbar/Scrollbar.vue
@@ -4,8 +4,8 @@
   <page-container centered :title="$t('pages.scrollbar.title')">
     <div class="page-container-section">
       <p>Scrollbars show the track on how much a content has been reviewed. This is an standard on every single device out there.</p>
-      <p>To enable the Material scrollbar styles, just add the <code>md-scrollbar</code> class to the scrollable component that you want. If you want this effect in the whole page, you can put the class in the <code>body</code> tag.</p>
-      <p>The scrollbars <strong>only</strong> works on <code>body</code> tag and on Vue Material components, like <code>md-content</code>. Due to CSS limitations, the style will be applied only on Webkit/Blink browsers (Chrome, Safari and Opera):</p>
+      <p>To enable the Material scrollbar styles, just add the <code>md-scrollbar</code> class to the scrollable component that you want. If you want this effect in the whole page, you can put the class in the <code>html</code> tag.</p>
+      <p>The scrollbars <strong>only</strong> works on <code>html</code> tag and on Vue Material components, like <code>md-content</code>. Due to CSS limitations, the style will be applied only on Webkit/Blink browsers (Chrome, Safari and Opera):</p>
     </div>
 
     <div class="page-container-section">
diff --git a/docs/index.html b/docs/index.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en-us">
+<html lang="en-us" class="md-scrollbar">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="cleartype" content="on">
@@ -29,7 +29,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
 
-  <body class="md-scrollbar">
+  <body>
     <div id="docs"></div>
   </body>
 </html>
diff --git a/src/core/MdTheme.js b/src/core/MdTheme.js
@@ -9,7 +9,8 @@ export default new Vue({
     prefix: 'md-theme-',
     theme: 'default',
     enabled: true,
-    themeTarget: document.body
+    metaColors: false,
+    themeTarget: document.documentElement
   }),
   computed: {
     fullThemeName () {
@@ -24,10 +25,10 @@ export default new Vue({
 
         if (enabled) {
           themeTarget.classList.add(fullThemeName)
-          this.setHtmlMetaColors(fullThemeName)
+          this.metaColors && this.setHtmlMetaColors(fullThemeName)
         } else {
           themeTarget.classList.remove(fullThemeName)
-          this.setHtmlMetaColors()
+          this.metaColors && this.setHtmlMetaColors()
         }
       }
     },
@@ -38,7 +39,17 @@ export default new Vue({
 
       themeTarget.classList.remove(getThemeName(oldTheme))
       themeTarget.classList.add(newTheme)
-      this.setHtmlMetaColors(newTheme)
+
+      if (this.metaColors) {
+        this.setHtmlMetaColors(newTheme)
+      }
+    },
+    metaColors (meta) {
+      if (meta) {
+        this.setHtmlMetaColors(this.fullThemeName)
+      } else {
+        this.setHtmlMetaColors()
+      }
     }
   },
   methods: {
@@ -101,7 +112,7 @@ export default new Vue({
     }
   },
   created () {
-    if (this.enabled) {
+    if (this.enabled && this.metaColors) {
       window.addEventListener('load', () => {
         this.setHtmlMetaColors(this.fullThemeName)
       })
diff --git a/src/material.js b/src/material.js
@@ -18,6 +18,12 @@ const material = new MdReactive({
 })
 
 Object.defineProperties(material.theming, {
+  metaColors: {
+    get: () => MdTheme.metaColors,
+    set (metaColors) {
+      MdTheme.metaColors = metaColors
+    }
+  },
   theme: {
     get: () => MdTheme.theme,
     set (theme) {
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
@@ -84,7 +84,7 @@ $md-color-levels: (
     icon: #fff,
     icon-disabled: rgba(#fff, .5),
     divider: rgba(#fff, .12),
-    scrollbar: #303030,
+    scrollbar: #212121,
     scrollbar-background: #616161
   )
 );

Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ $md-color-levels: (`
`84`	`84`	`icon: #fff,`
`85`	`85`	`icon-disabled: rgba(#fff, .5),`
`86`	`86`	`divider: rgba(#fff, .12),`
`87`		`- scrollbar: #303030,`
	`87`	`+ scrollbar: #212121,`
`88`	`88`	`scrollbar-background: #616161`
`89`	`89`	`)`
`90`	`90`	`);`