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#3B82F6
• activityBar.background#0F172A
• activityBar.border#1E293B
• activityBar.foreground#F8FAFC
• activityBar.inactiveForeground#64748B
• activityBarBadge.background#3B82F6
• activityBarBadge.foreground#0F172A
• badge.background#3B82F6
• badge.foreground#0F172A
• button.background#3B82F6
• button.border#2563EB
• button.foreground#0F172A
• button.hoverBackground#2563EB
• button.secondaryBackground#1E293B
• button.secondaryForeground#F8FAFC
• button.secondaryHoverBackground#334155
• checkbox.background#1E293B
• checkbox.border#3B82F6
• checkbox.foreground#F8FAFC
• dropdown.background#1E293B
• dropdown.border#3B82F6
• dropdown.foreground#F8FAFC
• dropdown.listBackground#0F172A
• editor.background#0F172A
• editor.findMatchBackground#10B98160
• editor.findMatchHighlightBackground#3B82F640
• editor.foreground#F8FAFC
• editor.lineHighlightBackground#1E293B
• editor.selectionBackground#3B82F640
• editor.selectionHighlightBackground#3B82F630
• editorCursor.foreground#FF00ED
• editorGroup.border#3B82F6
• editorGroupHeader.tabsBackground#0F172A
• editorGroupHeader.tabsBorder#1E293B
• editorGutter.addedBackground#10B981
• editorGutter.deletedBackground#EF4444
• editorGutter.modifiedBackground#3B82F6
• editorIndentGuide.activeBackground1#3B82F6
• editorIndentGuide.background1#3B82F630
• editorLineNumber.activeForeground#3B82F6
• editorLineNumber.foreground#64748B
• editorSuggestWidget.background#1E293B
• editorSuggestWidget.border#3B82F6
• editorWidget.background#1E293B
• editorWidget.border#334155
• errorForeground#EF4444
• focusBorder#3B82F6
• foreground#F8FAFC
• icon.foreground#94A3B8
• input.background#1E293B
• input.border#3B82F6
• input.foreground#F8FAFC
• input.placeholderForeground#64748B
• inputOption.activeBackground#3B82F640
• inputOption.activeBorder#3B82F6
• inputOption.activeForeground#F8FAFC
• list.activeSelectionBackground#3B82F640
• list.activeSelectionForeground#F8FAFC
• list.focusAndSelectionOutline#3B82F6
• list.hoverBackground#3B82F620
• list.inactiveSelectionBackground#1E293B
• menu.background#1E293B
• menu.border#3B82F6
• menu.selectionBackground#3B82F6
• menu.selectionForeground#0F172A
• menubar.selectionBackground#3B82F640
• menubar.selectionForeground#F8FAFC
• panel.background#0F172A
• panel.border#1E293B
• panelTitle.activeBorder#3B82F6
• panelTitle.activeForeground#F8FAFC
• panelTitle.inactiveForeground#64748B
• peekViewEditor.background#1E293B
• peekViewEditor.matchHighlightBackground#10B98160
• peekViewResult.background#0F172A
• peekViewResult.matchHighlightBackground#3B82F660
• progressBar.background#3B82F6
• quickInput.background#1E293B
• quickInput.foreground#F8FAFC
• scrollbar.shadow#00000040
• scrollbarSlider.activeBackground#3B82F680
• scrollbarSlider.background#3B82F660
• scrollbarSlider.hoverBackground#3B82F680
• settings.headerForeground#F8FAFC
• settings.modifiedItemIndicator#3B82F6
• sideBar.background#0F172A
• sideBar.border#1E293B
• sideBar.foreground#F8FAFC
• sideBarSectionHeader.background#1E293B
• sideBarSectionHeader.border#334155
• sideBarSectionHeader.foreground#94A3B8
• sideBarTitle.foreground#3B82F6
• statusBar.background#0F172A
• statusBar.border#1E293B
• statusBar.debuggingBackground#EF4444
• statusBar.debuggingForeground#F8FAFC
• statusBar.foreground#F8FAFC
• statusBar.noFolderBackground#1E293B
• statusBarItem.hoverBackground#3B82F640
• statusBarItem.prominentBackground#3B82F6
• statusBarItem.prominentForeground#0F172A
• statusBarItem.remoteBackground#94A3B8
• statusBarItem.remoteForeground#0F172A
• tab.activeBackground#0F172A
• tab.activeBorder#3B82F6
• tab.activeForeground#F8FAFC
• tab.border#1E293B
• tab.hoverBackground#3B82F620
• tab.inactiveBackground#1E293B
• tab.inactiveForeground#64748B
• tab.unfocusedActiveBorder#94A3B8
• tab.unfocusedActiveForeground#F8FAFC
• terminal.foreground#F8FAFC
• terminal.selectionBackground#3B82F640
• terminalCursor.foreground#3B82F6
• textLink.activeForeground#60A5FA
• textLink.foreground#3B82F6
• titleBar.activeBackground#0F172A
• titleBar.activeForeground#F8FAFC
• titleBar.border#1E293B
• titleBar.inactiveBackground#1E293B
• titleBar.inactiveForeground#64748B
• tree.indentGuidesStroke#3B82F660
• widget.border#334155
• widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).