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.background#0d0e15
  • activityBar.border#0d0e15
  • activityBar.dropBackground#8b9efd40
  • activityBar.foreground#b8cdfe
  • activityBarBadge.background#4961da
  • activityBarBadge.foreground#e1e6ff
  • badge.background#4961da
  • badge.foreground#d9e5fe
  • breadcrumb.activeSelectionForeground#b8cdfe99
  • breadcrumb.focusForeground#b8cdfe99
  • breadcrumb.foreground#b8cdfe77
  • breadcrumbPicker.background#0d0e15
  • button.background#4961da
  • button.foreground#d9e5fe
  • button.hoverBackground#516aec
  • debugExceptionWidget.background#0d0e15
  • debugExceptionWidget.border#0d0e15
  • debugToolBar.background#0d0e15
  • debugToolBar.border#131520
  • descriptionForeground#b8cdfe
  • diffEditor.insertedTextBackground#67c9e420
  • diffEditor.removedTextBackground#ec407a20
  • dropdown.background#131520
  • dropdown.border#0d0e15
  • dropdown.foreground#75d5f0
  • editor.background#0d0e15
  • editor.findMatchBackground#0d0e15
  • editor.findMatchBorder#4961da
  • editor.findMatchHighlightBackground#4961da33
  • editor.findMatchHighlightBorder#4961da99
  • editor.foreground#b8cdfe
  • editor.hoverHighlightBackground#131520
  • editor.inactiveSelectionBackground#252a4199
  • editor.lineHighlightBackground#13152099
  • editor.lineHighlightBorder#131520
  • editor.rangeHighlightBackground#252a41
  • editor.selectionBackground#7289fd33
  • editor.selectionHighlightBackground#252a41
  • editor.wordHighlightBackground#252a41
  • editor.wordHighlightStrongBackground#252a41
  • editorActiveLineNumber.foreground#b8cdfe
  • editorBracketMatch.background#0d0e15
  • editorBracketMatch.border#5e6587
  • editorCodeLens.foreground#516aec77
  • editorCursor.background#0d0e15
  • editorCursor.foreground#7289fd
  • editorError.foreground#ec407a
  • editorGroup.background#5e6587
  • editorGroup.border#0d0e15
  • editorGroup.dropBackground#67c9e440
  • editorGroup.emptyBackground#0d0e15
  • editorGroupHeader.noTabsBackground#0d0e15
  • editorGroupHeader.tabsBackground#0d0e15
  • editorGroupHeader.tabsBorder#0d0e15
  • editorGutter.addedBackground#67c9e4
  • editorGutter.background#0d0e1564
  • editorGutter.deletedBackground#ec407a
  • editorGutter.modifiedBackground#627af4
  • editorHoverWidget.background#131520
  • editorHoverWidget.border#516aec
  • editorHoverWidget.foreground#b8cdfe
  • editorIndentGuide.activeBackground#444b6f
  • editorIndentGuide.background#252a41
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#516aec99
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#516aec99
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#516aec99
  • editorLineNumber.activeForeground#b8cdfe
  • editorLineNumber.foreground#444b6f
  • editorLink.activeForeground#516aec
  • editorMarkerNavigation.background#5e6587
  • editorMarkerNavigationError.background#4961da
  • editorMarkerNavigationWarning.background#627af4
  • editorOverviewRuler.addedForeground#67c9e499
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#ec407a
  • editorOverviewRuler.currentContentForeground#ec407a
  • editorOverviewRuler.deletedForeground#ec407a99
  • editorOverviewRuler.errorForeground#ec407a
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#ec407a
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#4961da99
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#00000000
  • editorOverviewRuler.warningForeground#4961da
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorRuler.foreground#b8cdfe
  • editorSuggestWidget.background#252a41
  • editorSuggestWidget.border#0d0e15
  • editorSuggestWidget.foreground#b8cdfe
  • editorSuggestWidget.highlightForeground#99e9ff
  • editorSuggestWidget.selectedBackground#0d0e15
  • editorWarning.foreground#627af4
  • editorWhitespace.foreground#5e6587
  • editorWidget.background#0d0e15
  • editorWidget.border#0d0e15
  • editorWidget.resizeBorder#4db0cb
  • errorForeground#4961da
  • extensionButton.prominentBackground#4961da
  • extensionButton.prominentForeground#d9e5fe
  • extensionButton.prominentHoverBackground#4961da
  • focusBorder#00000000
  • foreground#b8cdfe99
  • gitDecoration.addedResourceForeground#67c9e4
  • gitDecoration.conflictingResourceForeground#ec407a99
  • gitDecoration.deletedResourceForeground#ec407a
  • gitDecoration.ignoredResourceForeground#444b6f
  • gitDecoration.modifiedResourceForeground#4961da
  • gitDecoration.untrackedResourceForeground#289dbd
  • gitlens.trailingLineForegroundColor#627af470
  • icon.foreground#b8cdfe99
  • input.background#131520
  • input.border#0d0e15
  • input.foreground#c3cdfe
  • input.placeholderForeground#b8cdfe99
  • inputOption.activeBorder#67c9e4
  • inputValidation.errorBackground#4961da
  • inputValidation.errorBorder#4961da
  • inputValidation.infoBackground#131520
  • inputValidation.infoBorder#516aec
  • inputValidation.warningBackground#627af4
  • inputValidation.warningBorder#627af4
  • list.activeSelectionBackground#131520
  • list.activeSelectionForeground#b8cdfe
  • list.dropBackground#67c9e440
  • list.errorForeground#7289fd
  • list.focusBackground#252a41
  • list.focusForeground#75d5f0
  • list.highlightForeground#75d5f0
  • list.hoverBackground#131520
  • list.hoverForeground#75d5f0
  • list.inactiveSelectionBackground#0d0e15
  • list.inactiveSelectionForeground#b8cdfe
  • list.invalidItemForeground#7289fd
  • list.warningForeground#7289fd
  • menu.background#0d0e15
  • menu.foreground#b8cdfecc
  • menu.selectionBackground#131520
  • menu.selectionForeground#75d5f0
  • menu.separatorBackground#516aec
  • menubar.selectionBackground#131520
  • merge.currentHeaderBackground#b8cdfe99
  • merge.incomingHeaderBackground#516aec
  • notificationCenterHeader.background#131520
  • notificationCenterHeader.foreground#c3cdfe
  • notificationLink.foreground#67c9e4
  • notifications.background#0d0e15
  • notifications.border#516aec99
  • notifications.foreground#c3cdfe
  • panel.background#0d0e15
  • panel.border#0d0e15
  • panel.dropBackground#8b9efd40
  • panelTitle.activeBorder#b8cdfe
  • panelTitle.activeForeground#b8cdfe
  • panelTitle.inactiveForeground#b8cdfe99
  • peekView.border#252a41
  • peekViewEditor.background#0d0e15
  • peekViewEditor.matchHighlightBackground#4961da
  • peekViewResult.background#131520
  • peekViewResult.fileForeground#b8cdfe
  • peekViewResult.lineForeground#51587b
  • peekViewResult.matchHighlightBackground#4961da
  • peekViewResult.selectionBackground#252a41
  • peekViewResult.selectionForeground#b8cdfe
  • peekViewTitle.background#0d0e15
  • peekViewTitleDescription.foreground#b8cdfe99
  • peekViewTitleLabel.foreground#b8cdfe
  • pickerGroup.border#0d0e15
  • pickerGroup.foreground#c3cdfe
  • progressBar.background#627af4
  • scrollbar.shadow#0d0e1500
  • scrollbarSlider.activeBackground#51587b11
  • scrollbarSlider.background#444b6f33
  • scrollbarSlider.hoverBackground#444b6f11
  • selection.background#627af455
  • settings.dropdownForeground#b8cdfe
  • settings.textInputBackground#131520
  • settings.textInputBorder#131520
  • sideBar.background#0d0e15
  • sideBar.border#0d0e15
  • sideBar.dropBackground#8b9efd40
  • sideBar.foreground#b8cdfe99
  • sideBarSectionHeader.background#0d0e15
  • sideBarSectionHeader.foreground#b8cdfe
  • sideBarTitle.foreground#b8cdfe
  • statusBar.background#0d0e15
  • statusBar.border#0d0e15
  • statusBar.debuggingBackground#0d0e15
  • statusBar.debuggingBorder#33abcc
  • statusBar.debuggingForeground#b8cdfe
  • statusBar.foreground#b8cdfe77
  • statusBar.noFolderBackground#0d0e15
  • statusBar.noFolderBorder#0d0e15
  • statusBarItem.activeBackground#131520
  • statusBarItem.hoverBackground#131520
  • statusBarItem.prominentBackground#131520
  • statusBarItem.prominentHoverBackground#131520
  • tab.activeBackground#0d0e15
  • tab.activeBorder#0d0e15
  • tab.activeBorderTop#33abcc
  • tab.activeForeground#b8cdfe
  • tab.border#0d0e15
  • tab.hoverBackground#0d0e15
  • tab.inactive#0d0e15
  • tab.inactiveBackground#0d0e15
  • tab.inactiveForeground#b8cdfe99
  • tab.unfocusedActiveForeground#b8cdfe99
  • tab.unfocusedInactiveForeground#b8cdfe99
  • terminal.ansiBlack#252a41
  • terminal.ansiBlue#627af4
  • terminal.ansiBrightBlack#4961da
  • terminal.ansiBrightBlue#67c9e4
  • terminal.ansiBrightCyan#75d5f0
  • terminal.ansiBrightGreen#75d5f0
  • terminal.ansiBrightMagenta#7289fd
  • terminal.ansiBrightRed#627af4
  • terminal.ansiBrightWhite#b8cdfe
  • terminal.ansiBrightYellow#b8cdfe
  • terminal.ansiCyan#67c9e4
  • terminal.ansiGreen#67c9e4
  • terminal.ansiMagenta#7289fd
  • terminal.ansiRed#4961da
  • terminal.ansiWhite#b8cdfe
  • terminal.ansiYellow#627af4
  • terminal.background#0d0e15
  • terminal.foreground#b8cdfe
  • terminal.selectionBackground#516aec33
  • terminalCursor.background#131520
  • terminalCursor.foreground#516aec
  • textLink.activeForeground#516aec
  • textLink.foreground#516aec
  • titleBar.activeBackground#0d0e15
  • titleBar.activeForeground#b8cdfecc
  • titleBar.inactiveBackground#0d0e15
  • titleBar.inactiveForeground#b8cdfe99
  • tree.indentGuidesStroke#b8cdfe33
  • walkThrough.embeddedEditorBackground#0d0e15
  • welcomePage.buttonBackground#0d0e15
  • welcomePage.buttonHoverBackground#0d0e15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#a5b3fe
