xref: /aosp_15_r20/external/pigweed/pw_web/log-viewer/src/themes/dark.ts (revision 61c4878ac05f98d0ceed94b57d316916de578985) 
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      /* REPL */
57      --sys-repl-gutter-bg: var(--md-sys-color-surface-container-high);
58      --sys-repl-active-gutter-bg: var(--md-sys-color-surface-bright);
59
60      /* Log Viewer */
61      --sys-log-viewer-color-primary: var(--md-sys-color-primary);
62      --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary);
63      --sys-log-viewer-color-bg: var(--md-sys-color-surface);
64
65      /* Log View */
66      --sys-log-viewer-color-view-outline: var(--md-sys-color-outline-variant);
67
68      /* Log View Controls */
69      --sys-log-viewer-color-controls-bg: var(
70        --md-sys-color-surface-container-high
71      );
72      --sys-log-viewer-color-controls-text: var(
73        --md-sys-color-on-surface-variant
74      );
75      --sys-log-viewer-color-controls-input-outline: transparent;
76      --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface);
77      --sys-log-viewer-color-controls-button-enabled: var(
78        --md-sys-color-primary-container
79      );
80
81      /* Log List */
82      --sys-log-viewer-color-table-header-bg: var(
83        --md-sys-color-surface-container
84      );
85      --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
86      --sys-log-viewer-color-table-bg: var(
87        --md-sys-color-surface-container-lowest
88      );
89      --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
90      --sys-log-viewer-color-table-cell-outline: var(
91        --md-sys-color-outline-variant
92      );
93      --sys-log-viewer-color-overflow-indicator: var(
94        --md-sys-color-surface-container-lowest
95      );
96      --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
97      --sys-log-viewer-color-table-mark-text: var(
98        --md-sys-color-on-primary-container
99      );
100      --sys-log-viewer-color-table-mark-outline: var(
101        --md-sys-color-outline-variant
102      );
103      --sys-log-viewer-color-table-row-highlight: var(
104        --md-sys-color-inverse-surface-rgb
105      );
106
107      /* Log Level */
108      --sys-log-viewer-color-error-bright: #e46962;
109      --sys-log-viewer-color-surface-error: #601410;
110      --sys-log-viewer-color-on-surface-error: #f9dedc;
111      --sys-log-viewer-color-orange-bright: #ee9836;
112      --sys-log-viewer-color-surface-yellow: #402d00;
113      --sys-log-viewer-color-on-surface-yellow: #ffdfa0;
114      --sys-log-viewer-color-debug: var(--md-sys-color-primary-60);
115      --sys-log-viewer-color-info: #575c5b;
116    }
117  }
118
119  /* Manual theme styles */
120  :host([colorscheme='dark']) {
121    color-scheme: dark;
122
123    /* Material Design tokens */
124    --md-sys-color-primary: #a8c7fa;
125    --md-sys-color-primary-60: #4c8df6;
126    --md-sys-color-primary-container: #0842a0;
127    --md-sys-color-on-primary: #062e6f;
128    --md-sys-color-on-primary-container: #d3e3fd;
129    --md-sys-color-inverse-primary: #0b57d0;
130    --md-sys-color-secondary: #7fcfff;
131    --md-sys-color-secondary-container: #004a77;
132    --md-sys-color-on-secondary: #003355;
133    --md-sys-color-on-secondary-container: #c2e7ff;
134    --md-sys-color-tertiary: #6dd58c;
135    --md-sys-color-tertiary-container: #0f5223;
136    --md-sys-color-on-tertiary: #0a3818;
137    --md-sys-color-on-tertiary-container: #c4eed0;
138    --md-sys-color-surface: #131314;
139    --md-sys-color-surface-dim: #131314;
140    --md-sys-color-surface-bright: #37393b;
141    --md-sys-color-surface-container-lowest: #0e0e0e;
142    --md-sys-color-surface-container-low: #1b1b1b;
143    --md-sys-color-surface-container: #1e1f20;
144    --md-sys-color-surface-container-high: #282a2c;
145    --md-sys-color-surface-container-highest: #333537;
146    --md-sys-color-on-surface: #e3e3e3;
147    --md-sys-color-on-surface-variant: #c4c7c5;
148    --md-sys-color-inverse-surface: #e3e3e3;
149    --md-sys-color-inverse-on-surface: #303030;
150    --md-sys-color-outline: #8e918f;
151    --md-sys-color-outline-variant: #444746;
152    --md-sys-color-shadow: #000000;
153    --md-sys-color-scrim: #000000;
154    --md-sys-color-inverse-surface-rgb: 230, 225, 229;
155
156    /* REPL */
157    --sys-repl-gutter-bg: var(--md-sys-color-surface-container-high);
158    --sys-repl-active-gutter-bg: var(--md-sys-color-surface-bright);
159
160    /* Log Viewer */
161    --sys-log-viewer-color-primary: var(--md-sys-color-primary);
162    --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary);
163    --sys-log-viewer-color-bg: var(--md-sys-color-surface);
164
165    /* Log View */
166    --sys-log-viewer-color-view-outline: var(--md-sys-color-outline-variant);
167
168    /* Log View Controls */
169    --sys-log-viewer-color-controls-bg: var(
170      --md-sys-color-surface-container-high
171    );
172    --sys-log-viewer-color-controls-text: var(
173      --md-sys-color-on-surface-variant
174    );
175    --sys-log-viewer-color-controls-input-outline: transparent;
176    --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface);
177    --sys-log-viewer-color-controls-button-enabled: var(
178      --md-sys-color-primary-container
179    );
180
181    /* Log List */
182    --sys-log-viewer-color-table-header-bg: var(
183      --md-sys-color-surface-container
184    );
185    --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
186    --sys-log-viewer-color-table-bg: var(
187      --md-sys-color-surface-container-lowest
188    );
189    --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
190    --sys-log-viewer-color-table-cell-outline: var(
191      --md-sys-color-outline-variant
192    );
193    --sys-log-viewer-color-overflow-indicator: var(
194      --md-sys-color-surface-container-lowest
195    );
196    --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
197    --sys-log-viewer-color-table-mark-text: var(
198      --md-sys-color-on-primary-container
199    );
200    --sys-log-viewer-color-table-mark-outline: var(
201      --md-sys-color-outline-variant
202    );
203    --sys-log-viewer-color-table-row-highlight: var(
204      --md-sys-color-inverse-surface-rgb
205    );
206
207    /* Log Level */
208    --sys-log-viewer-color-error-bright: #e46962;
209    --sys-log-viewer-color-surface-error: #601410;
210    --sys-log-viewer-color-on-surface-error: #f9dedc;
211    --sys-log-viewer-color-orange-bright: #ee9836;
212    --sys-log-viewer-color-surface-yellow: #402d00;
213    --sys-log-viewer-color-on-surface-yellow: #ffdfa0;
214    --sys-log-viewer-color-debug: var(--md-sys-color-primary-60);
215    --sys-log-viewer-color-info: #575c5b;
216  }
217`;
218