https://github.com/gmusic-utils/gmusic-theme.js

Generic theming library extracted from Google Play Music Desktop Player
https://github.com/gmusic-utils/gmusic-theme.js

Last synced: about 2 months ago
JSON representation

Generic theming library extracted from Google Play Music Desktop Player

• Host: GitHub
• URL: https://github.com/gmusic-utils/gmusic-theme.js
• Owner: gmusic-utils
• License: unlicense
• Created: 2016-01-01T07:55:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T15:31:08.000Z (almost 2 years ago)
• Last Synced: 2024-07-22T04:34:48.228Z (2 months ago)
• Language: CSS
• Size: 1.51 MB
• Stars: 23
• Watchers: 7
• Forks: 8
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# gmusic-theme.js

[![Build Status](https://travis-ci.org/gmusic-utils/gmusic-theme.js.svg?branch=master)](https://travis-ci.org/gmusic-utils/gmusic-theme.js)

[![GitHub release](https://img.shields.io/github/tag/gmusic-utils/gmusic-theme.js.svg)]()

[![Code Climate](https://img.shields.io/codeclimate/github/gmusic-utils/gmusic-theme.js.svg)]()

[![GitHub license](https://img.shields.io/github/license/gmusic-utils/gmusic-theme.js.svg)]()

Browser-side JS library for theming [Google Music][].

[Google Music]: https://play.google.com/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.

[Google Play Music Desktop Player]: https://github.com/MarshallOfSound/Google-Play-Music-Desktop-Player-UNOFFICIAL-

[Google Music]: https://play.google.com/music/listen

![](https://www.samuel.ninja/img/gpmdp_screen.gif)

## 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`.

```html

  window.theme = new window.GMusicTheme(); // Our Google Music Theme API

```

### 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`.

```html

  window.theme = new window.GMusicTheme(window); // Our Google Music API

```

## 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

```js

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     |

|-----------------------|-------------------------|-------------------------|-----------------------|-------------------------|

| ![BACK_PRIMARY_IMG][] | ![BACK_SECONDARY_IMG][] | ![BACK_HIGHLIGHT_IMG][] | ![FORE_PRIMARY_IMG][] | ![FORE_SECONDARY_IMG][] |

[BACK_PRIMARY_IMG]: https://img.shields.io/badge/%23222326-%20%20%20-222326.svg

[BACK_SECONDARY_IMG]: https://img.shields.io/badge/%23121314-%20%20%20-121314.svg

[BACK_HIGHLIGHT_IMG]: https://img.shields.io/badge/%23615F59-%20%20%20-615F59.svg

[FORE_PRIMARY_IMG]: https://img.shields.io/badge/%23FFFFFF-%20%20%20-FFFFFF.svg

[FORE_SECONDARY_IMG]: https://img.shields.io/badge/%23FF5722-%20%20%20-FF5722.svg?2

## 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????