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#F8F9FA
  • activityBar.border#EEEEEE
  • activityBar.foreground#2C3E50
  • activityBar.inactiveForeground#ADB5BD
  • activityBarBadge.background#E63946
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFE0E6
  • badge.foreground#E63946
  • button.background#E63946
  • button.foreground#FFFFFF
  • button.hoverBackground#C1121F
  • diffEditor.insertedTextBackground#2A9D8F20
  • diffEditor.removedTextBackground#E6394620
  • dropdown.background#FFFFFF
  • dropdown.border#DEE2E6
  • dropdown.foreground#1E1E1E
  • editor.background#FFFFFF
  • editor.foreground#1E1E1E
  • editor.inactiveSelectionBackground#F0F0F0
  • editor.lineHighlightBackground#FFF5F7
  • editor.lineHighlightBorder#FFD6E0
  • editor.selectionBackground#FFE0E6
  • editor.selectionHighlightBackground#FFE8EE
  • editorBracketMatch.background#FFE0E6
  • editorBracketMatch.border#E63946
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#E63946
  • editorError.foreground#E63946
  • editorGutter.addedBackground#2A9D8F
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#E63946
  • editorGutter.modifiedBackground#F4A261
  • editorHint.foreground#999999
  • editorIndentGuide.activeBackground#CCCCCC
  • editorIndentGuide.background#EEEEEE
  • editorInfo.foreground#457B9D
  • editorOverviewRuler.border#EEEEEE
  • editorRuler.foreground#EEEEEE
  • editorWarning.foreground#F4A261
  • editorWhitespace.foreground#E0E0E0
  • gitDecoration.addedResourceForeground#2A9D8F
  • gitDecoration.conflictingResourceForeground#E63946
  • gitDecoration.deletedResourceForeground#E63946
  • gitDecoration.ignoredResourceForeground#ADB5BD
  • gitDecoration.modifiedResourceForeground#F4A261
  • gitDecoration.untrackedResourceForeground#457B9D
  • input.background#FFFFFF
  • input.border#DEE2E6
  • input.foreground#1E1E1E
  • input.placeholderForeground#ADB5BD
  • inputOption.activeBorder#E63946
  • list.activeSelectionBackground#FFE0E6
  • list.activeSelectionForeground#1E1E1E
  • list.focusBackground#FFF0F3
  • list.highlightForeground#E63946
  • list.hoverBackground#FFF0F3
  • list.inactiveSelectionBackground#F8F9FA
  • panel.background#FFFFFF
  • panel.border#EEEEEE
  • panelTitle.activeForeground#E63946
  • panelTitle.inactiveForeground#999999
  • progressBar.background#E63946
  • scrollbar.shadow#EEEEEE
  • scrollbarSlider.activeBackground#ADB5BD
  • scrollbarSlider.background#DEE2E6
  • scrollbarSlider.hoverBackground#CED4DA
  • sideBar.background#F8F9FA
  • sideBar.foreground#2C3E50
  • sideBarSectionHeader.background#EEF2F5
  • sideBarSectionHeader.foreground#2C3E50
  • sideBarTitle.foreground#E63946
  • statusBar.background#F8F9FA
  • statusBar.border#EEEEEE
  • statusBar.debuggingBackground#E63946
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#2C3E50
  • statusBar.noFolderBackground#F8F9FA
  • terminal.ansiBlack#2C3E50
  • terminal.ansiBlue#457B9D
  • terminal.ansiBrightBlack#6C757D
  • terminal.ansiBrightBlue#118AB2
  • terminal.ansiBrightCyan#00B4D8
  • terminal.ansiBrightGreen#06D6A0
  • terminal.ansiBrightMagenta#C77DFF
  • terminal.ansiBrightRed#EF476F
  • terminal.ansiBrightWhite#F8F9FA
  • terminal.ansiBrightYellow#FFD166
  • terminal.ansiCyan#00B4D8
  • terminal.ansiGreen#2A9D8F
  • terminal.ansiMagenta#9B5DE5
  • terminal.ansiRed#E63946
  • terminal.ansiWhite#DEE2E6
  • terminal.ansiYellow#F4A261
  • terminal.background#FFFFFF
  • terminal.foreground#1E1E1E
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#1E1E1E
  • titleBar.border#EEEEEE
  • titleBar.inactiveBackground#F8F9FA
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C757Ditalic
string, string.quoted, string.template#2A9D8F
constant.numeric#F4A261
constant.language, constant.character#E63946
keyword, storage.modifier, storage.type#9B5DE5
keyword.control, keyword.control.conditional, keyword.control.loop#9B5DE5bold
variable, variable.parameter#1E1E1E
entity.name.function, support.function, meta.function-call#457B9D
entity.name.class, entity.name.type, support.class, meta.class#457B9Dbold
entity.name.tag#E63946
entity.other.attribute-name#F4A261italic
constant, constant.other#E63946
keyword.operator, keyword.operator.logical, keyword.operator.comparison#9B5DE5
punctuation, punctuation.separator, punctuation.terminator#6C757D
string.regexp#E63946
markup.heading#E63946bold
markup.boldbold
markup.italicitalic
markup.underline.link#457B9Dunderline
support.type.property-name.json, meta.structure.dictionary.json support.type.property-name#9B5DE5
invalid, invalid.illegal#E63946bold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#457B9D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F4A261