Building a Custom JW Showcase Theme - jwplayer/jw-showcase GitHub Wiki

Important: These instructions are only relevant if you are building from the JW Showcase source code. They cannot be used with the precompiled app (i.e., the precompiled-static-app.zip download).

A theme defines all colors used in Showcase.

Preparations

Open app/styles/main.scss in a text editor and uncomment the @import 'theme/customTheme'; rule. It should look like this:

//
// Custom theme
// --------------------------------
@import "theme/customTheme";

//
// Import overrides
// --------------------------------
@import 'components/addtohome';

Now open app/styles/theme/customTheme.scss and choose a theme name to your liking. Open app/config.json and use the same theme name in the theme setting. For example, when using jwplayer as theme name your files should look like this:

app/styles/theme/customTheme.scss

.#{theme-name('jwplayer')} {

    // import theme mixin
    @import '../mixins/theme';

    // overwrite any variable defined in theme mixin

    // $primary-color: yellow;
    // $secondary-color: #ff00ff;
    // $success-color: rgb(0, 0, 0);

    // create theme rules
    @include theme();
}

app/config.json

{
    "version": "2",
    "player": "N8axwZHA",
    "theme": "jwplayer",
    ....

You now can run grunt serve in your terminal and watch your changes apply directly in your browser.

When creating a build, your custom theme is automatically added to the main.css file.

Making Customizations

Main Colors

All components make use of a color palette which can be changed to make things a lot easier. These variables are:

$primary-color
$secondary-color
$success-color
$light-color
$dark-color

For example, if you change the primary color variable, all components using the primary color will be updated accordingly.

.#{theme-name('jwplayer')} {

    // import theme mixin
    @import '../mixins/theme';

    $primary-color: yellow;

    // create theme rules
    @include theme();
}

Component Specific Variables

If you want to make changes to a single component only you can use the component specific variables. All available variables are listed below:

// Body

$body-bg: #d6dbe5 !default;
$body-color: $dark-color !default;
$body-font-family: Helvetica Neue, Helvetica, Arial, sans-serif !default;

// Buttons

$btn-primary-bg: $primary-color !default;
$btn-primary-color: $white !default;

$btn-secondary-bg: $secondary-color !default;
$btn-secondary-color: $white !default;

$btn-light-bg: $light-color !default;
$btn-light-color: #4a4a4a !default;

$btn-dark-bg: $dark-color !default;
$btn-dark-color: $white !default;

$btn-facebook-bg: #3b5998 !default;
$btn-twitter-bg: #55acee !default;

$btn-play-icon-color: $primary-color !default;
$btn-play-border-color: $white !default;

$btn-icon-nested-color: $white !default;
$btn-icon-active-color: $primary-color !default;
$btn-icon-nested-active-color: $white !default;

$btn-effect-bg: rgba($secondary-color, 0.1) !default;

// Card

$card-watch-progress-color: $primary-color !default;
$card-color: $white !default;

$card-info-bg: $white !default;
$card-info-color: #4a4a4a !default;
$card-info-hover-bg: $card-info-bg !default;
$card-info-hover-color: $card-info-color !default;

$card-featured-info-color: $white !default;

$card-toast-primary-bg: $primary-color !default;
$card-toast-primary-color: $white !default;

$card-toast-success-bg: $success-color !default;
$card-toast-success-color: $white !default;

$card-menu-bg: $white !default;

// CardSlider

$card-slider-title-color: $secondary-color !default;
$card-slider-error-title-color: #979797 !default;
$card-slider-border-bottom-color: rgba(#333, 0.2) !default;
$card-slider-border-bottom: 1px solid $card-slider-border-bottom-color !default;
$card-slider-button-color: $white !default;
$card-slider-button-hover-color: $primary-color !default;

$card-slider-featured-bg: #111 !default;
$card-slider-featured-button-color: $white !default;
$card-slider-featured-button-hover-color: $primary-color !default;

$card-slider-odd-bg-color: $body-bg !default;

$card-slider-loading-bg: $black !default;
$card-slider-loading-card-bg: $secondary-color !default;

$card-slider-error-bg: $black !default;
$card-slider-error-card-bg: $secondary-color !default;

// Cookies

$cookies-title-color: $primary-color !default;
$cookies-color: $dark-color !default;
$cookies-bg: $white !default;

// Footer

$footer-color: #000 !default;

// Header

$header-bg: $white !default;
$header-color: $secondary-color !default;
$header-hover-color: $primary-color !default;

$search-bg: $header-bg !default;
$search-color: inherit !default;
$search-border: 1px solid $light-color !default;

// Modal

$modal-bg: $light-color !default;
$modal-color: $black !default;

// Offline

$offline-bg: $primary-color !default;
$offline-color: $white !default;

// Loading

$loading-color: $primary-color !default;

// Popups

$popup-backdrop-bg: rgba(#000, 0.4) !default;
$popup-bg: $white !default;
$popup-color: #4a4a4a !default;

// Rail

$rail-header-bg: $white !default;
$rail-header-color: $secondary-color !default;
$rail-item-color: $white;

// Scroll

$scroll-track-bg: $white !default;
$scroll-indicator-bg: rgba($secondary-color, 0.75) !default;

// Sidebar

$sidebar-bg: $white !default;
$sidebar-color: $secondary-color !default;

// Toggle

$toggle-default-color: #d7dce5 !default;
$toggle-checked-color: $secondary-color !default;
$toggle-button-bg: $white !default;

// Toolbar

$toolbar-bg: $white !default;
$toolbar-color: $secondary-color !default;
$toolbar-hover-color: $primary-color !default;
$toolbar-nav-border: 1px solid lighten($toolbar-bg, 5%) !default;

$row-inverse-bg: #444 !default;
$row-inverse-color: $white !default;

// Video

$video-layout-bg: #e2e5ec !default;

// VideoDetails

$video-details-bg: transparent !default;
$video-details-color: $secondary-color !default;

$video-details-tag-bg: $dark-color !default;
$video-details-tag-hover-bg: darken($dark-color, 5%) !default;
$video-details-tag-color: $white !default;
$video-details-tag-hover-color: $white !default;
$video-details-tag-shadow: 0 1px 0 $black !default;