punctuation, constant.other.symbol#86e0f9
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#a5b3fe
constant.language.boolean#516aec
constant.language.null, constant.language.undefined#516aec99
constant.numeric#516aec
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#b8cdfe
keyword.other#33abcc
keyword, modifier, variable.language.this, support.type.object, constant.language#516aecitalic
constant.language.import-export-all#75d5f0
keyword, modifier, variable.language.this, support.type.object, constant.language#516aec
entity.name.function, support.function#7289fd
storage.type, storage.modifier#627af4
support.module, support.node#516aecitalic
support.type, constant.other.key#5cbcd6
entity.name.type, entity.other.inherited-class, entity.other#5cbcd6
comment#627af4aaitalic
punctuation#33abcc
punctuation.definition.comment#627af4aa
entity.name, entity.name.type.class, support.type, support.class, meta.use#8b9efd
variable.object.property, meta.field.declaration entity.name.function#7289fd
meta.definition.method entity.name.function#627af4
meta.function entity.name.function#82AAFF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#516aec
meta.embedded, source.groovy.embedded, meta.template.expression#b8cdfe
entity.name.tag.yaml#627af4
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#8b9efd
constant.language.json#516aec
entity.other.attribute-name.class#627af4
entity.other.attribute-name.id#627af4
source.css entity.name.tag#627af4
support.type.property-name.css#8b9efd
meta.tag, punctuation.definition.tag#627af4aa
entity.name.tag#627af4
entity.other.attribute-name#8b9efditalic
markup.heading#289dbd
markup.inserted#67c9e4
markup.deleted#ec407a
text.html.markdown meta.link.inline, meta.link.reference#4961da
text.html.markdown beginning.punctuation.definition.list#4961da
markup.italic#289dbditalic
markup.bold#289dbdbold
markup.underline.link.image#4961dabold
markup.bold markup.italic, markup.italic markup.bold#289dbditalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#33abcc
entity.name.section.markdown#33abccbold
punctuation.definition.comment.html#627af4aa
punctuation.definition.inserted#67c9e4
punctuation.definition.deleted#ec407a
markup.inline.raw.string.markdown#516aec
keyword.other.definition.ini#289dbd
entity.name.section.group-title.ini#86e0f9
source.cs meta.class.identifier storage.type#4961da
source.cs meta.method.identifier entity.name.function#4961da
source.cs meta.method-call meta.method, source.cs entity.name.function#8b9efd
source.cs storage.type#8b9efd
source.cs meta.method.return-type#8b9efd
source.cs meta.preprocessor#676E95
source.cs entity.name.type.namespace#b8cdfe
meta.jsx.children, SXNested#b8cdfe
support.class.component#33abcc
source.cpp meta.block variable.other#b8cdfe
source.python meta.member.access.python#516aec
source.python meta.function-call.python, meta.function-call.arguments#82AAFF
meta.block#289dbd
entity.name.function.call#82AAFF
source.php support.other.namespace, source.php meta.use support.class#b8cdfe
keyword.control#33abccitalic
keyword.operator.arithmetic#33abcc
markup.quote#516aecitalic
markup.fenced_code.block#b8cdfe90
punctuation.definition.quote#33abcc
meta.structure.dictionary.json support.type.property-name.json#7289fd
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7289fd
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#33abcc
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#33abcc
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4961da99
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8b9efd
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4db0cb
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#627af4
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#67c9e4
token.info-token#67c9e4
token.warn-token#7289fd
token.error-token#ec407a
token.debug-token#33abcc