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#eef1f4
  • activityBar.foreground#24292f
  • activityBar.inactiveForeground#656d7680
  • activityBarBadge.background#0969da
  • activityBarBadge.foreground#ffffff
  • badge.background#0969da
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#24292f
  • breadcrumb.focusForeground#24292f
  • breadcrumb.foreground#656d76
  • button.background#2da44e
  • button.foreground#ffffff
  • button.hoverBackground#2c974b
  • diffEditor.insertedTextBackground#1a7f3726
  • diffEditor.removedTextBackground#cf222e26
  • dropdown.background#ffffff
  • dropdown.foreground#24292f
  • editor.background#fafafa
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.findRangeHighlightBackground#b3d7ff40
  • editor.foreground#24292f
  • editor.lineHighlightBackground#f0f0f0
  • editor.lineHighlightBorder#f0f0f000
  • editor.selectionBackground#add6ff
  • editor.selectionHighlightBackground#add6ff66
  • editor.wordHighlightBackground#b3d7ff80
  • editor.wordHighlightStrongBackground#96c3ff80
  • editorBracketHighlight.foreground1#0550ae
  • editorBracketHighlight.foreground2#8250df
  • editorBracketHighlight.foreground3#1a7f37
  • editorBracketHighlight.foreground4#bf8700
  • editorBracketHighlight.foreground5#cf222e
  • editorBracketHighlight.foreground6#1b7c83
  • editorBracketMatch.background#0969da20
  • editorBracketMatch.border#0969da
  • editorBracketPairGuide.activeBackground1#0550ae80
  • editorBracketPairGuide.activeBackground2#8250df80
  • editorBracketPairGuide.activeBackground3#1a7f3780
  • editorBracketPairGuide.activeBackground4#bf870080
  • editorBracketPairGuide.activeBackground5#cf222e80
  • editorBracketPairGuide.activeBackground6#1b7c8380
  • editorCursor.foreground#044289
  • editorError.foreground#cf222e
  • editorGroupHeader.tabsBackground#eef1f4
  • editorGutter.addedBackground#1a7f37
  • editorGutter.deletedBackground#cf222e
  • editorGutter.modifiedBackground#bf8700
  • editorIndentGuide.activeBackground1#afb8c1
  • editorIndentGuide.background1#d8dee4
  • editorInfo.foreground#0969da
  • editorLineNumber.activeForeground#24292f
  • editorLineNumber.foreground#8c959f
  • editorRuler.foreground#d0d7de
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#d0d7de
  • gitDecoration.conflictingResourceForeground#cf222e
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#8c959f
  • gitDecoration.modifiedResourceForeground#9a6700
  • gitDecoration.untrackedResourceForeground#1a7f37
  • input.background#ffffff
  • input.border#d0d7de
  • input.foreground#24292f
  • input.placeholderForeground#6e7781
  • list.activeSelectionBackground#0969da
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#cf222e
  • list.focusBackground#ddf4ff
  • list.highlightForeground#0969da
  • list.hoverBackground#eaeef2
  • list.inactiveSelectionBackground#eaeef2
  • list.inactiveSelectionForeground#24292f
  • list.warningForeground#9a6700
  • minimap.errorHighlight#cf222e
  • minimap.findMatchHighlight#bf8700
  • minimap.selectionHighlight#add6ff
  • minimap.warningHighlight#9a6700
  • panel.background#fafafa
  • panel.border#d0d7de
  • panelTitle.activeForeground#24292f
  • panelTitle.inactiveForeground#656d76
  • peekView.border#0969da
  • peekViewEditor.background#f6f8fa
  • peekViewResult.background#ffffff
  • peekViewTitle.background#eef1f4
  • scrollbarSlider.activeBackground#8c959f80
  • scrollbarSlider.background#8c959f33
  • scrollbarSlider.hoverBackground#8c959f66
  • sideBar.background#f6f8fa
  • sideBar.border#d0d7de
  • sideBar.foreground#24292f
  • sideBarSectionHeader.background#eef1f4
  • sideBarSectionHeader.border#d0d7de
  • sideBarSectionHeader.foreground#24292f
  • sideBarTitle.foreground#24292f
  • statusBar.background#0969da
  • statusBar.debuggingBackground#bf8700
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#8250df
  • statusBarItem.remoteBackground#1a7f37
  • tab.activeBackground#fafafa
  • tab.activeBorderTop#0969da
  • tab.activeForeground#24292f
  • tab.border#d0d7de
  • tab.inactiveBackground#eef1f4
  • tab.inactiveForeground#656d76
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0550ae
  • terminal.ansiBrightBlack#57606a
  • terminal.ansiBrightBlue#0969da
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#8250df
  • terminal.ansiBrightRed#a40e26
  • terminal.ansiBrightWhite#8c959f
  • terminal.ansiBrightYellow#633c01
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#116329
  • terminal.ansiMagenta#8250df
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#6e7781
  • terminal.ansiYellow#4d2d00
  • terminal.background#fafafa
  • terminal.foreground#24292f
  • terminal.selectionBackground#add6ff
  • terminalCursor.foreground#044289
  • titleBar.activeBackground#eef1f4
  • titleBar.activeForeground#24292f
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#656d76

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e7781italic
keyword, storage.type, storage.modifier#cf222e
keyword.control#cf222e
string, constant.other.placeholder#0a3069
constant.numeric#0550ae
entity.name.function, meta.function-call, support.function#8250df
variable, entity.name.variable#24292f
entity.name.type, entity.name.class, support.type, support.class#953800
constant, entity.name.constant, variable.other.constant#0550ae
entity.name.tag#116329
entity.other.attribute-name#0550ae
string.quoted, meta.attribute-value#0a3069
entity.name.type.class, meta.class#953800
entity.name.function.method, meta.method#8250df
variable.other.property, meta.property, support.type.property-name#0550ae
keyword.control.import, keyword.control.export, keyword.control.from#cf222e
punctuation.decorator, meta.decorator, entity.name.function.decorator#8250df
string.template#0a3069
meta.template.expression, punctuation.definition.template-expression#cf222e
string.regexp#0a3069
keyword.operator#24292f
support.type.property-name.json#0550ae
markup.heading, entity.name.section.markdown#0550aebold
markup.bold#24292fbold
markup.italic#24292fitalic
markup.underline.link, string.other.link#0969da
markup.inline.raw, markup.fenced_code#cf222e