Adding A Theme

Echoes Player theme is implemented with css variables.

The main and only variables which are used all over the app, are defined under the "body" element.
You can easily inspect the application via Chrome devtools (or other browser's devtool) and inspect the "body" element for the css vars, i.e:

Adding A New Theme To Echoes Player

Please submit a new issue or a pull request (preferred) with a suggested theme applied to the css variables.

CSS Format

1. create a new your-theme-name.scss file under css/themes
2. copy/paste the default theme from app/app.component.scss.
3. create your theme under the body.your-theme-name selector.
   example:

// if you want to include colors from sass variables
@import '~css/echoes-variables.scss';

body.galaxy {
  --brand-primary: $brand-primary;
  --brand-secondary: $brand-secondary;
  /* other variables you want to customise */
}

Adding Theme To App's Options

Please append your-theme-name to the end of the array of themes at src/app/app.themes.ts.
Themes are ordered by alphabet order (so, there is no meaning for position within the array).
example:

export const themes = [
  'eighties',
  'fusion',
  'galaxy'
];