diff --git a/default-theme.html b/default-theme.html
index 7524ecd..478d087 100644
--- a/default-theme.html
+++ b/default-theme.html
@@ -16,7 +16,30 @@
:root {
/*
- * Light background theme
+ * You can use these generic variables in your elements for easy theming.
+ * For example, if all your elements use `--primary-text-color` as its main
+ * color, then switching from a light to a dark theme is just a matter of
+ * changing the value of `--primary-text-color` in your application.
+ */
+ --primary-text-color: var(--light-theme-text-color);
+ --primary-background-color: var(--light-theme-background-color);
+ --secondary-text-color: var(--light-theme-secondary-color);
+ --disabled-text-color: var(--light-theme-disabled-color);
+ --divider-color: var(--light-theme-divider-color);
+
+ /*
+ * Primary and accent colors. Also see color.html for more colors.
+ */
+ --primary-color: #3f51b5; /* --paper-indigo-500 */
+ --light-primary-color: #c5cae9; /* --paper-indigo-100 */
+ --dark-primary-color: #303f9f; /* --paper-indigo-700 */
+
+ --accent-color: #ff4081; /* --paper-pink-a200 */
+ --light-accent-color: #ff80ab; /* --paper-pink-a100 */
+ --dark-accent-color: #f50057; /* --paper-pink-a400 */
+
+ /*
+ * Material Design Light background theme
*/
--light-theme-background-color: #ffffff;
--light-theme-base-color: #000000;
@@ -26,7 +49,7 @@
--light-theme-divider-color: #dbdbdb;
/*
- * Dark background theme
+ * Material Design Dark background theme
*/
--dark-theme-background-color: #212121;
--dark-theme-base-color: #ffffff;
@@ -35,27 +58,12 @@
--dark-theme-disabled-color: #646464; /* disabled/hint text */
--dark-theme-divider-color: #3c3c3c;
- /*
- * Primary and accent colors. Also see color.html for more colors.
- */
- --primary-color: #3f51b5; /* --paper-indigo-500 */
- --light-primary-color: #c5cae9; /* --paper-indigo-100 */
- --dark-primary-color: #303f9f; /* --paper-indigo-700 */
-
- --accent-color: #ff4081; /* --paper-pink-a200 */
- --light-accent-color: #ff80ab; /* --paper-pink-a100 */
- --dark-accent-color: #f50057; /* --paper-pink-a400 */
-
/*
* Deprecated values because of their confusing names.
*/
- --primary-text-color: var(--light-theme-text-color);
--text-primary-color: var(--dark-theme-text-color);
- --primary-background-color: var(--light-theme-background-color);
- --secondary-text-color: var(--light-theme-secondary-color);
- --disabled-text-color:var(--light-theme-disabled-color);
- --divider-color: var(--light-theme-divider-color);
--default-primary-color: var(--primary-color);
+
}