Skip to main content
Coding Theme

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#505050
  • activityBar.background#222222
  • activityBar.border#2C2C2C
  • activityBar.foreground#E0E0E0DE
  • activityBar.inactiveForeground#FFFFFF66
  • activityBarBadge.background#3A3A3A
  • activityBarBadge.foreground#E0E0E0
  • badge.background#3A3A3A
  • badge.foreground#E0E0E0
  • breadcrumb.activeSelectionForeground#E0E0E0
  • breadcrumb.focusForeground#E0E0E099
  • breadcrumb.foreground#B0B0B099
  • breadcrumbPicker.background#1E1E1E
  • button.background#4A4A4A
  • button.foreground#E0E0E0
  • button.hoverBackground#5A5A5A
  • debugExceptionWidget.background#3A3A3A
  • debugExceptionWidget.border#505050
  • debugToolBar.background#272727
  • debugToolBar.border#3A3A3A
  • diffEditor.insertedTextBackground#B5BD6833
  • diffEditor.removedTextBackground#e2909033
  • dropdown.background#272727
  • dropdown.border#3A3A3A
  • dropdown.foreground#E0E0E0
  • dropdown.listBackground#2C2C2C
  • editor.background#222222
  • editor.findMatchBackground#4A4D51
  • editor.findMatchHighlightBackground#4A4D5180
  • editor.foreground#DCDCDC
  • editor.lineHighlightBackground#2A2A2A
  • editor.selectionBackground#3A3D41
  • editor.wordHighlightBackground#3A3D4180
  • editorCursor.foreground#AEAFAD
  • editorError.foreground#E57373
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorGutter.addedBackground#81C784
  • editorGutter.deletedBackground#E57373
  • editorGutter.modifiedBackground#FFB74D
  • editorHoverWidget.background#272727
  • editorHoverWidget.border#3A3A3A
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#2C2C2C
  • editorInfo.foreground#64B5F6
  • editorLineNumber.activeForeground#909090
  • editorLineNumber.foreground#5A5A5A
  • editorOverviewRuler.border#1E1E1E
  • editorSuggestWidget.background#272727
  • editorSuggestWidget.border#3A3A3A
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#64B5F6
  • editorSuggestWidget.selectedBackground#3A3A3A
  • editorWarning.foreground#FFB74D
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#272727
  • editorWidget.border#3A3A3A
  • extensionButton.prominentBackground#64B5F6
  • extensionButton.prominentForeground#1E1E1E
  • extensionButton.prominentHoverBackground#81C784
  • focusBorder#404040
  • foreground#E0E0E0
  • gitDecoration.conflictingResourceForeground#FF8A65
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#81C784
  • input.background#2C2C2C
  • input.border#3A3A3A
  • input.foreground#E0E0E0
  • input.placeholderForeground#FFFFFF61
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#2F2F2F
  • list.hoverBackground#2A2A2A
  • list.inactiveSelectionBackground#2C2C2C
  • panel.background#1E1E1E
  • panel.border#2C2C2C
  • panelTitle.activeBorder#505050
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#B0B0B0A0
  • peekView.border#3A3A3A
  • peekViewEditor.background#1C1C1C
  • peekViewResult.background#222222
  • peekViewTitle.background#272727
  • pickerGroup.border#3A3A3A
  • pickerGroup.foreground#64B5F6
  • scrollbarSlider.activeBackground#5A5A5A80
  • scrollbarSlider.background#3A3A3A80
  • scrollbarSlider.hoverBackground#4A4A4A80
  • selection.background#3A3D41AA
  • sideBar.background#1E1E1E
  • sideBar.border#2C2C2C
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.foreground#E0E0E0
  • sideBarTitle.foreground#E0E0E0A0
  • statusBar.background#1E1E1E
  • statusBar.border#2C2C2C
  • statusBar.debuggingBackground#B294BB
  • statusBar.debuggingForeground#1E1E1E
  • statusBar.foreground#B0B0B0
  • statusBar.noFolderBackground#1E1E1E
  • tab.activeBackground#222222
  • tab.activeBorderTop#505050
  • tab.activeForeground#E0E0E0
  • tab.border#2C2C2C
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#B0B0B0A0
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#81A2BE
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#81A2BE
  • terminal.ansiBrightCyan#8ABEB7
  • terminal.ansiBrightGreen#B5BD68
  • terminal.ansiBrightMagenta#B294BB
  • terminal.ansiBrightRed#e29090
  • terminal.ansiBrightWhite#ffffffde
  • terminal.ansiBrightYellow#f7df9b
  • terminal.ansiCyan#8ABEB7
  • terminal.ansiGreen#B5BD68
  • terminal.ansiMagenta#B294BB
  • terminal.ansiRed#e29090
  • terminal.ansiWhite#DCDCDC
  • terminal.ansiYellow#f7df9b
  • terminal.background#222222
  • terminal.foreground#DCDCDC
  • terminalCursor.background#222222
  • terminalCursor.foreground#AEAFAD
  • textLink.activeForeground#81C784
  • textLink.foreground#64B5F6
  • titleBar.activeBackground#1E1E1E
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#1E1E1E
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#FFFFFF
  • tree.indentGuidesStroke#3A3A3A
  • widget.shadow#0000004D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#707880italic
string, punctuation.definition.string#90AED3
constant.character.escape#B392F0
constant.numeric, constant.language#B392F0
keyword, storage.type, storage.modifier#9BD4B2
keyword.control#9BD4B2
keyword.operator#E0E0E0
entity.name.function, support.function, meta.function-call.generic, meta.method-call.js entity.name.function.js#CEB0D3
entity.name.type, entity.other.inherited-class, support.class, support.type#F7C59F
variable, meta.definition.variable.js, support.variable, variable.parameter, meta.object-literal.key#DCDCDC
variable.other.constant#B392F0italic
entity.name.tag, punctuation.definition.tag#9BD4B2
entity.other.attribute-name#F7C59Fitalic
invalid, invalid.illegal, invalid.deprecated#F44747italic underline
punctuation.accessor, punctuation.separator, punctuation.terminator, meta.brace, punctuation.section.embedded#888888
markup.heading punctuation.definition.heading#CEB0D3bold
markup.bold#F7C59Fbold
markup.italic#F7C59Fitalic
string.other.link.title.markdown,string.other.link.description.markdown#90AED3
markup.underline.link.markdown#B392F0
emphasisitalic
strongbold
sashvat-theme by sashvat-bharat - VS Code Theme