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#e3e3dd
  • activityBar.foreground#20222a
  • activityBarBadge.background#248595
  • badge.background#24859560
  • banner.background#f9f9f8
  • button.background#248595
  • checkbox.background#f9f9f8
  • checkbox.border#777777
  • checkbox.foreground#20222a
  • checkbox.selectBackground#f9f9f8
  • checkbox.selectBorder#777777
  • commandCenter.background#f9f9f8
  • diffEditor.insertedLineBackground#47894410
  • diffEditor.insertedTextBackground#47894420
  • diffEditor.removedLineBackground#ca3c4e20
  • diffEditor.removedTextBackground#ca3c4e10
  • diffEditorGutter.insertedLineBackground#47894420
  • diffEditorGutter.removedLineBackground#ca3c4e30
  • diffEditorOverview.insertedForeground#47894470
  • diffEditorOverview.removedForeground#ca3c4e70
  • dropdown.background#f9f9f8
  • editor.background#f1f1ee
  • editor.findMatchBackground#24859530
  • editor.findMatchHighlightBackground#b7572640
  • editor.foreground#20222a
  • editor.lineHighlightBackground#e3e3dd
  • editor.selectionBackground#24859530
  • editor.wordHighlightBackground#24859530
  • editor.wordHighlightStrongBackground#24859530
  • editorBracketHighlight.foreground1#20222a
  • editorBracketHighlight.foreground2#20222a
  • editorBracketHighlight.foreground3#20222a
  • editorBracketHighlight.foreground4#20222a
  • editorBracketHighlight.foreground5#20222a
  • editorBracketHighlight.foreground6#20222a
  • editorBracketHighlight.unexpectedBracket.foreground#ca3c4e
  • editorGroupHeader.noTabsBackground#f1f1ee
  • editorGroupHeader.tabsBackground#e3e3dd
  • editorGutter.background#f1f1ee
  • editorInlayHint.background#f1f1ee
  • editorInlayHint.foreground#478944
  • editorLineNumber.activeForeground#20222a
  • editorLineNumber.foreground#20222a40
  • git.blame.editorDecorationForeground#777777
  • gitDecoration.addedResourceForeground#478944
  • gitDecoration.conflictingResourceForeground#ca3c4e
  • gitDecoration.deletedResourceForeground#ca3c4e
  • gitDecoration.ignoredResourceForeground#77777770
  • gitDecoration.modifiedResourceForeground#897622
  • gitDecoration.renamedResourceForeground#777777
  • gitDecoration.stageDeletedResourceForeground#ca3c4e
  • gitDecoration.stageModifiedResourceForeground#897622
  • gitDecoration.submoduleResourceForeground#2f78c8
  • gitDecoration.untrackedResourceForeground#478944
  • gitlens.trailingLineForegroundColor#20222a40
  • input.background#f9f9f8
  • list.activeSelectionBackground#24859530
  • list.activeSelectionForeground#20222a
  • list.dropBackground#f1f1ee
  • list.hoverBackground#20222a10
  • list.inactiveSelectionBackground#24859530
  • list.inactiveSelectionForeground#20222a
  • menu.background#f1f1ee
  • panel.background#f1f1ee
  • quickInput.background#f1f1ee
  • quickInput.foreground#20222a
  • scrollbarSlider.background#20222a30
  • searchEditor.findMatchBackground#24859530
  • selection.background#24859530
  • sideBar.background#e3e3dd
  • sideBarSectionHeader.background#e3e3dd
  • statusBar.background#e3e3dd
  • statusBar.debuggingBackground#b7572680
  • statusBar.foreground#20222a
  • surface.border#20222a26
  • tab.activeBackground#f1f1ee
  • tab.border#e3e3dd
  • tab.inactiveBackground#e3e3dd
  • tab.selectedBorderTop#e3e3dd
  • terminal.ansiBlack#20222a
  • terminal.ansiBlue#2f78c8
  • terminal.ansiBrightBlack#2b2e38
  • terminal.ansiBrightBlue#3a85d8
  • terminal.ansiBrightCyan#2993a4
  • terminal.ansiBrightGreen#4f974c
  • terminal.ansiBrightMagenta#8f65e9
  • terminal.ansiBrightRed#db4959
  • terminal.ansiBrightYellow#988326
  • terminal.ansiCyan#248595
  • terminal.ansiGreen#478944
  • terminal.ansiMagenta#8354de
  • terminal.ansiRed#ca3c4e
  • terminal.ansiYellow#897622
  • terminal.background#f1f1ee
  • terminal.foreground#20222a
  • titleBar.activeBackground#e3e3dd
  • titleBar.activeForeground#20222a
  • titleBar.inactiveBackground#e3e3dd
  • titleBar.inactiveForeground#20222a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#478944italic
comment.block.preprocessor#478944
comment.documentation, comment.block.documentation#478944italic
invalid.illegal#ca3c4e—
keyword.operator#20222a
keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.assignment, punctuation, storage.type.function.arrow, meta.brace#20222a
keyword, storage, keyword.operator.new, storage.type, keyword.operator.expression, support.constant#20222a
variable, support.variable#20222a—
constant.language#20222aitalic
entity.name.function, support.function#b75726
entity.name.type, entity.other.inherited-class, support.class, support.type#20222a
entity.name.exception#2f78c8—
entity.name.section—bold
constant.character, constant#20222a—
constant.numeric#20222a—
string#248595—
constant.character.escape#20222a—
string.regexp, punctuation.definition.group.regexp, punctuation.definition.group.no-capture.regexp, punctuation.definition.character-class.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp, constant.character.escape.regexp, constant.character.escape.backslash.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.operator.negation.regexp, keyword.control.anchor.regexp, meta.assertion.look-ahead.regexp, meta.assertion.negative-look-ahead.regexp#8354de—
constant.other.symbol#20222a—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#478944—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#20222a—
entity.name.tag#2f78c8—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#20222aitalic
constant.character.entity, punctuation.definition.entity#20222a—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#b75726—
meta.property-name, support.type.property-name#20222a—
meta.property-value, meta.property-value constant.other, support.constant.property-value#b75726—
keyword.other.important—bold
markup.changed#20222a—
markup.deleted#20222a—
markup.italic—italic
markup.error#ca3c4e—
markup.inserted#20222a—
meta.link#b75726—
markup.output, markup.raw#20222a—
markup.prompt#20222a—
markup.heading#478944—
markup.bold—bold
markup.traceback#20222a—
markup.underline—underline
markup.quote#b75726—
markup.list#20222a—
markup.bold, markup.italic#8354de—
markup.inline.raw#b75726
meta.diff.range, meta.diff.index, meta.separator#2b2e38—
meta.diff.header.from-file#2b2e38—
meta.diff.header.to-file#2b2e38—