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#004F4A
  • button.background#235354
  • button.foreground#D9D9D9
  • debugConsole.errorForeground#E85181
  • debugConsole.infoForeground#D9D9D9
  • debugConsole.sourceForeground#D9D9D9
  • debugConsole.warningForeground#B7D074
  • debugIcon.continueForeground#5AA0D6
  • debugIcon.pauseForeground#B7D074
  • debugIcon.restartForeground#7AD694
  • debugIcon.startForeground#7AD694
  • debugIcon.stepBackForeground#5AA0D6
  • debugIcon.stepIntoForeground#5AA0D6
  • debugIcon.stepOutForeground#5AA0D6
  • debugIcon.stepOverForeground#5AA0D6
  • debugIcon.stopForeground#E85181
  • debugTokenExpression.boolean#9A90E0
  • debugTokenExpression.error#E85181
  • debugTokenExpression.name#5AA0D6
  • debugTokenExpression.number#9A90E0
  • debugTokenExpression.string#AFD7AF
  • debugTokenExpression.type#7AD694
  • debugTokenExpression.value#D9D9D9
  • debugView.stateLabelBackground#212121
  • debugView.stateLabelForeground#B7D074
  • editor.background#1d1d1d
  • editor.foreground#D9D9D9
  • editor.selectionBackground#235354
  • editor.wordHighlightBackground#303030
  • editorBracketMatch.background#303030
  • editorBracketMatch.border#5AA0D6
  • 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#235354
  • gitDecoration.addedResourceForeground#7AD694
  • gitDecoration.conflictingResourceForeground#E85181
  • gitDecoration.modifiedResourceForeground#58D6CE
  • gitDecoration.stageModifiedResourceForeground#7AD694
  • gitDecoration.untrackedResourceForeground#5AA0D6
  • inputValidation.errorBorder#E85181
  • inputValidation.warningBorder#B7D074
  • list.activeSelectionBackground#235354
  • list.errorForeground#E85181
  • list.warningForeground#B7D074
  • notificationLink.foreground#5AA0D6
  • panel.background#1d1d1d
  • settings.checkboxBackground#235354
  • settings.dropdownBorder#235354
  • sideBarTitle.foreground#eeeeee
  • statusBar.background#004F4A
  • statusBar.border#333333
  • statusBar.debuggingBackground#00445f
  • statusBar.debuggingBorder#00445f
  • statusBar.foreground#eeeeee
  • statusBar.noFolderBackground#1d1d1d
  • statusBar.noFolderBorder#303030
  • statusBar.noFolderForeground#eeeeee
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#5AA0D6
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#64B2ED
  • terminal.ansiBrightCyan#61EDE4
  • terminal.ansiBrightGreen#87EDA4
  • terminal.ansiBrightMagenta#A398ED
  • terminal.ansiBrightRed#e85181
  • terminal.ansiBrightWhite#EDEDED
  • terminal.ansiBrightYellow#AFD7AF
  • terminal.ansiCyan#58D6CE
  • terminal.ansiGreen#7AD694
  • terminal.ansiMagenta#9A90E0
  • terminal.ansiRed#E85181
  • terminal.ansiWhite#D9D9D9
  • terminal.ansiYellow#B7D074
  • textLink.activeForeground#5AA0D6
  • textLink.foreground#5AA0D6

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#5AA0D6—
markup.underline.link.markdown#5AA0D6—
meta.brace.round.graphql#5AA0D6—
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#D9D9D9—
meta.paragraph.markdown, text.html.markdown#D9D9D9—
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#58D6CE—
string.other.link.title.markdown#58D6CE—
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#7AD694—
keyword.operator.type.annotation, entity.name.type#7AD694—
entity.name.fragment.graphql, variable.fragment.graphql#7AD694—
constant.numeric, constant.character.entity, constant.language.boolean, constant.language.null, constant.language.undefined, constant.other.color, constant.character.escape, support.type.primitive#9A90E0—
support.type.builtin#9A90E0—
constant.numeric.css keyword.other.unit, meta.embedded.line.css#9A90E0—
#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#6E6E6E—
meta.property-list#6E6E6E—
#6E6E6E—
string, support.constant.property-value, markup.fenced_code#AFD7AF—
string.quoted.strict#5fffaf—
#5fffaf—
keyword.other.debugger, keyword.todo, keyword.note, keyword.fixit, keyword.bug, invalid, string.quoted.pragma, comment.pragma#E85181—
source#D9D9D9—