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#06091c
  • activityBar.foreground#b9c4dc
  • activityBarBadge.background#79b3f7
  • activityBarBadge.foreground#0a0f22
  • badge.background#79b3f7
  • badge.foreground#0a0f22
  • breadcrumb.activeSelectionForeground#79b3f7
  • breadcrumb.background#0a0f22
  • breadcrumb.focusForeground#b9c4dc
  • breadcrumb.foreground#707a90
  • breadcrumbPicker.background#06091c
  • button.background#79b3f7
  • button.foreground#0a0f22
  • button.hoverBackground#85b6f2
  • checkbox.background#13182c
  • checkbox.border#0c233f
  • debugConsole.errorForeground#f4514c
  • debugConsole.infoForeground#79b3f7
  • debugConsole.warningForeground#e7be62
  • debugIcon.breakpointForeground#f4514c
  • diffEditor.insertedLineBackground#89cc7b14
  • diffEditor.insertedTextBackground#89cc7b26
  • diffEditor.removedLineBackground#f4514c14
  • diffEditor.removedTextBackground#f4514c26
  • dropdown.background#06091c
  • dropdown.border#0c233f
  • dropdown.foreground#b9c4dc
  • dropdown.listBackground#06091c
  • editor.background#0a0f22
  • editor.findMatchBackground#0c233f
  • editor.findMatchHighlightBackground#13182c
  • editor.foreground#b9c4dc
  • editor.lineHighlightBackground#13182c
  • editor.selectionBackground#0c233f
  • editorBracketHighlight.foreground1#e7be62
  • editorBracketHighlight.foreground2#b19ee3
  • editorBracketHighlight.foreground3#79b3f7
  • editorBracketHighlight.foreground4#89cc7b
  • editorBracketHighlight.foreground5#f68c36
  • editorBracketHighlight.foreground6#45d0c0
  • editorBracketHighlight.unexpectedBracket.foreground#f4514c
  • editorCursor.background#0a0f22
  • editorCursor.foreground#79b3f7
  • editorError.background#f4514c1a
  • editorError.foreground#f4514c
  • editorGroup.border#0c233f
  • editorGroupHeader.tabsBackground#06091c
  • editorGroupHeader.tabsBorder#0c233f
  • editorGutter.addedBackground#89cc7b
  • editorGutter.background#0a0f22
  • editorGutter.deletedBackground#f4514c
  • editorGutter.foldingControlForeground#707a90
  • editorGutter.modifiedBackground#79b3f7
  • editorHint.foreground#45d0c0
  • editorHoverWidget.background#06091c
  • editorHoverWidget.border#0c233f
  • editorHoverWidget.foreground#b9c4dc
  • editorIndentGuide.activeBackground1#79b3f7
  • editorIndentGuide.background1#13182c
  • editorInfo.background#79b3f71a
  • editorInfo.foreground#79b3f7
  • editorInlayHint.background#06091c
  • editorInlayHint.foreground#707a90
  • editorInlayHint.parameterForeground#707a90
  • editorInlayHint.typeForeground#707a90
  • editorLineNumber.activeForeground#e7be62
  • editorLineNumber.foreground#707a90
  • editorLink.activeForeground#79b3f7
  • editorOverviewRuler.addedForeground#89cc7b
  • editorOverviewRuler.bracketMatchForeground#707a90
  • editorOverviewRuler.deletedForeground#f4514c
  • editorOverviewRuler.errorForeground#f4514c
  • editorOverviewRuler.findMatchForeground#e7be6299
  • editorOverviewRuler.infoForeground#79b3f7
  • editorOverviewRuler.modifiedForeground#79b3f7
  • editorOverviewRuler.warningForeground#e7be62
  • editorRuler.foreground#13182c
  • editorSuggestWidget.background#06091c
  • editorSuggestWidget.border#0c233f
  • editorSuggestWidget.focusHighlightForeground#79b3f7
  • editorSuggestWidget.foreground#b9c4dc
  • editorSuggestWidget.highlightForeground#79b3f7
  • editorSuggestWidget.selectedBackground#13182c
  • editorWarning.background#e7be621a
  • editorWarning.foreground#e7be62
  • editorWhitespace.foreground#0c233f
  • editorWidget.background#06091c
  • editorWidget.border#0c233f
  • editorWidget.foreground#b9c4dc
  • focusBorder#79b3f7
  • foreground#949fb5
  • gitDecoration.addedResourceForeground#89cc7b
  • gitDecoration.conflictingResourceForeground#f68c36
  • gitDecoration.deletedResourceForeground#f4514c
  • gitDecoration.ignoredResourceForeground#707a90
  • gitDecoration.modifiedResourceForeground#79b3f7
  • gitDecoration.stageModifiedResourceForeground#79b3f7
  • gitDecoration.submoduleResourceForeground#b19ee3
  • gitDecoration.untrackedResourceForeground#89cc7b
  • input.background#06091c
  • input.border#0c233f
  • input.foreground#b9c4dc
  • input.placeholderForeground#707a90
  • inputOption.activeBorder#79b3f7
  • inputOption.activeForeground#b9c4dc
  • inputValidation.errorBackground#f4514c33
  • inputValidation.errorBorder#f4514c
  • inputValidation.infoBackground#79b3f733
  • inputValidation.infoBorder#79b3f7
  • inputValidation.warningBackground#e7be6233
  • inputValidation.warningBorder#e7be62
  • keybindingLabel.foreground#79b3f7
  • list.activeSelectionBackground#0c233f
  • list.activeSelectionForeground#b9c4dc
  • list.deemphasizedForeground#707a90
  • list.errorForeground#f4514c
  • list.focusAndSelectionOutline#79b3f7
  • list.focusOutline#79b3f7
  • list.highlightForeground#f68c36
  • list.hoverBackground#13182c
  • list.inactiveSelectionBackground#13182c
  • list.warningForeground#e7be62
  • menu.background#06091c
  • menu.border#0c233f
  • menu.foreground#b9c4dc
  • menu.selectionBackground#13182c
  • menu.selectionForeground#b9c4dc
  • menu.separatorBackground#0c233f
  • menubar.selectionBackground#13182c
  • merge.currentContentBackground#45d0c014
  • merge.currentHeaderBackground#45d0c033
  • merge.incomingContentBackground#79b3f714
  • merge.incomingHeaderBackground#79b3f733
  • minimap.errorHighlight#f4514c
  • minimap.findMatchHighlight#e7be62
  • minimap.warningHighlight#e7be62
  • minimapGutter.addedBackground#89cc7b
  • minimapGutter.deletedBackground#f4514c
  • minimapGutter.modifiedBackground#79b3f7
  • notebook.focusedCellBorder#79b3f7
  • notificationCenterHeader.background#13182c
  • notificationLink.foreground#79b3f7
  • notifications.background#06091c
  • notifications.border#0c233f
  • notifications.foreground#b9c4dc
  • notificationsErrorIcon.foreground#f4514c
  • notificationsInfoIcon.foreground#79b3f7
  • notificationsWarningIcon.foreground#e7be62
  • panel.background#06091c
  • panel.border#0c233f
  • panelSectionHeader.background#06091c
  • panelTitle.activeBorder#79b3f7
  • peekView.border#79b3f7
  • peekViewEditor.background#06091c
  • peekViewEditor.matchHighlightBackground#e7be6233
  • peekViewResult.background#06091c
  • peekViewResult.fileForeground#949fb5
  • peekViewResult.lineForeground#707a90
  • peekViewResult.matchHighlightBackground#e7be6233
  • peekViewResult.selectionBackground#13182c
  • peekViewTitle.background#06091c
  • peekViewTitleDescription.foreground#707a90
  • peekViewTitleLabel.foreground#b9c4dc
  • pickerGroup.foreground#79b3f7
  • problemsErrorIcon.foreground#f4514c
  • problemsInfoIcon.foreground#79b3f7
  • problemsWarningIcon.foreground#e7be62
  • progressBar.background#79b3f7
  • quickInput.background#06091c
  • quickInput.foreground#b9c4dc
  • quickInputList.focusBackground#13182c
  • quickInputList.focusForeground#b9c4dc
  • sash.hoverBorder#79b3f7
  • scrollbarSlider.activeBackground#0c233fcc
  • scrollbarSlider.background#0c233f80
  • scrollbarSlider.hoverBackground#0c233faa
  • selection.background#0c233f
  • sideBar.background#06091c
  • sideBar.border#0c233f
  • sideBar.foreground#949fb5
  • sideBarSectionHeader.background#06091c
  • sideBarSectionHeader.border#0c233f
  • sideBarSectionHeader.foreground#949fb5
  • sideBarTitle.foreground#b9c4dc
  • statusBar.background#06091c
  • statusBar.border#0c233f
  • statusBar.debuggingBackground#f68c36
  • statusBar.foreground#949fb5
  • statusBar.noFolderBackground#06091c
  • statusBarItem.hoverBackground#13182c
  • statusBarItem.remoteBackground#79b3f7
  • statusBarItem.remoteForeground#0a0f22
  • tab.activeBackground#0a0f22
  • tab.activeBorder#79b3f7
  • tab.activeBorderTop#79b3f7
  • tab.activeForeground#b9c4dc
  • tab.border#06091c
  • tab.inactiveBackground#06091c
  • tab.inactiveForeground#707a90
  • terminal.ansiBlack#13182c
  • terminal.ansiBlue#79b3f7
  • terminal.ansiBrightBlack#0c233f
  • terminal.ansiBrightBlue#79b3f7
  • terminal.ansiBrightCyan#44d6f1
  • terminal.ansiBrightGreen#89cc7b
  • terminal.ansiBrightMagenta#ee94db
  • terminal.ansiBrightRed#f4514c
  • terminal.ansiBrightWhite#b9c4dc
  • terminal.ansiBrightYellow#e7be62
  • terminal.ansiCyan#44d6f1
  • terminal.ansiGreen#89cc7b
  • terminal.ansiMagenta#ee94db
  • terminal.ansiRed#f4514c
  • terminal.ansiWhite#949fb5
  • terminal.ansiYellow#e7be62
  • terminal.background#0a0f22
  • terminal.foreground#b9c4dc
  • terminal.selectionBackground#0c233f
  • terminalCursor.background#0a0f22
  • terminalCursor.foreground#79b3f7
  • testing.iconFailed#f4514c
  • testing.iconPassed#89cc7b
  • testing.iconQueued#e7be62
  • textLink.activeForeground#89b7f0
  • textLink.foreground#79b3f7
  • titleBar.activeBackground#06091c
  • titleBar.activeForeground#b9c4dc
  • titleBar.border#0c233f
  • titleBar.inactiveBackground#06091c
  • titleBar.inactiveForeground#707a90
  • tree.indentGuidesStroke#0c233f
  • widget.border#0c233f
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, storage.type, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, meta.record.identifier storage.modifier#f4514cbold
keyword.operator#44d6f1
entity.name.function#e7be62bold
meta.function-call, support.function, meta.function-call entity.name.function#e7be62
entity.name.function.constructor, entity.name.type.constructor#f99a4ebold
entity.name.type, support.type, entity.name.class, support.class#f68c36bold
variable.language, support.type.builtin, constant.language#f99a4eitalic
variable.parameter#96c9e2italic
string, string.quoted, string.template#7fd899
constant.character.escape#44d6f1
constant.numeric#79b3f7
constant.language.boolean#b19ee3
constant.other#b19ee3
variable.other.constant#b3caff
variable.other.property, support.variable.property, meta.object-literal.key#45d0c0
variable, variable.other.readwrite#dfddff
meta.preprocessor#f4514c
comment, punctuation.definition.comment#707a90italic
punctuation, meta.brace#8895bf
entity.name.tag#f4514c
support.class.component, entity.name.tag.namespace#f68c36
entity.other.attribute-name#68ccc8
punctuation.definition.tag#949fb5
markup.inserted, markup.inserted punctuation.definition.inserted#89cc7b
markup.changed, markup.changed punctuation.definition.changed#79b3f7
markup.deleted, markup.deleted punctuation.definition.deleted#f4514c
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#83b4f3bold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#63bde7bold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#4fc4d1bold
heading.4.markdown, heading.4.markdown punctuation.definition.heading, heading.5.markdown, heading.5.markdown punctuation.definition.heading, heading.6.markdown, heading.6.markdown punctuation.definition.heading#59c7b4bold
markup.bold#b9c4dcbold
markup.italic#b9c4dcitalic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#45d0c0
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#44d6f1underline
markup.quote#707a90italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#f68c36
meta.separator.markdown, entity.other.document.begin.yaml#8895bf
markup.strikethrough#707a90strikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#45d0c0
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#b19ee3
keyword.other.unit#f68c36
constant.other.color#b19ee3
keyword.other.important#f4514cbold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e7be62
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#44d6f1
constant.other.character-class.regexp, constant.other.character-class.set.regexp#f68c36
keyword.operator.quantifier.regexp#f4514c
keyword.control.anchor.regexp#f4514c
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#b19ee3
variable.other.jsdoc#b9c4dcitalic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#79b3f7
punctuation.definition.string#7fd899
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#f4514cbold
keyword.control.type, storage.type.type#f68c36italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#ae93fdbold
storage.modifier.attribute#f99a4e
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#44d6f1bold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#60a7ffitalic