tools/winscope/src/material-theme.scss

/*
 * Copyright (C) 2022 The Android Open Source Project
 *
 * 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.
 */
@use 'sass:map';
@use '@angular/material' as mat;

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '//fonts.googleapis.com/css2?family=Google+Sans';
@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';

$typography: mat.define-typography-config(
    $font-family: 'Roboto, sans-serif'
);

$light-primary: mat.define-palette(mat.$blue-palette, 700);
$dark-primary: mat.define-palette(mat.$blue-palette, 400);
$light-accent: mat.define-palette(mat.$grey-palette, 700);
$dark-accent: mat.define-palette(mat.$grey-palette, 500);
$warn: mat.define-palette(mat.$red-palette);

$light-theme: mat.define-light-theme((
 color: (
   primary: $light-primary,
   accent: $light-accent,
   warn: $warn,
 ),
 density: 0,
 typography: null, // Set typography on mat.core() only, to avoid duplicates.
));

$dark-theme: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $warn,
  )
));

@mixin background-color($theme) {
  $config: mat.get-color-config($theme);
  $background: map.get($config, background);

  & {
    --background-color: #{mat.get-color-from-palette($background, background)};
  }
}

@mixin border-color($theme) {
  $config: mat.get-color-config($theme);
  $foreground: map.get($config, foreground);

  & {
    --border-color: #{mat.get-color-from-palette($foreground, divider)};
  }
}

@mixin drawer-color($theme) {
  $config: mat.get-color-config($theme);
  $background: map.get($config, background);
  & {
    --drawer-color: #{mat.get-color-from-palette($background, dialog)};
  }
}

@include mat.core($typography);
@include mat.all-component-themes($light-theme);

body:not(.dark-mode) {
  --added-element-color: #D8EAC5;
  @include background-color($light-theme);
  --blue-text-color: #{map.get(mat.$indigo-palette, A200)};
  @include border-color($light-theme);
  --card-title-background-color: #f1f1f1;
  --contrast-text-color: white;
  --current-element-color: #7b9ccc;
  --default-text-color: rgba(0, 0, 0, 0.87);
  --deleted-element-color: #FFCFD0;
  --disabled-color: rgba(0, 0, 0, 0.12);
  --drawer-block-primary: #EEEFF0;
  --drawer-block-secondary: #DDDDDD;
  --drawer-color: var(--background-color);
  --gray-text-color: #7f7f7f;
  --green-text-color: #4e9c00;
  --hover-element-color: #eaeaea;
  --modified-element-color: #b8eaea;
  --overlay-panel-background-color: white;
  --primary: #{mat.get-color-from-palette(mat.$blue-palette, 700)};
  --purple-text-color: #a357e9;
  --red-text-color: #b30000;
  --selected-element-color: #E2ECFF;
  --side-bar-color: #6E6E6E;
  --slider-background-color: #E8F0FE;
  --slider-border-color: #8AB4F8;
  --trace-view-background-color: #E4E4E4;
  --warning-background-color: #ffe9bd;
  --warning-color: #e37400;
  --error-background-color: #ffdada;
  --error-color: #d93025;
  --icon-accent-color: #d9d9d9;
}

body.dark-mode {
  @include mat.all-component-colors($dark-theme);
  --added-element-color: #6D8358;
  @include background-color($dark-theme);
  --blue-text-color: #b8e3fd;
  @include border-color($dark-theme);
  --card-title-background-color: #343434;
  --contrast-text-color: rgba(0, 0, 0, 0.87);
  --current-element-color: #365179;
  --default-text-color: white;
  --deleted-element-color: #856566;
  --disabled-color: rgba(255, 255, 255, 0.12);
  --drawer-block-primary: #696563;
  --drawer-block-secondary: #5e5b5a;
  @include drawer-color($dark-theme);
  --gray-text-color: #aeaeae;
  --green-text-color: #6ad400;
  --hover-element-color: #656565;
  --modified-element-color: #619696;
  --overlay-panel-background-color: #424242;
  --primary: #{mat.get-color-from-palette(mat.$blue-palette, 400)};
  --purple-text-color: #dbb4ff;
  --red-text-color: #f85252;
  --selected-element-color: #546481;
  --side-bar-color: #dedcdc;
  --slider-background-color: #8AB4F8;
  --slider-border-color: #E8F0FE;
  --trace-view-background-color: #383838;
  --warning-background-color: #FFE9BD80;
  --warning-color: #fbbc04;
  --error-background-color: #FFDADA80;
  --error-color: #f6aea9;
  --icon-accent-color: #969696;
}