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#202838
  • activityBar.foreground#c3cee5
  • activityBarBadge.background#79b3f7
  • activityBarBadge.foreground#262e3e
  • badge.background#79b3f7
  • badge.foreground#262e3e
  • breadcrumb.activeSelectionForeground#79b3f7
  • breadcrumb.background#262e3e
  • breadcrumb.focusForeground#c3cee5
  • breadcrumb.foreground#7f899f
  • breadcrumbPicker.background#202838
  • button.background#79b3f7
  • button.foreground#262e3e
  • button.hoverBackground#86b8f4
  • checkbox.background#2f3849
  • checkbox.border#31445c
  • debugConsole.errorForeground#fe736a
  • debugConsole.infoForeground#79b3f7
  • debugConsole.warningForeground#e7be62
  • debugIcon.breakpointForeground#fe736a
  • diffEditor.insertedLineBackground#89cc7b14
  • diffEditor.insertedTextBackground#89cc7b26
  • diffEditor.removedLineBackground#fe736a14
  • diffEditor.removedTextBackground#fe736a26
  • dropdown.background#202838
  • dropdown.border#31445c
  • dropdown.foreground#c3cee5
  • dropdown.listBackground#202838
  • editor.background#262e3e
  • editor.findMatchBackground#31445c
  • editor.findMatchHighlightBackground#2f3849
  • editor.foreground#c3cee5
  • editor.lineHighlightBackground#2f3849
  • editor.selectionBackground#31445c
  • editorBracketHighlight.foreground1#e7be62
  • editorBracketHighlight.foreground2#b19ee3
  • editorBracketHighlight.foreground3#79b3f7
  • editorBracketHighlight.foreground4#89cc7b
  • editorBracketHighlight.foreground5#f68c36
  • editorBracketHighlight.foreground6#45d0c0
  • editorBracketHighlight.unexpectedBracket.foreground#fe736a
  • editorCursor.background#262e3e
  • editorCursor.foreground#79b3f7
  • editorError.background#fe736a1a
  • editorError.foreground#fe736a
  • editorGroup.border#31445c
  • editorGroupHeader.tabsBackground#202838
  • editorGroupHeader.tabsBorder#31445c
  • editorGutter.addedBackground#89cc7b
  • editorGutter.background#262e3e
  • editorGutter.deletedBackground#fe736a
  • editorGutter.foldingControlForeground#7f899f
  • editorGutter.modifiedBackground#79b3f7
  • editorHint.foreground#45d0c0
  • editorHoverWidget.background#202838
  • editorHoverWidget.border#31445c
  • editorHoverWidget.foreground#c3cee5
  • editorIndentGuide.activeBackground1#79b3f7
  • editorIndentGuide.background1#2f3849
  • editorInfo.background#79b3f71a
  • editorInfo.foreground#79b3f7
  • editorInlayHint.background#202838
  • editorInlayHint.foreground#7f899f
  • editorInlayHint.parameterForeground#7f899f
  • editorInlayHint.typeForeground#7f899f
  • editorLineNumber.activeForeground#e7be62
  • editorLineNumber.foreground#7f899f
  • editorLink.activeForeground#79b3f7
  • editorOverviewRuler.addedForeground#89cc7b
  • editorOverviewRuler.bracketMatchForeground#7f899f
  • editorOverviewRuler.deletedForeground#fe736a
  • editorOverviewRuler.errorForeground#fe736a
  • editorOverviewRuler.findMatchForeground#e7be6299
  • editorOverviewRuler.infoForeground#79b3f7
  • editorOverviewRuler.modifiedForeground#79b3f7
  • editorOverviewRuler.warningForeground#e7be62
  • editorRuler.foreground#2f3849
  • editorSuggestWidget.background#202838
  • editorSuggestWidget.border#31445c
  • editorSuggestWidget.focusHighlightForeground#79b3f7
  • editorSuggestWidget.foreground#c3cee5
  • editorSuggestWidget.highlightForeground#79b3f7
  • editorSuggestWidget.selectedBackground#2f3849
  • editorWarning.background#e7be621a
  • editorWarning.foreground#e7be62
  • editorWhitespace.foreground#31445c
  • editorWidget.background#202838
  • editorWidget.border#31445c
  • editorWidget.foreground#c3cee5
  • focusBorder#79b3f7
  • foreground#9da8be
  • gitDecoration.addedResourceForeground#89cc7b
  • gitDecoration.conflictingResourceForeground#f68c36
  • gitDecoration.deletedResourceForeground#fe736a
  • gitDecoration.ignoredResourceForeground#7f899f
  • gitDecoration.modifiedResourceForeground#79b3f7
  • gitDecoration.stageModifiedResourceForeground#79b3f7
  • gitDecoration.submoduleResourceForeground#b19ee3
  • gitDecoration.untrackedResourceForeground#89cc7b
  • input.background#202838
  • input.border#31445c
  • input.foreground#c3cee5
  • input.placeholderForeground#7f899f
  • inputOption.activeBorder#79b3f7
  • inputOption.activeForeground#c3cee5
  • inputValidation.errorBackground#fe736a33
  • inputValidation.errorBorder#fe736a
  • inputValidation.infoBackground#79b3f733
  • inputValidation.infoBorder#79b3f7
  • inputValidation.warningBackground#e7be6233
  • inputValidation.warningBorder#e7be62
  • keybindingLabel.foreground#79b3f7
  • list.activeSelectionBackground#31445c
  • list.activeSelectionForeground#c3cee5
  • list.deemphasizedForeground#7f899f
  • list.errorForeground#fe736a
  • list.focusAndSelectionOutline#79b3f7
  • list.focusOutline#79b3f7
  • list.highlightForeground#f68c36
  • list.hoverBackground#2f3849
  • list.inactiveSelectionBackground#2f3849
  • list.warningForeground#e7be62
  • menu.background#202838
  • menu.border#31445c
  • menu.foreground#c3cee5
  • menu.selectionBackground#2f3849
  • menu.selectionForeground#c3cee5
  • menu.separatorBackground#31445c
  • menubar.selectionBackground#2f3849
  • merge.currentContentBackground#45d0c014
  • merge.currentHeaderBackground#45d0c033
  • merge.incomingContentBackground#79b3f714
  • merge.incomingHeaderBackground#79b3f733
  • minimap.errorHighlight#fe736a
  • minimap.findMatchHighlight#e7be62
  • minimap.warningHighlight#e7be62
  • minimapGutter.addedBackground#89cc7b
  • minimapGutter.deletedBackground#fe736a
  • minimapGutter.modifiedBackground#79b3f7
  • notebook.focusedCellBorder#79b3f7
  • notificationCenterHeader.background#2f3849
  • notificationLink.foreground#79b3f7
  • notifications.background#202838
  • notifications.border#31445c
  • notifications.foreground#c3cee5
  • notificationsErrorIcon.foreground#fe736a
  • notificationsInfoIcon.foreground#79b3f7
  • notificationsWarningIcon.foreground#e7be62
  • panel.background#202838
  • panel.border#31445c
  • panelSectionHeader.background#202838
  • panelTitle.activeBorder#79b3f7
  • peekView.border#79b3f7
  • peekViewEditor.background#202838
  • peekViewEditor.matchHighlightBackground#e7be6233
  • peekViewResult.background#202838
  • peekViewResult.fileForeground#9da8be
  • peekViewResult.lineForeground#7f899f
  • peekViewResult.matchHighlightBackground#e7be6233
  • peekViewResult.selectionBackground#2f3849
  • peekViewTitle.background#202838
  • peekViewTitleDescription.foreground#7f899f
  • peekViewTitleLabel.foreground#c3cee5
  • pickerGroup.foreground#79b3f7
  • problemsErrorIcon.foreground#fe736a
  • problemsInfoIcon.foreground#79b3f7
  • problemsWarningIcon.foreground#e7be62
  • progressBar.background#79b3f7
  • quickInput.background#202838
  • quickInput.foreground#c3cee5
  • quickInputList.focusBackground#2f3849
  • quickInputList.focusForeground#c3cee5
  • sash.hoverBorder#79b3f7
  • scrollbarSlider.activeBackground#31445ccc
  • scrollbarSlider.background#31445c80
  • scrollbarSlider.hoverBackground#31445caa
  • selection.background#31445c
  • sideBar.background#202838
  • sideBar.border#31445c
  • sideBar.foreground#9da8be
  • sideBarSectionHeader.background#202838
  • sideBarSectionHeader.border#31445c
  • sideBarSectionHeader.foreground#9da8be
  • sideBarTitle.foreground#c3cee5
  • statusBar.background#202838
  • statusBar.border#31445c
  • statusBar.debuggingBackground#f68c36
  • statusBar.foreground#9da8be
  • statusBar.noFolderBackground#202838
  • statusBarItem.hoverBackground#2f3849
  • statusBarItem.remoteBackground#79b3f7
  • statusBarItem.remoteForeground#262e3e
  • tab.activeBackground#262e3e
  • tab.activeBorder#79b3f7
  • tab.activeBorderTop#79b3f7
  • tab.activeForeground#c3cee5
  • tab.border#202838
  • tab.inactiveBackground#202838
  • tab.inactiveForeground#7f899f
  • terminal.ansiBlack#2f3849
  • terminal.ansiBlue#79b3f7
  • terminal.ansiBrightBlack#31445c
  • terminal.ansiBrightBlue#79b3f7
  • terminal.ansiBrightCyan#44d6f1
  • terminal.ansiBrightGreen#89cc7b
  • terminal.ansiBrightMagenta#ee94db
  • terminal.ansiBrightRed#fe736a
  • terminal.ansiBrightWhite#c3cee5
  • terminal.ansiBrightYellow#e7be62
  • terminal.ansiCyan#44d6f1
  • terminal.ansiGreen#89cc7b
  • terminal.ansiMagenta#ee94db
  • terminal.ansiRed#fe736a
  • terminal.ansiWhite#9da8be
  • terminal.ansiYellow#e7be62
  • terminal.background#262e3e
  • terminal.foreground#c3cee5
  • terminal.selectionBackground#31445c
  • terminalCursor.background#262e3e
  • terminalCursor.foreground#79b3f7
  • testing.iconFailed#fe736a
  • testing.iconPassed#89cc7b
  • testing.iconQueued#e7be62
  • textLink.activeForeground#8cbaf3
  • textLink.foreground#79b3f7
  • titleBar.activeBackground#202838
  • titleBar.activeForeground#c3cee5
  • titleBar.border#31445c
  • titleBar.inactiveBackground#202838
  • titleBar.inactiveForeground#7f899f
  • tree.indentGuidesStroke#31445c
  • widget.border#31445c
  • 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#fe736abold
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#9dd0e9italic
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#fe736a
comment, punctuation.definition.comment#7f899fitalic
punctuation, meta.brace#adbee0
entity.name.tag#fe736a
support.class.component, entity.name.tag.namespace#f68c36
entity.other.attribute-name#6bcfcb
punctuation.definition.tag#9da8be
markup.inserted, markup.inserted punctuation.definition.inserted#89cc7b
markup.changed, markup.changed punctuation.definition.changed#79b3f7
markup.deleted, markup.deleted punctuation.definition.deleted#fe736a
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#99c1f4bold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#82c8eabold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#77ced8bold
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#7dd0c0bold
markup.bold#c3cee5bold
markup.italic#c3cee5italic
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#7f899fitalic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#f68c36
meta.separator.markdown, entity.other.document.begin.yaml#adbee0
markup.strikethrough#7f899fstrikethrough
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#fe736abold
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#fe736a
keyword.control.anchor.regexp#fe736a
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#b19ee3
variable.other.jsdoc#c3cee5italic
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#fe736abold
keyword.control.type, storage.type.type#f68c36italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#bfacfebold
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