Initial Implementation of light theming

README.md

@@ -56,8 +56,14 @@ included will not be changed from the defaults.  `enabled` is set to false by de
 
 ### States
 
+#### `enableAll`
+Enables the current custom theme for ALL custom colors.  Everything becomes themed
+
+### `enableHighlight`
+Enables the current custom theme but ONLY uses the custom highlight color.  Everything else remains standard Google Play Music styles.
+
 #### `enable()`
-Enables the current custom theme
+Is a mirror of `enableAll`, present for backwards compatibility
 
 #### `disable()`
 Disables the current custom theme

lib/_constants.js

@@ -1,3 +1,4 @@
 module.exports = {
   CLASS_NAMESPACE: 'gmusic-theme',
+  CLASS_NAMESPACE_LIGHT: 'gmusic-theme-light',
 };

lib/generate-stylesheet.js

@@ -12,7 +12,7 @@ const reworkCSS = rework(styles)
   // DEV: Adds a .custom selector to the beginning of all CSS selectors
   .use(rework.namespace({
     selector: '.' + CONSTANTS.CLASS_NAMESPACE,
-    root: 'body',
+    root: 'html',
     namespaceBody: false,
   }))
   // DEV: Adds !important flag to all CSS rules

lib/style.css

@@ -161,7 +161,7 @@ body {
   background-color: <<BACK_HIGHLIGHT>>;
 }
 
