1 <!-- 2 @license 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 --> 10 11 <link rel="import" href="../polymer/polymer.html"> 12 <link rel="import" href="color.html"> 13 14 <!-- Taken from https://www.google.com/design/spec/style/color.html#color-ui-color-application --> 15 16 <style is="custom-style"> 17 18 :root { 19 /* 20 * You can use these generic variables in your elements for easy theming. 21 * For example, if all your elements use `--primary-text-color` as its main 22 * color, then switching from a light to a dark theme is just a matter of 23 * changing the value of `--primary-text-color` in your application. 24 */ 25 --primary-text-color: var(--light-theme-text-color); 26 --primary-background-color: var(--light-theme-background-color); 27 --secondary-text-color: var(--light-theme-secondary-color); 28 --disabled-text-color: var(--light-theme-disabled-color); 29 --divider-color: var(--light-theme-divider-color); 30 --error-color: var(--paper-deep-orange-a700); 31 32 /* 33 * Primary and accent colors. Also see color.html for more colors. 34 */ 35 --primary-color: var(--paper-indigo-500); 36 --light-primary-color: var(--paper-indigo-100); 37 --dark-primary-color: var(--paper-indigo-700); 38 39 --accent-color: var(--paper-pink-a200); 40 --light-accent-color: var(--paper-pink-a100); 41 --dark-accent-color: var(--paper-pink-a400); 42 43 44 /* 45 * Material Design Light background theme 46 */ 47 --light-theme-background-color: #ffffff; 48 --light-theme-base-color: #000000; 49 --light-theme-text-color: var(--paper-grey-900); 50 --light-theme-secondary-color: #737373; /* for secondary text and icons */ 51 --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */ 52 --light-theme-divider-color: #dbdbdb; 53 54 /* 55 * Material Design Dark background theme 56 */ 57 --dark-theme-background-color: var(--paper-grey-900); 58 --dark-theme-base-color: #ffffff; 59 --dark-theme-text-color: #ffffff; 60 --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */ 61 --dark-theme-disabled-color: #646464; /* disabled/hint text */ 62 --dark-theme-divider-color: #3c3c3c; 63 64 /* 65 * Deprecated values because of their confusing names. 66 */ 67 --text-primary-color: var(--dark-theme-text-color); 68 --default-primary-color: var(--primary-color); 69 70 } 71 72 </style> 73
