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#333333
  • activityBar.background#F9F9F9
  • activityBar.border#f0f0f0
  • activityBar.foreground#333333
  • breadcrumb.activeSelectionForeground#b07d48
  • button.background#b07d48
  • button.hoverBackground#b07d48
  • debugToolBar.background#F9F9F9
  • editor.background#F9F9F9
  • editorBracketHighlight.foreground1#FFE15D
  • editorBracketHighlight.foreground2#8FBDD3
  • editorBracketHighlight.foreground3#EA5C2B
  • editorBracketHighlight.foreground4#FF8DC7
  • editorBracketHighlight.foreground5#B2A4FF
  • editorBracketHighlight.foreground6#ea4aaa
  • editorError.foreground#E80F88
  • editorGroupHeader.tabsBackground#F9F9F9
  • editorGutter.addedBackground#1C5A25
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#901110
  • editorGutter.foldingControlForeground#393a3490
  • editorGutter.modifiedBackground#0A4694
  • editorHint.foreground#1C5A25
  • editorInfo.foreground#0A4694
  • editorInlayHint.background#F9F9F9
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#4e4f47
  • editorWarning.foreground#803506
  • foreground.undefined#333333
  • gitDecoration.addedResourceForeground#1C5A25
  • gitDecoration.conflictingResourceForeground#803506
  • gitDecoration.deletedResourceForeground#901110
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#0A4694
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#00838F
  • input.background#202020
  • menu.background#F9F9F9
  • panel.background#F9F9F9
  • peekViewEditor.background#F9F9F9
  • peekViewResult.background#F9F9F9
  • problemsErrorIcon.foreground#E80F88
  • problemsInfoIcon.foreground#0A4694
  • problemsWarningIcon.foreground#803506
  • settings.checkboxBorder#b07d48
  • settings.checkboxForeground#b07d48
  • settings.headerForeground#333333
  • settings.modifiedItemIndicator#b07d48
  • sideBar.background#F9F9F9
  • sideBar.border#f0f0f0
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F9F9F9
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#333333
  • sideBarTitle.foreground#333333
  • statusBar.background#F9F9F9
  • tab.activeBackground#ffffff
  • tab.inactiveBackground#F9F9F9
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#0A4694
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#1D75DB
  • terminal.ansiBrightCyan#01ACC1
  • terminal.ansiBrightGreen#32953D
  • terminal.ansiBrightMagenta#FF4DB2
  • terminal.ansiBrightRed#D73324
  • terminal.ansiBrightWhite#606060
  • terminal.ansiBrightYellow#D2AF0F
  • terminal.ansiCyan#00838F
  • terminal.ansiGreen#1C5A25
  • terminal.ansiMagenta#FF1A9C
  • terminal.ansiRed#901110
  • terminal.ansiWhite#202020
  • terminal.ansiYellow#7E6C06
  • terminal.foreground#333333
  • terminal.selectionBackground#373737
  • titleBar.activeBackground#F9F9F9
  • titleBar.inactiveBackground#F9F9F9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#a0ada0
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational.ts, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#999999
constant, entity.name.constant, variable.language, meta.definition.variable#a65e2b
entity, entity.name#59873a
variable.parameter.function#333333
entity.name.tag, tag.html#1e754f
entity.name.function#59873a
keyword, storage.type.class.jsdoc#1e754f
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#ab5959
storage.modifier.package, storage.modifier.import, storage.type.java#333333
string, string punctuation.section.embedded source, attribute.value#b56959
punctuation.definition.string, punctuation.support.type.property-name#b5695999
support#998418
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#998418
async#ab5e3f
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#b07d48
variable, identifier#b07d48
support.type.primitive, entity.name.type#2e808f
namespace#b05a78
keyword.operator, meta.var.expr.ts#ab5959
string variable#b56959
source.regexp, string.regexp#ab5e3f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#b56959
string.regexp constant.character.escape#7E6C06
support.constant#a65e2b
constant.numeric, number#2f798a
keyword.other.unit#ab5959
constant.language.boolean, constant.language#1e754f
meta.module-reference#b07d48
punctuation.definition.list.begin.markdown#803506
markup.heading, markup.heading entity.name#b07d48bold
markup.quote#2e8f82
markup.italic#333333italic
markup.bold#333333bold
markup.raw#b07d48
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#b56959
markup.underline.link.markdown#393a3490underline
type.identifier#5a6aa6
entity.other.attribute-name.html.vue#59873a
invalid.illegal.unrecognized-tag.htmlnormal
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FD9983
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7FD184
markup.changed, punctuation.definition.changed#FFC772
markup.ignored, markup.untracked#424242
meta.diff.range#B553C2bold
meta.diff.header#7FC1FF
meta.separator#7FC1FFbold
meta.output#7FC1FF
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#E0E0E0
brackethighlighter.unmatched#FD9983