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
Ultima Theme by Egor Lem - VS Code Theme