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.activeBorder#00ff8c
  • activityBar.background#ffffff00
  • activityBar.border#ffffff00
  • activityBar.foreground#04ff8e
  • activityBar.inactiveForeground#ffffff73
  • activityBarBadge.background#0ac57183
  • activityBarBadge.foreground#ffffff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e1e4e8
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#176f2c
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • checkbox.background#444d56
  • checkbox.border#1b1f23
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#2f363d
  • dropdown.border#1b1f23
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#24292e
  • editor.background#24292e
  • editor.foldBackground#282e33
  • editor.foreground#e1e4e8
  • editor.inactiveSelectionBackground#3392ff22
  • editor.lineHighlightBackground#00ff8c30
  • editor.selectionBackground#3392ff44
  • editor.selectionHighlightBackground#17e5e633
  • editor.selectionHighlightBorder#17e5e600
  • editor.stackFrameHighlightBackground#aa770077
  • editor.wordHighlightBackground#17e5e600
  • editor.wordHighlightBorder#17e5e699
  • editor.wordHighlightStrongBackground#17e5e600
  • editor.wordHighlightStrongBorder#17e5e666
  • editorBracketMatch.background#17e5e650
  • editorBracketMatch.border#17e5e600
  • editorCursor.foreground#ffcc00
  • editorGroup.border#ffffff00
  • editorGroupHeader.tabsBackground#1f2428
  • editorGroupHeader.tabsBorder#ffffff00
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#2f363d
  • editorLineNumber.activeForeground#e1e4e8
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#ffffff00
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1f2428
  • errorForeground#f97583
  • extensionButton.prominentBackground#00ca6fc5
  • extensionButton.prominentForeground#ffffffce
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#ffffff00
  • input.border#ffffff00
  • input.foreground#e1e4e8
  • input.placeholderForeground#acacac42
  • list.activeSelectionBackground#39414a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#044289
  • list.hoverBackground#282e34
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionForeground#e1e4e8
  • minimap.background#232323a2
  • minimap.errorHighlight#ffffffb3
  • minimap.findMatchHighlight#ffc400
  • minimap.selectionHighlight#0080ff
  • minimap.warningHighlight#27d797b3
  • minimapGutter.addedBackground#598300
  • minimapGutter.deletedBackground#a0040c
  • minimapGutter.modifiedBackground#da5353
  • minimapSlider.activeBackground#00f17c52
  • minimapSlider.background#00f17c52
  • minimapSlider.hoverBackground#00f17c52
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#ffffff00
  • notifications.foreground#e1e4e8
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#1f2428
  • panel.border#ffffff00
  • panelInput.border#2f363d
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#e1e4e8
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • progressBar.background#0366d6
  • quickInput.background#24292e
  • quickInput.foreground#e1e4e8
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#e1e4e8
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#252526
  • sideBar.border#252526
  • sideBar.foreground#ffffffe1
  • sideBarSectionHeader.background#ffffff00
  • sideBarSectionHeader.border#ffffff00
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#ffffff00
  • statusBar.background#ffffff00
  • statusBar.border#ffffff00
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#24292e
  • statusBarItem.prominentBackground#282e34
  • tab.activeBorder#41b883
  • tab.activeBorderTop#ffffff00
  • tab.activeForeground#ffffff
  • tab.border#ffffff00
  • tab.hoverBorder#41b883
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#ffffff00
  • tab.inactiveForeground#a7a7a7
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • terminal.foreground#d1d5da
  • terminalCursor.foreground#ffcc00
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#79b8ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#e1e4e8
  • titleBar.border#ffffff00
  • titleBar.inactiveBackground#1f2428
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6A737D
constant.other.placeholder, constant.character#00FFA6
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#79B8FF
entity.name, meta.export.default, meta.definition.variable#00FFA6
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#FF6369
entity.name.function#E1E4E8
entity.name.tag, support.class.component#00FFA6
keyword#F97583
storage, storage.type#FF6369
storage.modifier.package, storage.modifier.import, storage.type.java#E1E4E8
string, punctuation.definition.string, string punctuation.section.embedded source#98C2F8DC
support#79B8FF
meta.property-name#79B8FF
variable#FFAB70
variable.other#E1E4E8
invalid#FDAEB7italic
carriage-return#F6F8FAitalic underline
message.error#FDAEB7
string source#E1E4E8
string variable#79B8FF
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#79B8FF
support.variable#79B8FF
support.type.property-name.json#79B8FF
meta.module-reference#79B8FF
punctuation.definition.list.begin.markdown#FFAB70
markup.heading, markup.heading entity.name#79B8FFbold
markup.quote#85E89D
markup.italic#E1E4E8italic
markup.bold#E1E4E8bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79B8FF
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FDAEB7
punctuation.section.embedded#B35900
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#79B8FF
meta.separator#79B8FFbold
meta.output#79B8FF
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#D1D5DA
brackethighlighter.unmatched#FDAEB7
constant.other.reference.link, string.other.link#DBEDFFunderline
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6