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.activeBackground#e6ded9
  • activityBar.activeBorder#ffffff00
  • activityBar.background#f1edea
  • activityBar.border#d4d9de
  • activityBar.foreground#111111
  • activityBarBadge.background#008ac6
  • badge.background#9ba6b1
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#990055dd
  • breadcrumb.background#f5f2f0
  • breadcrumb.focusForeground#990055dd
  • breadcrumb.foreground#000000
  • button.background#008ac6
  • button.hoverBackground#0079ad
  • button.secondaryBackground#708090
  • debugConsole.infoForeground#0083bc
  • debugTokenExpression.boolean#0077aa
  • debugTokenExpression.error#e6254b
  • debugTokenExpression.name#990055
  • debugTokenExpression.number#0077aa
  • debugTokenExpression.string#008D55
  • debugTokenExpression.value#8d9aa6
  • diffEditor.insertedTextBackground#0095d530
  • diffEditor.removedTextBackground#d9355630
  • editor.background#F5F5F7
  • editor.findMatchBackground#70809040
  • editor.findMatchBorder#0095d5
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.foldBackground#0095d518
  • editor.foreground#494949
  • editor.hoverHighlightBackground#0095d529
  • editor.lineHighlightBackground#7080901b
  • editor.selectionBackground#cbe2fa
  • editor.selectionHighlightBorder#70809050
  • editor.wordHighlightBackground#008D5518
  • editor.wordHighlightBorder#008D5540
  • editor.wordHighlightStrongBackground#008D5518
  • editor.wordHighlightStrongBorder#008D5540
  • editorBracketMatch.background#0095d517
  • editorBracketMatch.border#8d9aa6
  • editorCursor.background#ffffff
  • editorCursor.foreground#0095d5
  • editorError.foreground#d93556
  • editorGroup.border#d4d9de
  • editorGroupHeader.tabsBackground#f5f2f0
  • editorGroupHeader.tabsBorder#e2e6e9
  • editorHoverWidget.border#d4d9de
  • editorHoverWidget.statusBarBackground#70809018
  • editorIndentGuide.activeBackground#70809060
  • editorIndentGuide.background#70809020
  • editorLineNumber.activeForeground#5a6773
  • editorLineNumber.foreground#70809060
  • editorLink.activeForeground#990055dd
  • editorOverviewRuler.addedForeground#0095d5
  • editorOverviewRuler.border#d4d9de
  • editorOverviewRuler.bracketMatchForeground#8d9aa6
  • editorOverviewRuler.deletedForeground#0095d5
  • editorOverviewRuler.modifiedForeground#0095d5
  • editorOverviewRuler.warningForeground#ee9900
  • editorOverviewRuler.wordHighlightForeground#008D5580
  • editorOverviewRuler.wordHighlightStrongForeground#008D5580
  • editorSuggestWidget.highlightForeground#0066bf
  • editorUnnecessaryCode.opacity#ffffff8f
  • editorWarning.foreground#ee9900
  • editorWidget.resizeBorder#61616140
  • extensionButton.prominentBackground#008ac6
  • extensionButton.prominentHoverBackground#0079ad
  • extensionIcon.starForeground#ee9900
  • focusBorder#0095d5
  • gitDecoration.deletedResourceForeground#d93556
  • gitDecoration.ignoredResourceForeground#9ba7b1
  • gitDecoration.modifiedResourceForeground#0095d5
  • gitDecoration.stageDeletedResourceForeground#d93556
  • gitDecoration.stageModifiedResourceForeground#0095d5
  • gitDecoration.untrackedResourceForeground#008D55
  • input.border#e3e6e9
  • input.foreground#171a1d
  • inputValidation.errorBackground#d93556
  • inputValidation.errorBorder#d93556
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#0095d5
  • inputValidation.infoBorder#0095d5
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ee9900
  • inputValidation.warningBorder#ee9900
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#70809015
  • list.activeSelectionForeground#000000
  • list.errorForeground#e6254b
  • list.highlightForeground#0066bf
  • list.hoverBackground#70809028
  • list.inactiveSelectionBackground#70809020
  • list.warningForeground#ee9900
  • menu.selectionBackground#70809028
  • menu.selectionForeground#616161
  • menubar.selectionBackground#70809030
  • minimap.errorHighlight#d93556
  • minimap.warningHighlight#ee9900
  • minimapSlider.activeBackground#70809040
  • minimapSlider.background#70809040
  • minimapSlider.hoverBackground#70809040
  • panel.border#d4d9de
  • panelSectionHeader.background#ede7e4
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#8d9aa6
  • peekViewEditor.background#ede8e4
  • progressBar.background#0095d5
  • quickInput.foreground#222222
  • quickInputList.focusBackground#70809020
  • quickInputTitle.background#00000000
  • sash.hoverBorder#0095d570
  • scrollbarSlider.activeBackground#70809040
  • scrollbarSlider.background#70809040
  • scrollbarSlider.hoverBackground#70809040
  • selection.background#0095d540
  • sideBar.background#f5f2f0
  • sideBar.border#d4d9de
  • sideBarSectionHeader.background#ede7e4
  • statusBar.background#ede8e4
  • statusBar.border#d4d9de
  • statusBar.debuggingBackground#ee990030
  • statusBar.foreground#090909
  • statusBar.noFolderBackground#ede8e4
  • statusBar.noFolderForeground#000000
  • statusBarItem.errorBackground#d93556
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#d7cac2
  • statusBarItem.prominentBackground#d93556
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.warningBackground#ee9900
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#001d93
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#0095d5
  • tab.border#e2e6e9
  • tab.hoverBackground#001d93
  • tab.hoverBorder#708090
  • tab.hoverForeground#fed002
  • tab.inactiveBackground#f5f2f0
  • tab.inactiveForeground#444444
  • tab.lastPinnedBorder#a8b6c4
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#008ac6
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#0083bc
  • terminal.ansiBrightGreen#008D55
  • terminal.ansiBrightMagenta#a8005e
  • terminal.ansiBrightWhite#5a6773
  • terminal.ansiBrightYellow#ee9900
  • terminal.ansiGreen#008D55
  • terminal.ansiMagenta#a8005e
  • terminal.ansiRed#d93556
  • terminal.ansiWhite#b8c0c7
  • terminal.ansiYellow#ee9900
  • terminal.selectionBackground#cbe2fa
  • textCodeBlock.background#dde1e5
  • textLink.activeForeground#990055dd
  • textLink.foreground#0077aa
  • textPreformat.foreground#990055
  • titleBar.activeBackground#f1edea
  • titleBar.activeForeground#111111
  • welcomePage.tileBackground#70809010
  • welcomePage.tileHoverBackground#70809020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8D9AA6
