1/* 2 * Copyright (C) 2022 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16@use 'sass:map'; 17@use '@angular/material' as mat; 18 19@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; 20@import '//fonts.googleapis.com/css2?family=Google+Sans'; 21@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0'; 22 23$typography: mat.define-typography-config( 24 $font-family: 'Roboto, sans-serif' 25); 26 27$light-primary: mat.define-palette(mat.$blue-palette, 700); 28$dark-primary: mat.define-palette(mat.$blue-palette, 400); 29$light-accent: mat.define-palette(mat.$grey-palette, 700); 30$dark-accent: mat.define-palette(mat.$grey-palette, 500); 31$warn: mat.define-palette(mat.$red-palette); 32 33$light-theme: mat.define-light-theme(( 34 color: ( 35 primary: $light-primary, 36 accent: $light-accent, 37 warn: $warn, 38 ), 39 density: 0, 40 typography: null, // Set typography on mat.core() only, to avoid duplicates. 41)); 42 43$dark-theme: mat.define-dark-theme(( 44 color: ( 45 primary: $dark-primary, 46 accent: $dark-accent, 47 warn: $warn, 48 ) 49)); 50 51@mixin background-color($theme, $contrast-theme) { 52 $config: mat.get-color-config($theme); 53 $background: map.get($config, background); 54 55 $contrast-config: mat.get-color-config($contrast-theme); 56 $contrast-background: map.get($contrast-config, background); 57 & { 58 --background-color: #{mat.get-color-from-palette($background, background)}; 59 --contrast-background-color: #{mat.get-color-from-palette($contrast-background, background)}; 60 } 61} 62 63@mixin border-color($theme) { 64 $config: mat.get-color-config($theme); 65 $foreground: map.get($config, foreground); 66 67 & { 68 --border-color: #{mat.get-color-from-palette($foreground, divider)}; 69 } 70} 71 72@mixin drawer-color($theme) { 73 $config: mat.get-color-config($theme); 74 $background: map.get($config, background); 75 & { 76 --drawer-color: #{mat.get-color-from-palette($background, dialog)}; 77 } 78} 79 80@include mat.core($typography); 81@include mat.all-component-themes($light-theme); 82 83body:not(.dark-mode) { 84 --added-element-color: #D8EAC5; 85 @include background-color($light-theme, $dark-theme); 86 --blue-text-color: #{map.get(mat.$indigo-palette, A200)}; 87 @include border-color($light-theme); 88 --card-title-background-color: #f1f1f1; 89 --contrast-text-color: white; 90 --current-element-color: #7b9ccc; 91 --default-text-color: rgba(0, 0, 0, 0.87); 92 --deleted-element-color: #FFCFD0; 93 --disabled-color: rgba(0, 0, 0, 0.12); 94 --drawer-block-primary: #EEEFF0; 95 --drawer-block-secondary: #DDDDDD; 96 --drawer-color: var(--background-color); 97 --gray-text-color: #7f7f7f; 98 --green-text-color: #4e9c00; 99 --hover-element-color: #eaeaea; 100 --modified-element-color: #b8eaea; 101 --overlay-panel-background-color: white; 102 --primary: #{mat.get-color-from-palette(mat.$blue-palette, 700)}; 103 --purple-text-color: #a357e9; 104 --red-text-color: #b30000; 105 --selected-element-color: #E2ECFF; 106 --side-bar-color: #6E6E6E; 107 --slider-background-color: #E8F0FE; 108 --slider-border-color: #8AB4F8; 109 --trace-view-background-color: #E4E4E4; 110 --warning-background-color: #ffe9bd; 111 --warning-color: #e37400; 112 --error-background-color: #ffdada; 113 --error-color: #d93025; 114 --icon-accent-color: #d9d9d9; 115} 116 117body.dark-mode { 118 @include mat.all-component-colors($dark-theme); 119 --added-element-color: #6D8358; 120 @include background-color($dark-theme, $light-theme); 121 --blue-text-color: #b8e3fd; 122 @include border-color($dark-theme); 123 --card-title-background-color: #343434; 124 --contrast-text-color: rgba(0, 0, 0, 0.87); 125 --current-element-color: #365179; 126 --default-text-color: white; 127 --deleted-element-color: #856566; 128 --disabled-color: rgba(255, 255, 255, 0.12); 129 --drawer-block-primary: #696563; 130 --drawer-block-secondary: #5e5b5a; 131 @include drawer-color($dark-theme); 132 --gray-text-color: #aeaeae; 133 --green-text-color: #6ad400; 134 --hover-element-color: #656565; 135 --modified-element-color: #619696; 136 --overlay-panel-background-color: #424242; 137 --primary: #{mat.get-color-from-palette(mat.$blue-palette, 400)}; 138 --purple-text-color: #dbb4ff; 139 --red-text-color: #f85252; 140 --selected-element-color: #546481; 141 --side-bar-color: #dedcdc; 142 --slider-background-color: #8AB4F8; 143 --slider-border-color: #E8F0FE; 144 --trace-view-background-color: #383838; 145 --warning-background-color: #FFE9BD80; 146 --warning-color: #fbbc04; 147 --error-background-color: #FFDADA80; 148 --error-color: #f6aea9; 149 --icon-accent-color: #969696; 150} 151