thingsboard/ui-ngx/src/theme.scss

/**
 * Copyright © 2016-2019 The Thingsboard Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import '~@angular/material/theming';
@import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
@import './scss/constants';

@include mat-core();

$tb-primary-color: #305680;
$tb-secondary-color: #527dad;
$tb-hue3-color: #a7c1de;

$tb-dark-primary-color: #9fa8da;

$tb-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: $tb-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$tb-primary: mat-palette($tb-mat-indigo);
$tb-accent: mat-palette($mat-deep-orange);

// Background palette for light themes.
$tb-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: #eee, // map_get($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

@function get-tb-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $tb-light-theme-background,
  );
}

$tb-theme: get-tb-light-theme(
    $tb-primary,
    $tb-accent
);

$primary: mat-color($tb-primary);
$accent: mat-color($tb-accent);

$tb-dark-mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: $tb-dark-primary-color,
  600: $tb-secondary-color,
  700: #303f9f,
  800: $tb-primary-color,
  900: #1a237e,
  A100: $tb-hue3-color,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: map_get($tb-mat-indigo, 900),
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$tb-dark-primary: mat-palette($tb-dark-mat-indigo);

$tb-dark-theme-background: (
  status-bar: black,
  app-bar:    map_get($tb-dark-mat-indigo, 900),
  background: map_get($tb-dark-mat-indigo, 800),
  hover:      rgba(white, 0.04),
  card:       map_get($tb-dark-mat-indigo, 800),
  dialog:     map_get($tb-dark-mat-indigo, 800),
  disabled-button: rgba(white, 0.12),
  raised-button: map-get($tb-dark-mat-indigo, 50),
  focused-button: $light-focused,
  selected-button: map_get($tb-dark-mat-indigo, 900),
  selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get($tb-dark-mat-indigo, 700),
  disabled-list-option: black,
);

@function get-tb-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $tb-dark-theme-background,
  );
}

$tb-dark-theme: get-tb-dark-theme(
    $tb-dark-primary,
    $tb-accent
);

@mixin mat-fab-toolbar-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  mat-fab-toolbar {
    .mat-fab-toolbar-background {
      background: mat-color($background, app-bar);
      color: mat-color($foreground, text);
    }
    &.mat-primary {
      .mat-fab-toolbar-background {
        @include _mat-toolbar-color($primary);
      }
    }
    &.mat-accent {
      .mat-fab-toolbar-background {
        @include _mat-toolbar-color($accent);
      }
    }
    &.mat-warn {
      .mat-fab-toolbar-background {
        @include _mat-toolbar-color($warn);
      }
    }
  }
}

@mixin tb-components-theme($theme) {
  $primary: map-get($theme, primary);

  mat-toolbar{
    &.mat-hue-3 {
      background-color: mat-color($primary, 'A100');
    }
  }

  @include mat-fab-toolbar-theme($tb-theme);
}

.tb-default {
  @include angular-material-theme($tb-theme);
  @include mat-datetimepicker-theme($tb-theme);
  @include tb-components-theme($tb-theme);
}

.tb-dark {
  @include angular-material-theme($tb-dark-theme);
}