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#F3E7D3
  • activityBar.foreground#5E5854
  • activityBar.inactiveForeground#79716C
  • activityBarBadge.background#0D7A75
  • activityBarBadge.foreground#FAF2E9
  • badge.background#0D7A75
  • badge.foreground#FAF2E9
  • button.background#4D9391
  • button.foreground#FAF2E9
  • button.hoverBackground#EED891
  • diffEditor.insertedLineBackground#65E6A722
  • diffEditor.insertedTextBackground#65E6A733
  • diffEditor.removedLineBackground#E84C5822
  • diffEditor.removedTextBackground#E84C5833
  • dropdown.background#F3E7D3
  • dropdown.border#EBD7BE
  • dropdown.foreground#5E5854
  • editor.background#FAF2E9
  • editor.findMatchBackground#E121B1AA
  • editor.findMatchHighlightBackground#F3C91F66
  • editor.foreground#5E5854
  • editor.inactiveSelectionBackground#D3EED366
  • editor.lineHighlightBackground#F0DFCA80
  • editor.selectionBackground#D3EED399
  • editor.selectionHighlightBackground#0070CC44
  • editor.wordHighlightBackground#E84C5844
  • editor.wordHighlightStrongBackground#E121B155
  • editorBracketMatch.background#68F3CA33
  • editorBracketMatch.border#68F3CA
  • editorCursor.foreground#545C5E
  • editorError.foreground#E84C58
  • editorGutter.addedBackground#65E6A7
  • editorGutter.background#FAF2E9
  • editorGutter.deletedBackground#E84C58
  • editorGutter.modifiedBackground#EE7042
  • editorHint.foreground#AEA19E
  • editorIndentGuide.activeBackground1#BEBEC4
  • editorIndentGuide.background1#EBD7BEAA
  • editorInfo.foreground#18803A
  • editorLineNumber.activeForeground#CFB05F
  • editorLineNumber.foreground#AEA19E
  • editorOverviewRuler.addedForeground#65E6A7
  • editorOverviewRuler.deletedForeground#E84C58
  • editorOverviewRuler.errorForeground#E84C58
  • editorOverviewRuler.infoForeground#18803A
  • editorOverviewRuler.modifiedForeground#EE7042
  • editorOverviewRuler.warningForeground#D1832E
  • editorWarning.foreground#D1832E
  • editorWhitespace.foreground#867E7866
  • input.background#F3E7D3
  • input.border#EBD7BE
  • input.foreground#5E5854
  • input.placeholderForeground#867E78
  • list.activeSelectionBackground#D3EED366
  • list.activeSelectionForeground#5E5854
  • list.highlightForeground#0D7A75
  • list.hoverBackground#F0DFCA88
  • panel.background#FDF7EE
  • panel.border#F0DFCA
  • panelTitle.activeBorder#0D7A75
  • panelTitle.activeForeground#5E5854
  • panelTitle.inactiveForeground#79716C
  • peekView.border#EBD7BE
  • peekViewEditor.background#FAF2E9
  • peekViewEditor.matchHighlightBackground#0070CC66
  • peekViewResult.background#FDF7EE
  • peekViewResult.matchHighlightBackground#0070CC66
  • sideBar.background#FDF7EE
  • sideBar.foreground#6B6560
  • sideBarSectionHeader.background#F3E7D3
  • sideBarSectionHeader.foreground#5E5854
  • sideBarTitle.foreground#5E5854
  • statusBar.background#F3E7D3
  • statusBar.debuggingBackground#D1832E
  • statusBar.debuggingForeground#FAF2E9
  • statusBar.foreground#5E5854
  • statusBar.noFolderBackground#F3E7D3
  • tab.activeBackground#FAF2E9
  • tab.activeBorderTop#0D7A75
  • tab.activeForeground#5E5854
  • tab.border#F0DFCA
  • tab.inactiveBackground#F3E7D3
  • tab.inactiveForeground#79716C
  • terminal.ansiBlack#5E5854
  • terminal.ansiBlue#526AF3
  • terminal.ansiBrightBlack#AEA19E
  • terminal.ansiBrightBlue#18803A
  • terminal.ansiBrightCyan#D1832E
  • terminal.ansiBrightGreen#18803A
  • terminal.ansiBrightMagenta#D6224D
  • terminal.ansiBrightRed#E84C58
  • terminal.ansiBrightWhite#5E5854
  • terminal.ansiBrightYellow#D1832E
  • terminal.ansiCyan#0BC9CF
  • terminal.ansiGreen#0D7A75
  • terminal.ansiMagenta#CF44AC
  • terminal.ansiRed#D6224D
  • terminal.ansiWhite#EBD7BE
  • terminal.ansiYellow#D1832E
  • terminal.background#FAF2E9
  • terminal.foreground#5E5854
  • titleBar.activeBackground#F3E7D3
  • titleBar.activeForeground#5E5854
  • titleBar.inactiveBackground#FAF2E9
  • titleBar.inactiveForeground#79716C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AEA19E
keyword, keyword.control, storage, storage.type#0D7A75
support.function, support.class, support.type, support.constant#18803A
entity.name.function, meta.function-call, support.function.any-method#0F79BF
variable, meta.definition.variable.name, entity.name.variable#D6224D
variable.parameter, meta.parameter#6B6560
variable.other.property, meta.object-literal.key, support.variable.property#D6224D
entity.name.type, entity.name.class, entity.name.namespace, support.type#D1832E
constant, constant.language, constant.character#D6224D
constant.numeric#F84B1B
constant.language.boolean#F84B1B
string, string.quoted, string.template#744DF7
constant.character.escape, string.regexp, string.regexp punctuation.definition.string.begin#787096
comment.block.documentation, string.quoted.docstring#787096
meta.preprocessor, entity.name.tag, entity.other.attribute-name#F84B1B
keyword.operator, punctuation, meta.brace#6B6560
invalid, invalid.deprecated#E84C58
markup.warning#D1832E
markup.heading, markup.heading punctuation.definition.heading#0D7A75
markup.italic, markup.bold, markup.bold markup.italic#18803A
markup.underline.link, string.other.link.title#9D81BA
markup.inserted, meta.diff.header.to-file#65E6A7
markup.changed, meta.diff.header#EE7042
markup.deleted, meta.diff.header.from-file#E84C58
Kaolin Themes (Emacs Port) by hasit - VS Code Theme