gmusic-theme.js

Browser-side JS library for theming Google Music.

This was built as part of Google Play Music Desktop Player, a C# wrapper around Google Music. It was extracted to allow other to make better use of it.

gmusic-theme.js is not created by, affiliated with, or supported by Google Inc.

Getting Started

npm

Install the module with: npm install gmusic-theme.js

Once installed, add it to your HTML and access it via window.GMusicTheme.

<script src="node_modules/gmusic-theme.js/dist/gmusic-theme.min.js"></script>
<script>
  window.theme = new window.GMusicTheme(); // Our Google Music Theme API
</script>

Vanilla

If you are not using a package manager, download the latest script at:

https://raw.githubusercontent.com/gmusic-utils/gmusic-theme.js/master/dist/gmusic-theme.min.js

Then, add it to your HTML and access it via window.GMusicTheme.

<script src="gmusic-theme.min.js"></script>
<script>
  window.theme = new window.GMusicTheme(window); // Our Google Music API
</script>

Documentation

gmusic-theme.js exposes a constructor, window.GMusicTheme

new GMusicTheme(config)

Constructor for a new Google Music Theme API.

• config - Object - An object containing backPrimary, backSecondary, backHighlight, forePrimary, foreSecondary and enabled attributes any attribute not included will not be changed from the defaults. enabled is set to false by default.

States

enable()

Enables the current custom theme

disable()

Disables the current custom theme

Customizing the Colors

updateTheme(colorObject)

Updates the colors used in the custom theme and redraws the theme.

• colorObject - Object - A colors object containing type, backPrimary, backSecondary, backHighlight, forePrimary and foreSecondary attributes any attribute not included will not be changed.

The type attribute can be any value from window.GMusicTheme.TYPES. At the moment these are "FULL" and "HIGHLIGHT_ONLY". There are constants for these values that can be accessed through the types object. E.g. window.GMusicTheme.TYPES.HIGHLIGHT_ONLY

Defaults

All defaults for the custom theme are copied below

BACK_PRIMARY   = '#222326';
BACK_SECONDARY = '#121314';
BACK_HIGHLIGHT = '#615F59';
FORE_PRIMARY   = '#FFFFFF';
FORE_SECONDARY = '#FF5722';

| BACK_PRIMARY | BACK_SECONDARY | BACK_HIGHLIGHT | FORE_PRIMARY | FORE_SECONDARY | |-----------------------|-------------------------|-------------------------|-----------------------|-------------------------| | | | | | |

Color Format

When changing colors you can use ANY CSS standard color syntax. #, rgb(), rgba() Etc.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via npm run lint and test via npm test.

Testing

Currently there is no testing framework. How do we test a theming library????