comment.block.preprocessor#AAAAAA
meta.brace.square, meta.brace.round, punctuation.separator.parameter#999999
variable.parameter, meta.function.parameter variable#990055
meta.embedded, source.groovy.embedded, meta.template.expression#494949
invalid.deprecated#96000080
invalid, invalid.illegal#D93556
keyword.operator, constant.language.import-export-all#9A6E3A
keyword, storage#0077AA
storage.type, support.type, keyword.operator.expression, keyword.operator.new#0077AA
cast.expr.ts meta.brace.angle.ts, keyword.operator.definiteassignment#EE9900
constant.language, support.constant, variable.language#0077AA
support.variable.property.dom, support.variable.dom, support.variable.property, variable#494949
meta.template.expression punctuation.definition.template-expression, expression.embedded punctuation.definition.generic, punctuation.section.embedded, variable.interpolation, string.interpolated.pug, meta.interpolation.stylus meta.brace.curly#EE9900bold
entity.name.function, support.function, new.expr entity.name.type#D93556
support.class#D93556bold
entity.other.inherited-class#008D55
support.class#008D55
support.class.component#D93556
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#708090
entity.name.typebold
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#EE9900
entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.tsx#0077AA
entity.name.exception#660000
constant.numeric, constant.character, constant, constant.language.boolean, constant.language.nan, constant.language.infinity, constant.language.undefined, constant.language.null, source.editorconfig constant.language#990055bold
entity.other.inherited-classbold
string, punctuation.definition.string#008D55
constant.character.escape#EE9900
string.regexp, string.regexp punctuation.definition.string#EE9900
constant.other.symbol#AB6526
punctuation#999999
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#8D9AA6BB
entity.name.tag#990055
meta.tag string#0077AA
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#0077AA
constant.character.entity, punctuation.definition.entity#AB6526
meta.property-name, support.type.property-name#990055
keyword.control.at-rule.import#0077AA
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#008D55
entity.name.tag.css#EE9900
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#9A6E3A
entity.other.attribute-name.id.html#008D55
constant.numeric.css#384048
entity.other.attribute-name punctuation.definition.entity#999999
constant.numeric keyword.other.unit#8D9AA6
variable.parameter.url#9A6E3A
constant.other.color#0077AA
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#0077AA
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.important#D93556bold
variable.scss#EE9900
entity.name.tag.reference.scss#9A6E3A
markup.changed#EE9900
markup.deleted#D93556
markup.error#660000
markup.inserted#008D55
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
meta.diff.range, meta.diff.index, meta.separator#0077AA
meta.diff.header.from-file#990055
meta.diff.header.to-file#008D55
entity.name.section.group-title.ini#EE9900bold
punctuation.definition.entity.ini#999999
keyword.other.definition.ini#990055
source.ini#0077AA
entity.name.section.markdown, markup.heading.setext#EE9900bold
punctuation.definition.list#D93556
markup.inline.raw#0077AA
meta.link punctuation.definition.string, meta.image punctuation.definition.string#999999
markup.boldbold
markup.italicitalic
markup.underline.link.image.markdown#990055DD
markup.heading.setext#9BA6B1
constant.numeric.json#0077AA
string.interpolated.pug variable#494949
support.variable#EE9900
meta.tag string, source.vue string.quoted#008D55
meta.directive.vue entity.other.attribute-name.html#E19100
meta.function-call.generic.python, meta.function-call support.type#D93556
punctuation.definition.list.end.python, punctuation.definition.list.begin.python#999999
support.type.exception, entity.name.exception#D93556bold
log.info#0087C1
log.warning#EE9900
log.error#D93556
log.debug#9A6E3A
log.constant#990055
comment.block.documentation variable.other.jsdoc#494949
punctuation.definition.directive#990055
string.quoted.other.lt-gt.include punctuation.definition.string#999999
punctuation.separator.namespace#9A6E3A
meta.import.java storage.modifier#990055
keyword.operator.instanceof.java#0077AA
punctuation.definition.variable.begin.batchfile, punctuation.definition.variable.end.batchfile#D93556
keyword.type#708090
entity.name.type.namespace#EE9900
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080