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#1e2034
  • activityBar.foreground#ccd8ef
  • activityBarBadge.background#58c4fd
  • activityBarBadge.foreground#24263a
  • badge.background#58c4fd
  • badge.foreground#24263a
  • breadcrumb.activeSelectionForeground#58c4fd
  • breadcrumb.background#24263a
  • breadcrumb.focusForeground#ccd8ef
  • breadcrumb.foreground#828ca2
  • breadcrumbPicker.background#1e2034
  • button.background#58c4fd
  • button.foreground#24263a
  • button.hoverBackground#6dc8fa
  • checkbox.background#2e3045
  • checkbox.border#193e51
  • 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#1e2034
  • dropdown.border#193e51
  • dropdown.foreground#ccd8ef
  • dropdown.listBackground#1e2034
  • editor.background#24263a
  • editor.findMatchBackground#193e51
  • editor.findMatchHighlightBackground#2e3045
  • editor.foreground#ccd8ef
  • editor.lineHighlightBackground#2e3045
  • editor.selectionBackground#193e51
  • editorBracketHighlight.foreground1#e7be62
  • editorBracketHighlight.foreground2#b19ee3
  • editorBracketHighlight.foreground3#79b3f7
  • editorBracketHighlight.foreground4#89cc7b
  • editorBracketHighlight.foreground5#f68c36
  • editorBracketHighlight.foreground6#45d0c0
  • editorBracketHighlight.unexpectedBracket.foreground#f4514c
  • editorBracketMatch.border#58c4fd
  • editorCursor.background#24263a
  • editorCursor.foreground#58c4fd
  • editorError.background#f4514c1a
  • editorError.foreground#f4514c
  • editorGroup.border#193e51
  • editorGroupHeader.tabsBackground#1e2034
  • editorGroupHeader.tabsBorder#193e51
  • editorGutter.addedBackground#89cc7b
  • editorGutter.background#24263a
  • editorGutter.deletedBackground#f4514c
  • editorGutter.foldingControlForeground#828ca2
  • editorGutter.modifiedBackground#79b3f7
  • editorHint.foreground#45d0c0
  • editorHoverWidget.background#1e2034
  • editorHoverWidget.border#193e51
  • editorHoverWidget.foreground#ccd8ef
  • editorIndentGuide.activeBackground1#58c4fd
  • editorIndentGuide.background1#2e3045
  • editorInfo.background#79b3f71a
  • editorInfo.foreground#79b3f7
  • editorInlayHint.background#1e2034
  • editorInlayHint.foreground#828ca2
  • editorInlayHint.parameterForeground#828ca2
  • editorInlayHint.typeForeground#828ca2
  • editorLineNumber.activeForeground#58c4fd
  • editorLineNumber.foreground#828ca2
  • editorLink.activeForeground#58c4fd
  • editorOverviewRuler.addedForeground#89cc7b
  • editorOverviewRuler.bracketMatchForeground#828ca2
  • editorOverviewRuler.deletedForeground#f4514c
  • editorOverviewRuler.errorForeground#f4514c
  • editorOverviewRuler.findMatchForeground#e7be6299
  • editorOverviewRuler.infoForeground#79b3f7
  • editorOverviewRuler.modifiedForeground#79b3f7
  • editorOverviewRuler.warningForeground#e7be62
  • editorRuler.foreground#2e3045
  • editorSuggestWidget.background#1e2034
  • editorSuggestWidget.border#193e51
  • editorSuggestWidget.focusHighlightForeground#58c4fd
  • editorSuggestWidget.foreground#ccd8ef
  • editorSuggestWidget.highlightForeground#58c4fd
  • editorSuggestWidget.selectedBackground#2e3045
  • editorWarning.background#e7be621a
  • editorWarning.foreground#e7be62
  • editorWhitespace.foreground#193e51
  • editorWidget.background#1e2034
  • editorWidget.border#193e51
  • editorWidget.foreground#ccd8ef
  • focusBorder#58c4fd
  • foreground#a6b1c8
  • gitDecoration.addedResourceForeground#89cc7b
  • gitDecoration.conflictingResourceForeground#f68c36
  • gitDecoration.deletedResourceForeground#f4514c
  • gitDecoration.ignoredResourceForeground#828ca2
  • gitDecoration.modifiedResourceForeground#79b3f7
  • gitDecoration.stageModifiedResourceForeground#79b3f7
  • gitDecoration.submoduleResourceForeground#b19ee3
  • gitDecoration.untrackedResourceForeground#89cc7b
  • input.background#1e2034
  • input.border#193e51
  • input.foreground#ccd8ef
  • input.placeholderForeground#828ca2
  • inputOption.activeBorder#58c4fd
  • inputOption.activeForeground#ccd8ef
  • inputValidation.errorBackground#f4514c33
  • inputValidation.errorBorder#f4514c
  • inputValidation.infoBackground#79b3f733
  • inputValidation.infoBorder#79b3f7
  • inputValidation.warningBackground#e7be6233
  • inputValidation.warningBorder#e7be62
  • keybindingLabel.foreground#58c4fd
  • list.activeSelectionBackground#193e51
  • list.activeSelectionForeground#ccd8ef
  • list.deemphasizedForeground#828ca2
  • list.errorForeground#f4514c
  • list.focusAndSelectionOutline#58c4fd
  • list.focusOutline#58c4fd
  • list.highlightForeground#58c4fd
  • list.hoverBackground#2e3045
  • list.inactiveSelectionBackground#2e3045
  • list.warningForeground#e7be62
  • menu.background#1e2034
  • menu.border#193e51
  • menu.foreground#ccd8ef
  • menu.selectionBackground#2e3045
  • menu.selectionForeground#ccd8ef
  • menu.separatorBackground#193e51
  • menubar.selectionBackground#2e3045
  • 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#58c4fd
  • notificationCenterHeader.background#2e3045
  • notificationLink.foreground#58c4fd
  • notifications.background#1e2034
  • notifications.border#193e51
  • notifications.foreground#ccd8ef
  • notificationsErrorIcon.foreground#f4514c
  • notificationsInfoIcon.foreground#79b3f7
  • notificationsWarningIcon.foreground#e7be62
  • panel.background#1e2034
  • panel.border#193e51
  • panelSectionHeader.background#1e2034
  • panelTitle.activeBorder#58c4fd
  • peekView.border#58c4fd
  • peekViewEditor.background#1e2034
  • peekViewEditor.matchHighlightBackground#e7be6233
  • peekViewResult.background#1e2034
  • peekViewResult.fileForeground#a6b1c8
  • peekViewResult.lineForeground#828ca2
  • peekViewResult.matchHighlightBackground#e7be6233
  • peekViewResult.selectionBackground#2e3045
  • peekViewTitle.background#1e2034
  • peekViewTitleDescription.foreground#828ca2
  • peekViewTitleLabel.foreground#ccd8ef
  • pickerGroup.foreground#58c4fd
  • problemsErrorIcon.foreground#f4514c
  • problemsInfoIcon.foreground#79b3f7
  • problemsWarningIcon.foreground#e7be62
  • progressBar.background#58c4fd
  • quickInput.background#1e2034
  • quickInput.foreground#ccd8ef
  • quickInputList.focusBackground#2e3045
  • quickInputList.focusForeground#ccd8ef
  • sash.hoverBorder#58c4fd
  • scrollbarSlider.activeBackground#193e51cc
  • scrollbarSlider.background#193e5180
  • scrollbarSlider.hoverBackground#193e51aa
  • selection.background#193e51
  • sideBar.background#1e2034
  • sideBar.border#193e51
  • sideBar.foreground#a6b1c8
  • sideBarSectionHeader.background#1e2034
  • sideBarSectionHeader.border#193e51
  • sideBarSectionHeader.foreground#a6b1c8
  • sideBarTitle.foreground#ccd8ef
  • statusBar.background#1e2034
  • statusBar.border#193e51
  • statusBar.debuggingBackground#f68c36
  • statusBar.foreground#a6b1c8
  • statusBar.noFolderBackground#1e2034
  • statusBarItem.hoverBackground#2e3045
  • statusBarItem.remoteBackground#58c4fd
  • statusBarItem.remoteForeground#24263a
  • tab.activeBackground#24263a
  • tab.activeBorder#58c4fd
  • tab.activeBorderTop#58c4fd
  • tab.activeForeground#ccd8ef
  • tab.border#1e2034
  • tab.inactiveBackground#1e2034
  • tab.inactiveForeground#828ca2
  • terminal.ansiBlack#2e3045
  • terminal.ansiBlue#79b3f7
  • terminal.ansiBrightBlack#193e51
  • terminal.ansiBrightBlue#79b3f7
  • terminal.ansiBrightCyan#44d6f1
  • terminal.ansiBrightGreen#89cc7b
  • terminal.ansiBrightMagenta#ee94db
  • terminal.ansiBrightRed#f4514c
  • terminal.ansiBrightWhite#ccd8ef
  • terminal.ansiBrightYellow#e7be62
  • terminal.ansiCyan#44d6f1
  • terminal.ansiGreen#89cc7b
  • terminal.ansiMagenta#ee94db
  • terminal.ansiRed#f4514c
  • terminal.ansiWhite#a6b1c8
  • terminal.ansiYellow#e7be62
  • terminal.background#24263a
  • terminal.foreground#ccd8ef
  • terminal.selectionBackground#193e51
  • terminalCursor.background#24263a
  • terminalCursor.foreground#58c4fd
  • testing.iconFailed#f4514c
  • testing.iconPassed#89cc7b
  • testing.iconQueued#e7be62
  • textLink.activeForeground#75c9fa
  • textLink.foreground#58c4fd
  • titleBar.activeBackground#1e2034
  • titleBar.activeForeground#ccd8ef
  • titleBar.border#193e51
  • titleBar.inactiveBackground#1e2034
  • titleBar.inactiveForeground#828ca2
  • tree.indentGuidesStroke#193e51
  • widget.border#193e51
  • 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#a3d7f0italic
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#828ca2italic
punctuation, meta.brace#aeaed7
entity.name.tag#f4514c
support.class.component, entity.name.tag.namespace#f68c36
entity.other.attribute-name#6ed2ce
punctuation.definition.tag#a6b1c8
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#61c3f9bold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#3ecce2bold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#44d0c1bold
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#6bcf9dbold
markup.bold#ccd8efbold
markup.italic#ccd8efitalic
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#828ca2italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#f68c36
meta.separator.markdown, entity.other.document.begin.yaml#aeaed7
markup.strikethrough#828ca2strikethrough
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#ccd8efitalic
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#4eaeffbold
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