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.

  • activityBarBadge.background#005f5f
  • button.background#005f5f
  • button.foreground#DDE3DC
  • debugConsole.errorForeground#E85181
  • debugConsole.infoForeground#C2BAC2
  • debugConsole.sourceForeground#C2BAC2
  • debugConsole.warningForeground#B7D074
  • debugIcon.continueForeground#5BA2D9
  • debugIcon.pauseForeground#B7D074
  • debugIcon.restartForeground#7CD996
  • debugIcon.startForeground#7CD996
  • debugIcon.stepBackForeground#5BA2D9
  • debugIcon.stepIntoForeground#5BA2D9
  • debugIcon.stepOutForeground#5BA2D9
  • debugIcon.stepOverForeground#5BA2D9
  • debugIcon.stopForeground#E85181
  • debugTokenExpression.boolean#8581DA
  • debugTokenExpression.error#E85181
  • debugTokenExpression.name#5BA2D9
  • debugTokenExpression.number#8581DA
  • debugTokenExpression.string#B7D074
  • debugTokenExpression.type#7CD996
  • debugTokenExpression.value#C2BAC2
  • debugView.stateLabelBackground#1F1F1F
  • debugView.stateLabelForeground#B7D074
  • editor.background#1F1F1F
  • editor.foreground#DDE3DC
  • editor.wordHighlightBackground#303030
  • editorBracketMatch.background#303030
  • editorBracketMatch.border#5BA2D9
  • editorError.border#E85181
  • editorError.foreground#E85181
  • editorGutter.addedBackground#87d7af7c
  • editorGutter.deletedBackground#E85181
  • editorGutter.modifiedBackground#5fd7d779
  • editorLineNumber.foreground#626262
  • editorRuler.foreground#303030
  • editorWarning.foreground#B7D074
  • focusBorder#005f5f
  • gitDecoration.addedResourceForeground#7CD996
  • gitDecoration.conflictingResourceForeground#E85181
  • gitDecoration.modifiedResourceForeground#59D9D0
  • gitDecoration.stageModifiedResourceForeground#7CD996
  • gitDecoration.untrackedResourceForeground#5BA2D9
  • inputValidation.errorBorder#E85181
  • inputValidation.warningBorder#B7D074
  • list.activeSelectionBackground#005f5f
  • list.errorForeground#E85181
  • list.warningForeground#B7D074
  • notificationLink.foreground#5BA2D9
  • panel.background#1F1F1F
  • settings.checkboxBackground#005f5f
  • settings.dropdownBorder#005f5f
  • sideBarTitle.foreground#eeeeee
  • statusBar.background#005f5f
  • statusBar.border#333333
  • statusBar.debuggingBackground#00445f
  • statusBar.debuggingBorder#00445f
  • statusBar.foreground#eeeeee
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderBorder#303030
  • statusBar.noFolderForeground#eeeeee
  • terminal.ansiBlack#3A3A3A
  • terminal.ansiBlue#5BA2D9
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#6BBFFF
  • terminal.ansiBrightCyan#69FFF5
  • terminal.ansiBrightGreen#91FFB0
  • terminal.ansiBrightMagenta#9C96FF
  • terminal.ansiBrightRed#FF598E
  • terminal.ansiBrightWhite#F5EBF5
  • terminal.ansiBrightYellow#E1FF8F
  • terminal.ansiCyan#59D9D0
  • terminal.ansiGreen#7CD996
  • terminal.ansiMagenta#8581DA
  • terminal.ansiRed#E85181
  • terminal.ansiWhite#C2BAC2
  • terminal.ansiYellow#B7D074
  • textLink.activeForeground#5BA2D9
  • textLink.foreground#5BA2D9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage, keyword.operator, keyword.operation, keyword.control, keyword.other, punctuation.separator, punctuation.definition.template-expression, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.keyword, punctuation.definition.block.tag.jsdoc, punctuation.section.embedded.begin, punctuation.section.embedded.end, variable.language.this, meta.parameters, meta.tag, entity.name.tag#5BA2D9—
markup.underline.link.markdown#5BA2D9—
meta.brace.round.graphql#5BA2D9—
variable, text.html.derivative, meta.field, meta.jsx.children, meta.object-literal.key, support.type.property-name.json, entity.other.attribute-name, meta.paragraph.markdown#DDE3DC—
meta.paragraph.markdown, text.html.markdown#DDE3DC—
support.function.misc, support.type.property-name, entity.name.function, meta.method, meta.function, meta.function-call, meta.brace, variable.other.jsdoc, constant.other.reference, string.other.link.title#59D9D0—
string.other.link.title.markdown#59D9D0—
support.variable.property, support.class, support.type, meta.class, meta.selector entity.other.attribute-name, entity.other.attribute-name.class, support.class.component, support.class.builtin, markup.heading.markdown#7CD996—
keyword.operator.type.annotation, entity.name.type#7CD996—
entity.name.fragment.graphql, variable.fragment.graphql#7CD996—
constant.numeric, constant.character.entity, constant.language.boolean, constant.language.null, constant.language.undefined, constant.other.color, constant.character.escape, support.type.primitive#8581DA—
support.type.builtin#8581DA—
constant.numeric.css keyword.other.unit#8581DA—
#B7D074—
fenced_code.block.language.markdown#B7D074—
comment, punctuation, punctuation.separator.array, meta.brace.square, punctuation.separator.comma, punctuation.separator.parameter, punctuation.separator.dictionary.pair.json, punctuation.definition.tag#616360—
meta.property-list#616360—
#616360—
string, support.constant.property-value, markup.fenced_code#B7D074—
string.quoted.strict#5fffaf—
#5fffaf—
keyword.other.debugger, keyword.todo, keyword.note, keyword.fixit, keyword.bug, invalid, string.quoted.pragma, comment.pragma#E85181—
source#cccccc—