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