Skip to main content
Coding Theme

Color themes

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.background#181819
  • activityBar.border#333333
  • activityBar.foreground#b7b8bb
  • activityBar.inactiveForeground#727272
  • activityBarBadge.background#151515
  • activityBarBadge.foreground#ccced2
  • badge.background#252729
  • badge.foreground#8c999b
  • button.background#333333
  • button.border#333333
  • debugToolBar.background#252729
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#242429
  • dropdown.border#333333
  • dropdown.listBackground#252729
  • editor.background#181819
  • editor.findMatchBackground#a886da00
  • editor.findMatchBorder#e4d6eeDD
  • editor.findMatchHighlightBackground#9a70da4b
  • editor.findMatchHighlightBorder#c182eecc
  • editor.foreground#c7ced6
  • editor.lineHighlightBackground#252729
  • editor.lineHighlightBorder#16161600
  • editor.rangeHighlightBackground#2f203e20
  • editor.selectionBackground#5c55b875
  • editor.selectionHighlightBackground#200e3240
  • editor.symbolHighlightBackground#3a203ebd
  • editor.wordHighlightBackground#4a4a769d
  • editor.wordHighlightBorder#4a4a7690
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorBracketHighlight.foreground1#c7ced6
  • editorBracketHighlight.foreground2#EBCB8B
  • editorBracketHighlight.foreground3#B48EAD
  • editorBracketHighlight.foreground4#D08770
  • editorBracketHighlight.foreground5#A3BE8C
  • editorBracketMatch.background#79797990
  • editorBracketMatch.border#5b6dd400
  • editorCursor.background#0e0e0e
  • editorCursor.foreground#fafafae5
  • editorGroup.border#242424
  • editorGroup.dropBackground#1c1e1f
  • editorGroupHeader.tabsBackground#252729
  • editorGroupHeader.tabsBorder#333333
  • editorGutter.addedBackground#37ca59
  • editorGutter.deletedBackground#e1445c
  • editorGutter.modifiedBackground#0078d4
  • editorHoverWidget.background#222728ee
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground#786b8570
  • editorIndentGuide.background#41434730
  • editorInlayHint.background#22262800
  • editorInlayHint.foreground#444c50
  • editorLineNumber.activeForeground#c7d5e0
  • editorLineNumber.foreground#55585a
  • editorSuggestWidget.background#1c1e1fd0
  • editorSuggestWidget.border#333333
  • editorUnnecessaryCode.border#ffd900
  • editorUnnecessaryCode.opacity#000000aa
  • editorWhitespace.foreground#41454790
  • editorWidget.background#252729
  • editorWidget.resizeBorder#00000000
  • focusBorder#5c4088
  • gitDecoration.addedResourceForeground#37ca59
  • gitDecoration.deletedResourceForeground#e1445c
  • gitDecoration.ignoredResourceForeground#90959b
  • gitDecoration.modifiedResourceForeground#99d7e5
  • gitDecoration.stageDeletedResourceForeground#e1445c
  • gitDecoration.stageModifiedResourceForeground#99d7e5
  • gitDecoration.untrackedResourceForeground#7fe396
  • input.background#252729
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#ad7aff80
  • list.dropBackground#394043
  • list.highlightForeground#ad7aff
  • list.hoverBackground#394043
  • list.inactiveSelectionBackground#404246
  • menu.background#252729
  • menu.foreground#c7ced6
  • minimap.selectionHighlight#878b9180
  • notificationCenter.border#333333
  • panel.background#131414
  • panel.border#333333
  • panelSection.border#252729
  • panelSectionHeader.background#1c1e1f
  • panelTitle.activeBorder#333333
  • panelTitle.activeForeground#c5c5c0
  • panelTitle.inactiveForeground#6b7172
  • peekView.border#4c4b4d
  • peekViewEditor.background#242427
  • peekViewEditor.matchHighlightBackground#33363a
  • peekViewResult.background#282a2c
  • peekViewResult.matchHighlightBackground#33363a
  • peekViewResult.selectionBackground#33363a
  • peekViewTitle.background#282a2c
  • pickerGroup.border#333333
  • pickerGroup.foreground#5e6575
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#ad7aff60
  • scrollbar.shadow#000000aa
  • scrollbarSlider.background#31323890
  • selection.background#83789180
  • settings.checkboxBackground#242429
  • settings.focusedRowBackground#12121360
  • settings.numberInputBackground#242429
  • settings.rowHoverBackground#15151660
  • settings.textInputBackground#242429
  • sideBar.background#181819
  • sideBar.border#333333
  • sideBarSectionHeader.background#181819
  • sideBarSectionHeader.border#333333
  • sideBarSectionHeader.foreground#8c979b
  • sideBarTitle.foreground#8c969b
  • statusBar.background#252729
  • statusBar.border#333333
  • statusBar.debuggingBackground#2d8d68
  • statusBar.debuggingForeground#f5fdff
  • statusBar.foreground#8c8e9b
  • statusBar.noFolderBackground#1c1e1f
  • statusBarItem.remoteBackground#1a506d
  • statusBarItem.remoteForeground#c1e8ff
  • tab.activeBackground#181819
  • tab.activeBorder#181819
  • tab.activeBorderTop#adaeb1
  • tab.hoverBackground#343738
  • tab.inactiveBackground#252729
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#393d43
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • terminal.background#131414
  • terminal.foreground#d0d3d6
  • titleBar.activeBackground#252729
  • titleBar.inactiveBackground#1e2022
  • tree.inactiveIndentGuidesStroke#3b3b3b
  • tree.indentGuidesStroke#595e61
  • widget.border#333333
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#717a85italic
comment.block.documentation, punctiation.definition.comment, comment.line.double-slash.documentation#90a3aaitalic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#96b7ff—
entity, entity.name#96b7ff—
entity.name.function#d29cf6—
variable.parameter.function#e1e4e8—
entity.name.tag#85e89d—
keyword#f97583—
storage, storage.type, meta.attribute#f97583—
storage.modifier.package, storage.modifier.import, storage.type.java#e1e4e8—
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff—
support#96b7ff—
meta.property-name#96b7ff—
variable.other#e1e4e8—
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic
message.error#ff5c6fstrikethrough
string variable#96b7ff—
source.regexp, string.regexp#dbedff—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff—
string.regexp constant.character.escape#85e89dbold
support.constant#96b7ff—
support.variable#96b7ff—
meta.module-reference#96b7ff—
punctuation.definition.list.begin.markdown#ffab70—
markup.heading, markup.heading entity.name#96b7ffbold
markup.quote#85e89d—
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.underline—italic
markup.strikethrough—strikethrough
markup.inline.raw#96b7ff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d—
markup.changed, punctuation.definition.changed#ffab70—
markup.ignored, markup.untracked#2f363d—
meta.diff.range#b392f0bold
meta.diff.header#96b7ff—
meta.separator#96b7ffbold
meta.output#96b7ff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da—
brackethighlighter.unmatched#fdaeb7—
constant.other.reference.link, string.other.link#dbedffunderline