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#e9ecef
  • activityBar.background#ffffff
  • activityBar.border#dee2e6
  • activityBar.foreground#212529
  • activityBar.inactiveForeground#6c757d
  • activityBarBadge.background#0d6efd
  • activityBarBadge.foreground#ffffff
  • badge.background#6c757d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#212529
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#212529
  • breadcrumb.foreground#6c757d
  • button.background#0d6efd
  • button.foreground#ffffff
  • button.hoverBackground#0b5ed7
  • button.secondaryBackground#6c757d
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#5a6268
  • checkbox.background#ffffff
  • checkbox.border#ced4da
  • checkbox.foreground#212529
  • debugExceptionWidget.background#f8f9fa
  • debugExceptionWidget.border#1e40af
  • debugToolBar.background#ffffff
  • debugToolBar.border#dee2e6
  • diffEditor.border#dee2e6
  • diffEditor.insertedTextBackground#d4edda
  • diffEditor.removedTextBackground#f8d7da
  • dropdown.background#ffffff
  • dropdown.border#ced4da
  • dropdown.foreground#212529
  • editor.background#ffffff
  • editor.findMatchBackground#fff3cd
  • editor.findMatchBorder#ffc107
  • editor.findMatchHighlightBackground#cce5ff
  • editor.findMatchHighlightBorder#0d6efd
  • editor.findRangeHighlightBackground#f8f9fa
  • editor.findRangeHighlightBorder#dee2e6
  • editor.foldBackground#e7f1ff
  • editor.foreground#212529
  • editor.hoverHighlightBackground#e7f1ff
  • editor.inactiveSelectionBackground#e9ecef
  • editor.lineHighlightBackground#f8f9fa
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#f8f9fa
  • editor.rangeHighlightBorder#dee2e6
  • editor.selectionBackground#cce5ff
  • editor.selectionHighlightBackground#e7f1ff
  • editor.selectionHighlightBorder#1e40af
  • editor.wordHighlightBackground#e9ecef
  • editor.wordHighlightStrongBackground#cce5ff
  • editorBracketMatch.background#f8f9fa
  • editorBracketMatch.border#6c757d
  • editorCodeLens.foreground#6c757d
  • editorCursor.background#ffffff
  • editorCursor.foreground#0d6efd
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#dc3545
  • editorGroup.border#dee2e6
  • editorGroup.emptyBackground#ffffff
  • editorGroupHeader.border#dee2e6
  • editorGroupHeader.tabsBackground#f8f9fa
  • editorGroupHeader.tabsBorder#dee2e6
  • editorGutter.addedBackground#28a745
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#6c757d
  • editorGutter.deletedBackground#dc3545
  • editorGutter.foldingControlForeground#6c757d
  • editorGutter.modifiedBackground#ffc107
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#ced4da
  • editorHoverWidget.foreground#212529
  • editorIndentGuide.activeBackground#495057
  • editorIndentGuide.background#e9ecef
  • editorInfo.background#d1ecf100
  • editorInfo.border#d1ecf100
  • editorInfo.foreground#0c5460
  • editorLineNumber.activeForeground#495057
  • editorLineNumber.foreground#6c757d
  • editorLink.activeForeground#0d6efd
  • editorMarkerNavigation.background#f8f9fa
  • editorMarkerNavigationError.background#dc3545
  • editorMarkerNavigationInfo.background#17a2b8
  • editorMarkerNavigationWarning.background#ffc107
  • editorOverviewRuler.background#f8f9fa
  • editorOverviewRuler.border#dee2e6
  • editorRuler.foreground#e9ecef
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#ced4da
  • editorSuggestWidget.foreground#212529
  • editorSuggestWidget.highlightForeground#0d6efd
  • editorSuggestWidget.selectedBackground#e7f1ff
  • editorWarning.background#fff3cd00
  • editorWarning.border#fff3cd00
  • editorWarning.foreground#856404
  • editorWhitespace.foreground#dee2e6
  • editorWidget.background#f8f9fa
  • editorWidget.foreground#212529
  • editorWidget.resizeBorder#0d6efd
  • focusBorder#0d6efd
  • foreground#212529
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#ffc107
  • gitDecoration.deletedResourceForeground#dc3545
  • gitDecoration.ignoredResourceForeground#6c757d
  • gitDecoration.modifiedResourceForeground#fd7e14
  • gitDecoration.stageDeletedResourceForeground#dc3545
  • gitDecoration.stageModifiedResourceForeground#fd7e14
  • gitDecoration.submoduleResourceForeground#6f42c1
  • gitDecoration.untrackedResourceForeground#28a745
  • icon.foreground#212529
  • input.background#ffffff
  • input.border#ced4da
  • input.foreground#212529
  • input.placeholderForeground#6c757d
  • inputOption.activeBackground#0d6efd
  • inputOption.activeBorder#0d6efd
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#0d6efd
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#e7f1ff
  • list.focusBackground#cce5ff
  • list.focusForeground#212529
  • list.highlightForeground#0d6efd
  • list.hoverBackground#f8f9fa
  • list.hoverForeground#212529
  • list.inactiveSelectionBackground#e9ecef
  • list.inactiveSelectionForeground#212529
  • listFilterWidget.background#f8f9fa
  • listFilterWidget.noMatchesOutline#dc3545
  • listFilterWidget.outline#0d6efd
  • menu.background#ffffff
  • menu.border#ced4da
  • menu.foreground#212529
  • menu.selectionBackground#e7f1ff
  • menu.selectionBorder#0d6efd
  • menu.selectionForeground#212529
  • menu.separatorBackground#dee2e6
  • menubar.selectionBackground#e7f1ff
  • menubar.selectionForeground#212529
  • merge.commonContentBackground#f8f9fa
  • merge.commonHeaderBackground#e9ecef
  • merge.currentContentBackground#d4edda
  • merge.currentHeaderBackground#28a745
  • merge.incomingContentBackground#d1ecf1
  • merge.incomingHeaderBackground#17a2b8
  • minimap.background#ffffff
  • minimap.errorHighlight#dc3545
  • minimap.findMatchHighlight#fff3cd
  • minimap.selectionHighlight#cce5ff
  • minimap.warningHighlight#ffc107
  • minimapGutter.addedBackground#28a745
  • minimapGutter.deletedBackground#dc3545
  • minimapGutter.modifiedBackground#ffc107
  • notificationCenter.border#dee2e6
  • notificationCenterHeader.background#f8f9fa
  • notificationCenterHeader.foreground#212529
  • notifications.background#ffffff
  • notifications.border#ced4da
  • notifications.foreground#212529
  • notificationsErrorIcon.foreground#dc3545
  • notificationsInfoIcon.foreground#17a2b8
  • notificationsWarningIcon.foreground#ffc107
  • notificationToast.border#ced4da
  • panel.background#ffffff
  • panel.border#dee2e6
  • panelSection.border#dee2e6
  • panelTitle.activeBorder#0d6efd
  • panelTitle.activeForeground#212529
  • panelTitle.inactiveForeground#6c757d
  • peekView.border#0d6efd
  • peekViewEditor.background#f8f9fa
  • peekViewEditor.matchHighlightBackground#fff3cd
  • peekViewEditor.matchHighlightBorder#ffc107
  • peekViewEditorGutter.background#f8f9fa
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#212529
  • peekViewResult.lineForeground#495057
  • peekViewResult.matchHighlightBackground#fff3cd
  • peekViewResult.selectionBackground#e7f1ff
  • peekViewResult.selectionForeground#212529
  • peekViewTitle.background#e9ecef
  • peekViewTitleDescription.foreground#6c757d
  • peekViewTitleLabel.foreground#212529
  • pickerGroup.border#dee2e6
  • pickerGroup.foreground#495057
  • progressBar.background#0d6efd
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#495057aa
  • scrollbarSlider.background#6c757d80
  • scrollbarSlider.hoverBackground#495057aa
  • selection.background#cce5ff
  • settings.focusedRowBackground#f8f9fa
  • settings.headerForeground#212529
  • sideBar.background#f8f9fa
  • sideBar.border#dee2e6
  • sideBar.dropBackground#e7f1ff
  • sideBar.foreground#495057
  • sideBarSectionHeader.background#e9ecef
  • sideBarSectionHeader.border#dee2e6
  • sideBarSectionHeader.foreground#212529
  • sideBarTitle.foreground#212529
  • statusBar.background#0d6efd
  • statusBar.debuggingBackground#dc3545
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#6c757d
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#28a745
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#00000000
  • tab.activeBorderTop#0d6efd
  • tab.activeForeground#212529
  • tab.border#dee2e6
  • tab.hoverBackground#e9ecef
  • tab.hoverForeground#212529
  • tab.inactiveBackground#f8f9fa
  • tab.inactiveForeground#6c757d
  • terminal.ansiBlack#343a40
  • terminal.ansiBlue#0056b3
  • terminal.ansiBrightBlack#6c757d
  • terminal.ansiBrightBlue#0d6efd
  • terminal.ansiBrightCyan#17a2b8
  • terminal.ansiBrightGreen#28a745
  • terminal.ansiBrightMagenta#6f42c1
  • terminal.ansiBrightRed#dc3545
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffc107
  • terminal.ansiCyan#138496
  • terminal.ansiGreen#1e7e34
  • terminal.ansiMagenta#5a1a5a
  • terminal.ansiRed#c82333
  • terminal.ansiWhite#f8f9fa
  • terminal.ansiYellow#e0a800
  • terminal.border#dee2e6
  • terminal.foreground#212529
  • terminal.selectionBackground#0d6efd40
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#0d6efd
  • textLink.foreground#0d6efd
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#212529
  • titleBar.border#dee2e6
  • titleBar.inactiveBackground#f8f9fa
  • titleBar.inactiveForeground#6c757d
  • tree.indentGuidesStroke#e9ecef
  • walkThrough.embeddedEditorBackground#f8f9fa
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#047857
variable.other.generic-type.haskell#1e40af
storage.type.haskell#d97706
support.variable.magic.python#047857
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#212529
variable.parameter.function.language.special.self.python#1e40af
storage.modifier.lifetime.rust#212529
support.function.std.rust#0d6efd
entity.name.lifetime.rust#1e40af
variable.language.rust#047857
support.constant.edge#1e40af
constant.other.character-class.regexp#047857
keyword.operator.quantifier.regexp#d97706
punctuation.definition.string.begin,punctuation.definition.string.end#d97706
variable.parameter.function#212529
comment markup.link#6c757d
markup.changed.diff#1e40af
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#0d6efd
markup.inserted.diff#d97706
markup.deleted.diff#047857
meta.function.c,meta.function.cpp#047857
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#212529
punctuation.separator.key-value#212529
keyword.operator.expression.import#0d6efd
support.constant.math#1e40af
support.constant.property.math#d97706
variable.other.constant#1e40af
storage.type.annotation.java, storage.type.object.array.java#1e40af
source.java#047857
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#212529
meta.method.java#0d6efd
storage.modifier.import.java,storage.type.java,storage.type.generic.java#1e40af
keyword.operator.instanceof.java#1e40af
meta.definition.variable.name.java#047857
keyword.operator.logical#212529
keyword.operator.bitwise#212529
keyword.operator.channel#212529
support.constant.property-value.scss,support.constant.property-value.css#d97706
keyword.operator.css,keyword.operator.scss,keyword.operator.less#212529
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d97706
punctuation.separator.list.comma.css#212529
support.constant.color.w3c-standard-color-name.css#d97706
support.type.vendored.property-name.css#212529
support.module.node,support.type.object.module,support.module.node#1e40af
entity.name.type.module#d97706
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#047857
support.constant.json#d97706
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#1e40af
support.type.object.console#047857
support.variable.property.process#d97706
entity.name.function,support.function.console#0d6efd
keyword.operator.misc.rust#212529
keyword.operator.sigil.rust#1e40af
keyword.operator.delete#1e40af
support.type.object.dom#212529
support.variable.dom,support.variable.property.dom#047857
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#212529
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#1e40af
punctuation.separator.delimiter#212529
punctuation.separator.c,punctuation.separator.cpp#1e40af
support.type.posix-reserved.c,support.type.posix-reserved.cpp#212529
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#1e40af
variable.parameter.function.language.python#d97706
support.type.python#212529
keyword.operator.logical.python#1e40af
variable.parameter.function.python#d97706
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#212529
meta.function-call.generic.python#0d6efd
constant.character.format.placeholder.other.python#d97706
keyword.operator#212529
keyword.operator.assignment.compound#1e40af
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#212529
keyword#1e40af
entity.name.namespace#1e40af
variable#047857
variable.c#212529
variable.language#1e40af
token.variable.parameter.java#212529
import.storage.java#1e40af
token.package.keyword#1e40af
token.package#212529
entity.name.function, meta.require, support.function.any-method, variable.function#0d6efd
entity.name.type.namespace#1e40af
support.class, entity.name.type.class#1e40af
entity.name.class.identifier.namespace.type#1e40af
entity.name.class, variable.other.class.js, variable.other.class.ts#1e40af
variable.other.class.php#047857
entity.name.type#1e40af
keyword.control#1e40af
control.elements, keyword.operator.less#d97706
keyword.other.special-method#0d6efd
storage#1e40af
token.storage#1e40af
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#1e40af
token.storage.type.java#1e40af
support.function#212529
support.type.property-name#212529
support.constant.property-value#212529
support.constant.font-name#d97706
meta.tag#212529
string#d97706
entity.other.inherited-class#1e40af
constant.other.symbol#212529
constant.numeric#d97706
constant#d97706
punctuation.definition.constant#d97706
entity.name.tag#1e40af
entity.other.attribute-name#047857
entity.other.attribute-name.html#1e40af
string.quoted.double.html,string.quoted.single.html,string.template.html,punctuation.definition.string.begin.html,punctuation.definition.string.end.html#047857
entity.other.attribute-name.id#0d6efdnormal
entity.other.attribute-name.class.css#047857normal
meta.selector#1e40af
markup.heading#047857
markup.heading punctuation.definition.heading, entity.name.section#0d6efd
keyword.other.unit#047857
markup.bold,todo.bold#d97706
punctuation.definition.bold#1e40af
markup.italic, punctuation.definition.italic,todo.emphasis#1e40af
emphasis md#1e40af
entity.name.section.markdown#047857
punctuation.definition.heading.markdown#047857
punctuation.definition.list.begin.markdown#047857
markup.heading.setext#212529
punctuation.definition.bold.markdown#d97706
markup.inline.raw.markdown#d97706
markup.inline.raw.string.markdown#d97706
punctuation.definition.list.markdown#047857
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#047857
beginning.punctuation.definition.list.markdown#047857
punctuation.definition.metadata.markdown#047857
markup.underline.link.markdown,markup.underline.link.image.markdown#1e40af
string.other.link.title.markdown,string.other.link.description.markdown#0d6efd
string.regexp#212529
constant.character.escape#212529
punctuation.section.embedded, variable.interpolation#047857
punctuation.section.embedded.begin,punctuation.section.embedded.end#1e40af
invalid.illegal#dc2626
invalid.illegal.bad-ampersand.html#212529
invalid.broken#dc2626
invalid.deprecated#dc2626
invalid.unimplemented#dc2626
support.type.property-name.json#047857
support.type.property-name.json punctuation#047857
comment, punctuation.definition.comment#6c757ditalic
markup.quote.markdown#6c757d