1// Copyright 2023 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15import { css } from 'lit'; 16 17export const themeDark = css` 18 /* Automatic theme styles */ 19 @media (prefers-color-scheme: dark) { 20 :host { 21 color-scheme: dark; 22 23 /* Material Design tokens */ 24 --md-sys-color-primary: #a8c7fa; 25 --md-sys-color-primary-60: #4c8df6; 26 --md-sys-color-primary-container: #0842a0; 27 --md-sys-color-on-primary: #062e6f; 28 --md-sys-color-on-primary-container: #d3e3fd; 29 --md-sys-color-inverse-primary: #0b57d0; 30 --md-sys-color-secondary: #7fcfff; 31 --md-sys-color-secondary-container: #004a77; 32 --md-sys-color-on-secondary: #003355; 33 --md-sys-color-on-secondary-container: #c2e7ff; 34 --md-sys-color-tertiary: #6dd58c; 35 --md-sys-color-tertiary-container: #0f5223; 36 --md-sys-color-on-tertiary: #0a3818; 37 --md-sys-color-on-tertiary-container: #c4eed0; 38 --md-sys-color-surface: #131314; 39 --md-sys-color-surface-dim: #131314; 40 --md-sys-color-surface-bright: #37393b; 41 --md-sys-color-surface-container-lowest: #0e0e0e; 42 --md-sys-color-surface-container-low: #1b1b1b; 43 --md-sys-color-surface-container: #1e1f20; 44 --md-sys-color-surface-container-high: #282a2c; 45 --md-sys-color-surface-container-highest: #333537; 46 --md-sys-color-on-surface: #e3e3e3; 47 --md-sys-color-on-surface-variant: #c4c7c5; 48 --md-sys-color-inverse-surface: #e3e3e3; 49 --md-sys-color-inverse-on-surface: #303030; 50 --md-sys-color-outline: #8e918f; 51 --md-sys-color-outline-variant: #444746; 52 --md-sys-color-shadow: #000000; 53 --md-sys-color-scrim: #000000; 54 --md-sys-color-inverse-surface-rgb: 230, 225, 229; 55 56 /* General */ 57 --sys-log-viewer-color-primary: var(--md-sys-color-primary); 58 --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary); 59 60 /* Log Viewer */ 61 --sys-log-viewer-color-bg: var(--md-sys-color-surface); 62 63 /* Log View */ 64 --sys-log-viewer-color-view-outline: var(--md-sys-color-outline-variant); 65 66 /* Log View Controls */ 67 --sys-log-viewer-color-controls-bg: var( 68 --md-sys-color-surface-container-high 69 ); 70 --sys-log-viewer-color-controls-text: var( 71 --md-sys-color-on-surface-variant 72 ); 73 --sys-log-viewer-color-controls-input-outline: transparent; 74 --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface); 75 --sys-log-viewer-color-controls-button-enabled: var( 76 --md-sys-color-primary-container 77 ); 78 79 /* Log List */ 80 --sys-log-viewer-color-table-header-bg: var( 81 --md-sys-color-surface-container 82 ); 83 --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface); 84 --sys-log-viewer-color-table-bg: var( 85 --md-sys-color-surface-container-lowest 86 ); 87 --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface); 88 --sys-log-viewer-color-table-cell-outline: var( 89 --md-sys-color-outline-variant 90 ); 91 --sys-log-viewer-color-overflow-indicator: var( 92 --md-sys-color-surface-container-lowest 93 ); 94 --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container); 95 --sys-log-viewer-color-table-mark-text: var( 96 --md-sys-color-on-primary-container 97 ); 98 --sys-log-viewer-color-table-mark-outline: var( 99 --md-sys-color-outline-variant 100 ); 101 --sys-log-viewer-color-table-row-highlight: var( 102 --md-sys-color-inverse-surface-rgb 103 ); 104 105 /* Severity */ 106 --sys-log-viewer-color-error-bright: #e46962; 107 --sys-log-viewer-color-surface-error: #601410; 108 --sys-log-viewer-color-on-surface-error: #f9dedc; 109 --sys-log-viewer-color-orange-bright: #ee9836; 110 --sys-log-viewer-color-surface-yellow: #402d00; 111 --sys-log-viewer-color-on-surface-yellow: #ffdfa0; 112 --sys-log-viewer-color-debug: var(--md-sys-color-primary-60); 113 } 114 } 115 116 /* Manual theme styles */ 117 :host([colorscheme='dark']) { 118 color-scheme: dark; 119 120 /* Material Design tokens */ 121 --md-sys-color-primary: #a8c7fa; 122 --md-sys-color-primary-60: #4c8df6; 123 --md-sys-color-primary-container: #0842a0; 124 --md-sys-color-on-primary: #062e6f; 125 --md-sys-color-on-primary-container: #d3e3fd; 126 --md-sys-color-inverse-primary: #0b57d0; 127 --md-sys-color-secondary: #7fcfff; 128 --md-sys-color-secondary-container: #004a77; 129 --md-sys-color-on-secondary: #003355; 130 --md-sys-color-on-secondary-container: #c2e7ff; 131 --md-sys-color-tertiary: #6dd58c; 132 --md-sys-color-tertiary-container: #0f5223; 133 --md-sys-color-on-tertiary: #0a3818; 134 --md-sys-color-on-tertiary-container: #c4eed0; 135 --md-sys-color-surface: #131314; 136 --md-sys-color-surface-dim: #131314; 137 --md-sys-color-surface-bright: #37393b; 138 --md-sys-color-surface-container-lowest: #0e0e0e; 139 --md-sys-color-surface-container-low: #1b1b1b; 140 --md-sys-color-surface-container: #1e1f20; 141 --md-sys-color-surface-container-high: #282a2c; 142 --md-sys-color-surface-container-highest: #333537; 143 --md-sys-color-on-surface: #e3e3e3; 144 --md-sys-color-on-surface-variant: #c4c7c5; 145 --md-sys-color-inverse-surface: #e3e3e3; 146 --md-sys-color-inverse-on-surface: #303030; 147 --md-sys-color-outline: #8e918f; 148 --md-sys-color-outline-variant: #444746; 149 --md-sys-color-shadow: #000000; 150 --md-sys-color-scrim: #000000; 151 --md-sys-color-inverse-surface-rgb: 230, 225, 229; 152 153 /* General */ 154 --sys-log-viewer-color-primary: var(--md-sys-color-primary); 155 --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary); 156 157 /* Log Viewer */ 158 --sys-log-viewer-color-bg: var(--md-sys-color-surface); 159 160 /* Log View */ 161 --sys-log-viewer-color-view-outline: var(--md-sys-color-outline-variant); 162 163 /* Log View Controls */ 164 --sys-log-viewer-color-controls-bg: var( 165 --md-sys-color-surface-container-high 166 ); 167 --sys-log-viewer-color-controls-text: var( 168 --md-sys-color-on-surface-variant 169 ); 170 --sys-log-viewer-color-controls-input-outline: transparent; 171 --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface); 172 --sys-log-viewer-color-controls-button-enabled: var( 173 --md-sys-color-primary-container 174 ); 175 176 /* Log List */ 177 --sys-log-viewer-color-table-header-bg: var( 178 --md-sys-color-surface-container 179 ); 180 --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface); 181 --sys-log-viewer-color-table-bg: var( 182 --md-sys-color-surface-container-lowest 183 ); 184 --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface); 185 --sys-log-viewer-color-table-cell-outline: var( 186 --md-sys-color-outline-variant 187 ); 188 --sys-log-viewer-color-overflow-indicator: var( 189 --md-sys-color-surface-container-lowest 190 ); 191 --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container); 192 --sys-log-viewer-color-table-mark-text: var( 193 --md-sys-color-on-primary-container 194 ); 195 --sys-log-viewer-color-table-mark-outline: var( 196 --md-sys-color-outline-variant 197 ); 198 --sys-log-viewer-color-table-row-highlight: var( 199 --md-sys-color-inverse-surface-rgb 200 ); 201 202 /* Severity */ 203 --sys-log-viewer-color-error-bright: #e46962; 204 --sys-log-viewer-color-surface-error: #601410; 205 --sys-log-viewer-color-on-surface-error: #f9dedc; 206 --sys-log-viewer-color-orange-bright: #ee9836; 207 --sys-log-viewer-color-surface-yellow: #402d00; 208 --sys-log-viewer-color-on-surface-yellow: #ffdfa0; 209 --sys-log-viewer-color-debug: var(--md-sys-color-primary-60); 210 } 211`; 212