chore: support dark theme in recorder & tv (#18389)

packages/html-reporter/src/common.css

@@ -16,7 +16,6 @@
 
 :root {
   --box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
-  --monospace-font: "SF Mono", Monaco, Consolas, "Droid Sans Mono", Inconsolata, "Courier New",monospace;
   --box-shadow-thick: rgb(0 0 0 / 10%) 0px 1.8px 1.9px,
     rgb(0 0 0 / 15%) 0px 6.1px 6.3px,
     rgb(0 0 0 / 10%) 0px -2px 4px,

packages/html-reporter/src/metadataView.tsx

@@ -68,7 +68,7 @@ const InnerMetadataView: React.FC<Metainfo> = metadata => {
   return (
     <AutoChip header={
       <span>
-        {metadata['revision.id'] && <span style={{ float: 'right', fontFamily: 'var(--monospace-font)' }}>
+        {metadata['revision.id'] && <span style={{ float: 'right' }}>
           {metadata['revision.id'].slice(0, 7)}
         </span>}
         {metadata['revision.subject'] || 'Commit Metainfo'}
@@ -82,7 +82,7 @@ const InnerMetadataView: React.FC<Metainfo> = metadata => {
       {metadata['revision.id'] &&
         <MetadatViewItem
           testId='revision.id'
-          content={<span style={{ fontFamily: 'var(--monospace-font)' }}>{metadata['revision.id']}</span>}
+          content={<span>{metadata['revision.id']}</span>}
           href={metadata['revision.link']}
           icon='commit'
         />

packages/recorder/src/callLog.css

@@ -20,7 +20,6 @@
   flex: auto;
   line-height: 20px;
   white-space: pre;
-  background: white;
   overflow: auto;
 }
 
@@ -35,7 +34,7 @@
   display: flex;
   flex: none;
   flex-direction: column;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--vscode-panel-border);
 }
 
 .call-log-call-header {
@@ -58,7 +57,7 @@
 
 .call-log-call.error {
   background-color: #fff0f0;
-  border-top: 1px solid #ffd6d6;
+  border-top: 1px solid var(--vscode-panel-border);
 }
 
 .call-log-call.error .call-log-call-header,
@@ -90,7 +89,7 @@
 
 .call-log-call .codicon.preview {
   visibility: hidden;
-  color: var(--toolbar-color);
+  color: var(--vscode-sideBarTitle-foreground);
   cursor: pointer;
 }
 

packages/recorder/src/recorder.css

@@ -20,21 +20,11 @@
   flex: auto;
 }
 
-.recorder-paused-infobar {
-  display: flex;
-  color: #eee;
-  background-color: #333;
-  line-height: 24px;
-  align-items: center;
-  flex: none;
-  white-space: nowrap;
-}
-
 .recorder-chooser {
   border: none;
   background: none;
   outline: none;
-  color: var(--toolbar-color);
+  color: var(--vscode-sideBarTitle-foreground);
   min-width: 100px;
 }
 

packages/trace-viewer/src/ui/actionList.css

@@ -14,13 +14,17 @@
   limitations under the License.
 */
 
+.action-list {
+  background-color: var(--vscode-sideBar-background);
+  border-top: 1px solid var(--vscode-panel-border);
+}
+
 .action-list-content {
   display: flex;
   flex-direction: column;
   flex: auto;
   position: relative;
   user-select: none;
-  color: #555;
   overflow: auto;
   outline: none;
 }
@@ -37,20 +41,17 @@
 
 .action-entry.highlighted,
 .action-entry.selected {
-  background-color: var(--gray);
+  background-color: var(--vscode-list-inactiveSelectionBackground);
 }
 
 .action-entry.highlighted {
-  background-color: var(--light-gray);
+  background-color: var(--vscode-list-inactiveSelectionBackground);
 }
 
 .action-list-content:focus .action-entry.selected {
-  background-color: var(--blue);
+  background-color: var(--vscode-list-activeSelectionBackground);
-}
+  color: var(--vscode-list-activeSelectionForeground);
-
+  outline: 1px solid var(--vscode-focusBorder);
-.action-entry.highlighted *,
-.action-entry.selected * {
-  color: white !important;
 }
 
 .action-title {

packages/trace-viewer/src/ui/callTab.css

@@ -24,7 +24,7 @@
 }
 
 .call-error {
-  border-bottom: 1px solid var(--background);
+  border-bottom: 1px solid var(--vscode-panel-border);
   padding: 3px 0 3px 12px;
 }
 
@@ -37,12 +37,13 @@
 
 .call-section {
   padding-left: 6px;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--vscode-panel-border);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 10px;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--vscode-panel-border);
-  background-color: #efefef;
+  background-color: var(--vscode-sideBar-background);
+  color: var(--vscode-sideBarTitle-foreground);
   line-height: 18px;
 }
 

packages/trace-viewer/src/ui/networkResourceDetails.css

@@ -19,17 +19,11 @@
   display: flex;
   align-items: center;
   padding: 0 3px;
-  background: #fdfcfc;
   width: 100%;
   flex: none;
   outline: none;
 }
 
-.network-request.selected,
-.network-request:hover {
-  border-color: var(--inactive-focus-ring);
-}
-
 .network-request.selected:focus {
   border-color: var(--orange);
 }
@@ -79,7 +73,7 @@
 .network-request-body {
   white-space: pre;
   overflow: scroll;
-  background-color: var(--network-content-bg);
+  background-color: var(--vscode-sideBar-background);
   border: black 1px solid;
   max-height: 500px;
 }
@@ -87,7 +81,7 @@
 .network-request-response-body {
   white-space: pre;
   overflow: scroll;
-  background-color: var(--network-content-bg);
+  background-color: var(--vscode-sideBar-background);
   border: black 1px solid;
   max-height: 500px;
 }

packages/trace-viewer/src/ui/snapshotTab.css

@@ -24,10 +24,10 @@
 
 .snapshot-controls {
   flex: none;
-  color: var(--toolbar-color);
+  background-color: var(--vscode-sideBar-background);
+  color: var(--vscode-sideBarTitle-foreground);
   display: flex;
   box-shadow: var(--box-shadow);
-  background-color: var(--toolbar-bg-color);
   height: 32px;
   align-items: center;
   justify-content: center;
@@ -65,10 +65,10 @@
 }
 
 .snapshot-url {
-  background-color: var(--background);
+  color: var(--vscode-input-foreground);
+  background-color: var(--vscode-input-background);
   margin: 10px;
   padding: 4px;
-  border-radius: 3px;
   height: 28px;
   white-space: nowrap;
   text-overflow: ellipsis;

packages/trace-viewer/src/ui/stackTrace.css

@@ -31,9 +31,13 @@
   padding: 0 5px;
 }
 
-.stack-trace-frame.selected,
 .stack-trace-frame:hover {
-  background-color: #eaeaea;
+  background-color: var(--vscode-list-inactiveSelectionBackground);
+}
+
+.stack-trace-frame:selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
 }
 
 .stack-trace-frame-function {

packages/trace-viewer/src/ui/tabbedPane.css

@@ -27,10 +27,9 @@
 }
 
 .tab-strip {
-  color: var(--toolbar-color);
   display: flex;
-  box-shadow: var(--box-shadow);
+  background-color: var(--vscode-sideBar-background);
-  background-color: var(--toolbar-bg-color);
+  color: var(--vscode-sideBarTitle-foreground);
   height: 32px;
   align-items: center;
   padding-right: 10px;
@@ -73,9 +72,5 @@
 }
 
 .tab-element.selected {
-  border-bottom-color: #666;
+  background-color: var(--vscode-tab-activeBackground);
-}
-
-.tab-element:hover {
-  color: #333;
 }

packages/trace-viewer/src/ui/timeline.css

@@ -135,7 +135,7 @@
   top: 0;
   bottom: 0;
   margin-left: 2px;
-  background-color: #fffffff0;
+  background-color: var(--vscode-panel-background);
   justify-content: center;
   display: none;
   white-space: nowrap;

packages/trace-viewer/src/ui/workbench.css

@@ -113,8 +113,3 @@
 .workbench .spacer {
   flex: auto;
 }
-
-.tab-strip {
-  background-color: var(--light-background);
-}
-

packages/trace-viewer/src/ui/workbench.tsx

@@ -157,7 +157,7 @@ export const Workbench: React.FunctionComponent<{
       {model.title && <div className='title'>{model.title}</div>}
       <div className='spacer'></div>
     </div>
-    <div style={{ background: 'white', paddingLeft: '20px', flex: 'none', borderBottom: '1px solid #ddd' }}>
+    <div style={{ paddingLeft: '20px', flex: 'none', borderBottom: '1px solid var(--vscode-panel-border)' }}>
       <Timeline
         context={model}
         boundaries={boundaries}

packages/web/src/common.css

@@ -15,13 +15,6 @@
 */
 
 :root {
-  --toolbar-bg-color: #fafafa;
-  --toolbar-color: #555;
-
-  --light-background: #f3f2f1;
-  --background: #edebe9;
-  --active-background: #333333;
-  --color: #252423;
   --red: #F44336;
   --green: #367c39;
   --purple: #9C27B0;
@@ -30,21 +23,20 @@
   --blue: #0b7ad5;
   --transparent-blue: #2196F355;
   --orange: #d24726;
-  --black: #1E1E1E;
-  --light-gray: #BBBBBB;
-  --gray: #888888;
-  --separator: #80808059;
-  --focus-ring: #0E639CCC;
-  --inactive-focus-ring: #80808059;
-  --layout-gap: 10px;
-  --selection: #074771;
-  --control-background: #3C3C3C;
-  --settings: #E7E7E7;
-  --sidebar-width: 250px;
   --light-pink: #ff69b460;
-  --network-content-bg: #dcdcdb;
+  --gray: #888888;
+  --sidebar-width: 250px;
   --box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
-  --monospace-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
+}
+
+@media(prefers-color-scheme: dark) {
+  :root {
+    --green: #28d12f;
+    --yellow: #ff9207;
+    --purple: #dc12ff;
+    --blue: #4dafff;
+    --orange: #ff7171;
+  }
 }
 
 html, body {
@@ -64,9 +56,11 @@ html, body {
 }
 
 body {
-  color: var(--color);
+  background-color: var(--vscode-panel-background);
-  font-size: 14px;
+  color: var(--vscode-foreground);
-  font-family: SegoeUI-SemiBold-final,Segoe UI Semibold,SegoeUI-Regular-final,Segoe UI,"Segoe UI Web (West European)",Segoe,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Tahoma,Helvetica,Arial,sans-serif;
+  font-family: var(--vscode-font-family);
+  font-weight: var(--vscode-font-weight);
+  font-size: var(--vscode-font-size);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -100,8 +94,3 @@ svg {
   flex: auto;
   position: relative;
 }
-
-.code {
-  font-family: var(--monospace-font);
-  color: yellow;
-}

packages/web/src/components/expandable.tsx

@@ -26,7 +26,7 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', whiteSpace: 'nowrap' }}>
       <div
         className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')}
-        style={{ cursor: 'pointer', color: 'var(--color)', marginRight: '4px' }}
+        style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginRight: '4px' }}
         onClick={() => setExpanded(!expanded)} />
       {title}
     </div>

packages/web/src/components/source.css

@@ -14,17 +14,22 @@
   limitations under the License.
 */
 
+@import '../third_party/vscode/colors.css';
+@import '../third_party/highlightjs/highlightjs/github.css';
+@import '../third_party/highlightjs/highlightjs/github-dark.css' (prefers-color-scheme: dark);
+
 .source {
   display: flex;
   flex: auto;
   flex-direction: column;
   white-space: pre;
   overflow: auto;
-  font-family: var(--monospace-font);
-  font-size: 12px;
-  line-height: 20px;
-  background: white;
   user-select: text;
+  font-family: var(--vscode-editor-font-family);
+  font-weight: var(--vscode-editor-font-weight);
+  line-height: 19px;
+  background: var(--vscode-editor-background);
+  color: var(--vscode-editor-foreground);
 }
 
 .source-line {
@@ -38,7 +43,6 @@
   width: 40px;
   margin-right: 3px;
   text-align: right;
-  background: #f6f5f4;
   user-select: none;
   flex: none;
 }

packages/web/src/components/source.tsx

@@ -17,7 +17,6 @@
 import './source.css';
 import * as React from 'react';
 import highlightjs from '../third_party/highlightjs/highlightjs';
-import '../third_party/highlightjs/highlightjs/github.css';
 
 export type SourceHighlight = {
   line: number;

packages/web/src/components/splitView.css

@@ -47,19 +47,19 @@
 }
 
 .split-view.vertical:not(.sidebar-first) > .split-view-sidebar {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--vscode-panel-border);
 }
 
 .split-view.horizontal:not(.sidebar-first) > .split-view-sidebar {
-  border-left: 1px solid #ddd;
+  border-left: 1px solid var(--vscode-panel-border);
 }
 
 .split-view.vertical.sidebar-first > .split-view-sidebar {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--vscode-panel-border);
 }
 
 .split-view.horizontal.sidebar-first > .split-view-sidebar {
-  border-right: 1px solid #ddd;
+  border-right: 1px solid var(--vscode-panel-border);
 }
 
 .split-view-resizer {

packages/web/src/components/toolbar.css

@@ -17,7 +17,8 @@
 .toolbar {
   display: flex;
   box-shadow: var(--box-shadow);
-  background-color: var(--toolbar-bg-color);
+  background-color: var(--vscode-sideBar-background);
+  color: var(--vscode-sideBarTitle-foreground);
   height: 40px;
   align-items: center;
   padding-right: 10px;
@@ -31,19 +32,21 @@
 }
 
 .toolbar input {
-  border: 1px solid #ddd;
   padding: 0 10px;
-  border-radius: 14px;
   line-height: 24px;
-  background: white;
   outline: none;
   margin-left: 10px;
-  color: var(--toolbar-color);
 }
 
 .toolbar select {
-  border: none;
   background: none;
   outline: none;
-  color: var(--toolbar-color);
+  padding: 3px;
+  margin: 2px;
+}
+
+.toolbar input, .toolbar select {
+  border: none;
+  color: var(--vscode-input-foreground);
+  background-color: var(--vscode-input-background);
 }

packages/web/src/components/toolbarButton.css

@@ -17,9 +17,9 @@
 .toolbar-button {
   border: none;
   outline: none;
-  color: var(--toolbar-color);
+  color: var(--vscode-sideBarTitle-foreground);
   background: transparent;
-  padding: 0;
+  padding: 4px;
   margin-left: 10px;
   cursor: pointer;
   display: inline-flex;
@@ -27,14 +27,14 @@
 }
 
 .toolbar-button:disabled {
-  color: #bbb !important;
+  color: var(--vscode-disabledForeground) !important;
   cursor: default;
 }
 
-.toolbar-button:not(.disabled):hover {
+.toolbar-button:not(:disabled):hover {
-  color: #333;
+  background-color: var(--vscode-toolbar-hoverBackground);
 }
 
-.toolbar-button .codicon {
+.toolbar-button:not(:disabled):active {
-  margin-right: 4px;
+  background-color: var(--vscode-toolbar-activeBackground);
 }