Temporal Theme UI

Color themes

• 

  Temporal Theme Dark

• 

  Temporal Theme Light

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.activeBorder#2563EB
• activityBar.background#F8FAFC
• activityBar.border#E2E8F0
• activityBar.foreground#0F172A
• activityBar.inactiveForeground#64748B
• activityBarBadge.background#2563EB
• activityBarBadge.foreground#F8FAFC
• badge.background#2563EB
• badge.foreground#F8FAFC
• button.background#2563EB
• button.border#1D4ED8
• button.foreground#F8FAFC
• button.hoverBackground#1D4ED8
• button.secondaryBackground#E2E8F0
• button.secondaryForeground#0F172A
• button.secondaryHoverBackground#CBD5E1
• checkbox.background#F1F5F9
• checkbox.border#2563EB
• checkbox.foreground#0F172A
• dropdown.background#F1F5F9
• dropdown.border#2563EB
• dropdown.foreground#0F172A
• dropdown.listBackground#F8FAFC
• editor.background#FFFFFF
• editor.findMatchBackground#10B98160
• editor.findMatchHighlightBackground#2563EB40
• editor.foreground#0F172A
• editor.lineHighlightBackground#F8FAFC
• editor.selectionBackground#2563EB40
• editor.selectionHighlightBackground#2563EB30
• editorCursor.foreground#E11D48
• editorGroup.border#2563EB
• editorGroupHeader.tabsBackground#F8FAFC
• editorGroupHeader.tabsBorder#E2E8F0
• editorGutter.addedBackground#059669
• editorGutter.deletedBackground#DC2626
• editorGutter.modifiedBackground#2563EB
• editorIndentGuide.activeBackground1#2563EB
• editorIndentGuide.background1#2563EB30
• editorLineNumber.activeForeground#2563EB
• editorLineNumber.foreground#94A3B8
• editorSuggestWidget.background#F1F5F9
• editorSuggestWidget.border#2563EB
• editorWidget.background#F1F5F9
• editorWidget.border#CBD5E1
• errorForeground#DC2626
• focusBorder#2563EB
• foreground#0F172A
• icon.foreground#64748B
• input.background#F1F5F9
• input.border#2563EB
• input.foreground#0F172A
• input.placeholderForeground#94A3B8
• inputOption.activeBackground#2563EB40
• inputOption.activeBorder#2563EB
• inputOption.activeForeground#0F172A
• list.activeSelectionBackground#2563EB40
• list.activeSelectionForeground#0F172A
• list.focusAndSelectionOutline#2563EB
• list.hoverBackground#2563EB20
• list.inactiveSelectionBackground#F1F5F9
• menu.background#F1F5F9
• menu.border#2563EB
• menu.selectionBackground#2563EB
• menu.selectionForeground#F8FAFC
• menubar.selectionBackground#2563EB40
• menubar.selectionForeground#0F172A
• panel.background#F8FAFC
• panel.border#E2E8F0
• panelTitle.activeBorder#2563EB
• panelTitle.activeForeground#0F172A
• panelTitle.inactiveForeground#64748B
• peekViewEditor.background#F1F5F9
• peekViewEditor.matchHighlightBackground#10B98160
• peekViewResult.background#F8FAFC
• peekViewResult.matchHighlightBackground#2563EB60
• progressBar.background#2563EB
• quickInput.background#F1F5F9
• quickInput.foreground#0F172A
• scrollbar.shadow#00000020
• scrollbarSlider.activeBackground#2563EB80
• scrollbarSlider.background#2563EB60
• scrollbarSlider.hoverBackground#2563EB80
• settings.headerForeground#0F172A
• settings.modifiedItemIndicator#2563EB
• sideBar.background#F8FAFC
• sideBar.border#E2E8F0
• sideBar.foreground#0F172A
• sideBarSectionHeader.background#F1F5F9
• sideBarSectionHeader.border#CBD5E1
• sideBarSectionHeader.foreground#64748B
• sideBarTitle.foreground#2563EB
• statusBar.background#F8FAFC
• statusBar.border#E2E8F0
• statusBar.debuggingBackground#DC2626
• statusBar.debuggingForeground#F8FAFC
• statusBar.foreground#0F172A
• statusBar.noFolderBackground#F1F5F9
• statusBarItem.hoverBackground#2563EB40
• statusBarItem.prominentBackground#2563EB
• statusBarItem.prominentForeground#F8FAFC
• statusBarItem.remoteBackground#64748B
• statusBarItem.remoteForeground#F8FAFC
• tab.activeBackground#FFFFFF
• tab.activeBorder#2563EB
• tab.activeForeground#0F172A
• tab.border#E2E8F0
• tab.hoverBackground#2563EB20
• tab.inactiveBackground#F1F5F9
• tab.inactiveForeground#64748B
• tab.unfocusedActiveBorder#94A3B8
• tab.unfocusedActiveForeground#0F172A
• terminal.foreground#0F172A
• terminal.selectionBackground#2563EB40
• terminalCursor.foreground#2563EB
• textLink.activeForeground#1D4ED8
• textLink.foreground#2563EB
• titleBar.activeBackground#F8FAFC
• titleBar.activeForeground#0F172A
• titleBar.border#E2E8F0
• titleBar.inactiveBackground#F1F5F9
• titleBar.inactiveForeground#64748B
• tree.indentGuidesStroke#2563EB60
• widget.border#CBD5E1
• widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).