-body.material,
+body,
 .material-detail-view .material-container-details .info .description,
 .song-table th {
   color: #efefef;
@@ -460,3 +460,26 @@ button.goog-buttonset-default:hover {
 .material-detail-view .top-tracks {
   background-color: <<BACK_PRIMARY>>;
 }
+
+/*
+* Light theme specific things
+*/
+
+.gmusic-theme-light #material-app-bar {
+  background-color: <<FORE_SECONDARY>>;
+}
+
+.gmusic-theme-light .nav-item-container.selected {
+  color: <<FORE_SECONDARY>>;
+}
+
+body.gmusic-theme-light,
+.gmusic-theme-light .material-detail-view .material-container-details .info .description,
+.gmusic-theme-light .song-table th {
+  color: #212121;
+}
+
+.gmusic-theme-light .song-row .song-indicator {
+  background-image: url('ani_equalizer_black.gif');
+  background-size: 40px 40px;
+}

src/gmusic-theme.js

@@ -6,6 +6,14 @@ const BASE_CSS = fs.readFileSync(__dirname + '/../build/rework.css', 'utf8');
 const BASE_SVG = fs.readFileSync(__dirname + '/../lib/logo.svg', 'utf8');
 const CONSTANTS = require('../lib/_constants');
 
+const DEFAULTS = {
+  BACK_PRIMARY: '#222326',
+  BACK_SECONDARY: '#121314',
+  BACK_HIGHLIGHT: '#615F59',
+  FORE_PRIMARY: '#FFFFFF',
+  FORE_SECONDARY: '#1ED760',
+};
+
 window.GMusicTheme = class GMusicTheme {
   /**
    * Constructor for a new Google Music Theme API.
@@ -16,11 +24,11 @@ window.GMusicTheme = class GMusicTheme {
    */
   constructor(options = {}) {
     // DEV: Use the colors specified in the options or the default if it isn't set
-    this.BACK_PRIMARY = '#222326';
-    this.BACK_SECONDARY = '#121314';
-    this.BACK_HIGHLIGHT = '#615F59';
-    this.FORE_PRIMARY = '#FFFFFF';
-    this.FORE_SECONDARY = '#1ED760';
+    this.BACK_PRIMARY = DEFAULTS.BACK_PRIMARY;
+    this.BACK_SECONDARY = DEFAULTS.BACK_SECONDARY;
+    this.BACK_HIGHLIGHT = DEFAULTS.BACK_HIGHLIGHT;
+    this.FORE_PRIMARY = DEFAULTS.FORE_PRIMARY;
+    this.FORE_SECONDARY = DEFAULTS.FORE_SECONDARY;
 
     this.enabled = false;
     if (options.enabled) {
@@ -44,20 +52,40 @@ window.GMusicTheme = class GMusicTheme {
   }
 
   /**
-   * Enables the custom theme
-   */
+  * Enabled the dark theme, this allows for backwards compatibility
+  */
   enable() {
-    document.body.classList.add(CONSTANTS.CLASS_NAMESPACE);
-    this.enabled = true;
-    this._drawLogo();
+    this.enableAll();
+  }
+
+  /**
+   * Enables the custom theme in dark mode (All colors)
+   */
+  enableAll() {
+    this.disable();
+    document.querySelector('html').classList.add(CONSTANTS.CLASS_NAMESPACE);
+    this.enabled = 1;
+    this.redrawTheme();
+  }
+
+  /**
+  * Enables the custom theme in light mode (only highlight)
+  */
+  enableHighlight() {
+    this.disable();
+    document.querySelector('html').classList.add(CONSTANTS.CLASS_NAMESPACE);
+    document.body.classList.add(CONSTANTS.CLASS_NAMESPACE_LIGHT);
+    this.enabled = 2;
+    this.redrawTheme();
   }
 
   /**
    * Disables the custom theme
    */
   disable() {
-    document.body.classList.remove(CONSTANTS.CLASS_NAMESPACE);
-    this.enabled = false;
+    document.querySelector('html').classList.remove(CONSTANTS.CLASS_NAMESPACE);
+    document.body.classList.remove(CONSTANTS.CLASS_NAMESPACE_LIGHT);
+    this.enabled = 0;
     this._drawLogo();
   }
 
@@ -132,13 +160,25 @@ window.GMusicTheme = class GMusicTheme {
   }
 
   _substituteColors(styleString) {
+    // DEV: If replacing all colors
+    if (this.enabled === 1) {
+      return styleString
+        .replace(/<<BACK_PRIMARY>>/g, this.BACK_PRIMARY)
+        .replace(/<<BACK_SECONDARY>>/g, this.BACK_SECONDARY)
+        .replace(/<<BACK_HIGHLIGHT>>/g, this.BACK_HIGHLIGHT)
+        .replace(/<<FORE_PRIMARY>>/g, this.FORE_PRIMARY)
+        .replace(/<<FORE_SECONDARY>>/g, this.FORE_SECONDARY)
+        .replace(/<<BACK_SECONDARY_O>>/g, this._rgba(this.BACK_SECONDARY, 0.5))
+        .replace(/<<NOTIMPORTANT>> \!important/g, '');
+    }
+    // DEV: Else remove all rules for anything that isn't the highlight color (foreSecondary)
     return styleString
-      .replace(/<<BACK_PRIMARY>>/g, this.BACK_PRIMARY)
-      .replace(/<<BACK_SECONDARY>>/g, this.BACK_SECONDARY)
-      .replace(/<<BACK_HIGHLIGHT>>/g, this.BACK_HIGHLIGHT)
-      .replace(/<<FORE_PRIMARY>>/g, this.FORE_PRIMARY)
+      .replace(/\n.+<<BACK_PRIMARY>>.*;\n/g, '')
+      .replace(/\n.+<<BACK_SECONDARY>>.*;\n/g, '')
+      .replace(/\n.+<<BACK_HIGHLIGHT>>.*;\n/g, '')
+      .replace(/\n.+<<FORE_PRIMARY>>.*;\n/g, '')
       .replace(/<<FORE_SECONDARY>>/g, this.FORE_SECONDARY)
-      .replace(/<<BACK_SECONDARY_O>>/g, this._rgba(this.BACK_SECONDARY, 0.5))
+      .replace(/\n.+<<BACK_SECONDARY_O>>.*;\n/g, '')
       .replace(/<<NOTIMPORTANT>> \!important/g, '');
   }
 };