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#f0f2f4
  • activityBar.foreground#252e40
  • activityBarBadge.background#33659d
  • activityBarBadge.foreground#f9fafc
  • badge.background#33659d
  • badge.foreground#f9fafc
  • breadcrumb.activeSelectionForeground#33659d
  • breadcrumb.background#f9fafc
  • breadcrumb.focusForeground#252e40
  • breadcrumb.foreground#656f84
  • breadcrumbPicker.background#f0f2f4
  • button.background#33659d
  • button.foreground#f9fafc
  • button.hoverBackground#305b8c
  • checkbox.background#ebedef
  • checkbox.border#dee0e3
  • debugConsole.errorForeground#be2327
  • debugConsole.infoForeground#33659d
  • debugConsole.warningForeground#8e6c02
  • debugIcon.breakpointForeground#be2327
  • diffEditor.insertedLineBackground#3e723214
  • diffEditor.insertedTextBackground#3e723226
  • diffEditor.removedLineBackground#be232714
  • diffEditor.removedTextBackground#be232726
  • dropdown.background#f0f2f4
  • dropdown.border#dee0e3
  • dropdown.foreground#252e40
  • dropdown.listBackground#f0f2f4
  • editor.background#f9fafc
  • editor.findMatchBackground#dee0e3
  • editor.findMatchHighlightBackground#ebedef
  • editor.foreground#252e40
  • editor.lineHighlightBackground#ebedef
  • editor.selectionBackground#dee0e3
  • editorBracketHighlight.foreground1#8e6c02
  • editorBracketHighlight.foreground2#695890
  • editorBracketHighlight.foreground3#33659d
  • editorBracketHighlight.foreground4#3e7232
  • editorBracketHighlight.foreground5#974c00
  • editorBracketHighlight.foreground6#027369
  • editorBracketHighlight.unexpectedBracket.foreground#be2327
  • editorCursor.background#f9fafc
  • editorCursor.foreground#33659d
  • editorError.background#be23271a
  • editorError.foreground#be2327
  • editorGroup.border#dee0e3
  • editorGroupHeader.tabsBackground#f0f2f4
  • editorGroupHeader.tabsBorder#dee0e3
  • editorGutter.addedBackground#3e7232
  • editorGutter.background#f9fafc
  • editorGutter.deletedBackground#be2327
  • editorGutter.foldingControlForeground#656f84
  • editorGutter.modifiedBackground#33659d
  • editorHint.foreground#027369
  • editorHoverWidget.background#f0f2f4
  • editorHoverWidget.border#dee0e3
  • editorHoverWidget.foreground#252e40
  • editorIndentGuide.activeBackground1#33659d
  • editorIndentGuide.background1#ebedef
  • editorInfo.background#33659d1a
  • editorInfo.foreground#33659d
  • editorInlayHint.background#f0f2f4
  • editorInlayHint.foreground#656f84
  • editorInlayHint.parameterForeground#656f84
  • editorInlayHint.typeForeground#656f84
  • editorLineNumber.activeForeground#8e6c02
  • editorLineNumber.foreground#656f84
  • editorLink.activeForeground#33659d
  • editorOverviewRuler.addedForeground#3e7232
  • editorOverviewRuler.bracketMatchForeground#656f84
  • editorOverviewRuler.deletedForeground#be2327
  • editorOverviewRuler.errorForeground#be2327
  • editorOverviewRuler.findMatchForeground#8e6c0299
  • editorOverviewRuler.infoForeground#33659d
  • editorOverviewRuler.modifiedForeground#33659d
  • editorOverviewRuler.warningForeground#8e6c02
  • editorRuler.foreground#ebedef
  • editorSuggestWidget.background#f0f2f4
  • editorSuggestWidget.border#dee0e3
  • editorSuggestWidget.focusHighlightForeground#33659d
  • editorSuggestWidget.foreground#252e40
  • editorSuggestWidget.highlightForeground#33659d
  • editorSuggestWidget.selectedBackground#ebedef
  • editorWarning.background#8e6c021a
  • editorWarning.foreground#8e6c02
  • editorWhitespace.foreground#dee0e3
  • editorWidget.background#f0f2f4
  • editorWidget.border#dee0e3
  • editorWidget.foreground#252e40
  • focusBorder#33659d
  • foreground#444d61
  • gitDecoration.addedResourceForeground#3e7232
  • gitDecoration.conflictingResourceForeground#974c00
  • gitDecoration.deletedResourceForeground#be2327
  • gitDecoration.ignoredResourceForeground#656f84
  • gitDecoration.modifiedResourceForeground#33659d
  • gitDecoration.stageModifiedResourceForeground#33659d
  • gitDecoration.submoduleResourceForeground#695890
  • gitDecoration.untrackedResourceForeground#3e7232
  • input.background#f0f2f4
  • input.border#dee0e3
  • input.foreground#252e40
  • input.placeholderForeground#656f84
  • inputOption.activeBorder#33659d
  • inputOption.activeForeground#252e40
  • inputValidation.errorBackground#be232733
  • inputValidation.errorBorder#be2327
  • inputValidation.infoBackground#33659d33
  • inputValidation.infoBorder#33659d
  • inputValidation.warningBackground#8e6c0233
  • inputValidation.warningBorder#8e6c02
  • keybindingLabel.foreground#33659d
  • list.activeSelectionBackground#dee0e3
  • list.activeSelectionForeground#252e40
  • list.deemphasizedForeground#656f84
  • list.errorForeground#be2327
  • list.focusAndSelectionOutline#33659d
  • list.focusOutline#33659d
  • list.highlightForeground#974c00
  • list.hoverBackground#ebedef
  • list.inactiveSelectionBackground#ebedef
  • list.warningForeground#8e6c02
  • menu.background#f0f2f4
  • menu.border#dee0e3
  • menu.foreground#252e40
  • menu.selectionBackground#ebedef
  • menu.selectionForeground#252e40
  • menu.separatorBackground#dee0e3
  • menubar.selectionBackground#ebedef
  • merge.currentContentBackground#02736914
  • merge.currentHeaderBackground#02736933
  • merge.incomingContentBackground#33659d14
  • merge.incomingHeaderBackground#33659d33
  • minimap.errorHighlight#be2327
  • minimap.findMatchHighlight#8e6c02
  • minimap.warningHighlight#8e6c02
  • minimapGutter.addedBackground#3e7232
  • minimapGutter.deletedBackground#be2327
  • minimapGutter.modifiedBackground#33659d
  • notebook.focusedCellBorder#33659d
  • notificationCenterHeader.background#ebedef
  • notificationLink.foreground#33659d
  • notifications.background#f0f2f4
  • notifications.border#dee0e3
  • notifications.foreground#252e40
  • notificationsErrorIcon.foreground#be2327
  • notificationsInfoIcon.foreground#33659d
  • notificationsWarningIcon.foreground#8e6c02
  • panel.background#f0f2f4
  • panel.border#dee0e3
  • panelSectionHeader.background#f0f2f4
  • panelTitle.activeBorder#33659d
  • peekView.border#33659d
  • peekViewEditor.background#f0f2f4
  • peekViewEditor.matchHighlightBackground#8e6c0233
  • peekViewResult.background#f0f2f4
  • peekViewResult.fileForeground#444d61
  • peekViewResult.lineForeground#656f84
  • peekViewResult.matchHighlightBackground#8e6c0233
  • peekViewResult.selectionBackground#ebedef
  • peekViewTitle.background#f0f2f4
  • peekViewTitleDescription.foreground#656f84
  • peekViewTitleLabel.foreground#252e40
  • pickerGroup.foreground#33659d
  • problemsErrorIcon.foreground#be2327
  • problemsInfoIcon.foreground#33659d
  • problemsWarningIcon.foreground#8e6c02
  • progressBar.background#33659d
  • quickInput.background#f0f2f4
  • quickInput.foreground#252e40
  • quickInputList.focusBackground#ebedef
  • quickInputList.focusForeground#252e40
  • sash.hoverBorder#33659d
  • scrollbarSlider.activeBackground#dee0e3cc
  • scrollbarSlider.background#dee0e380
  • scrollbarSlider.hoverBackground#dee0e3aa
  • selection.background#dee0e3
  • sideBar.background#f0f2f4
  • sideBar.border#dee0e3
  • sideBar.foreground#444d61
  • sideBarSectionHeader.background#f0f2f4
  • sideBarSectionHeader.border#dee0e3
  • sideBarSectionHeader.foreground#444d61
  • sideBarTitle.foreground#252e40
  • statusBar.background#f0f2f4
  • statusBar.border#dee0e3
  • statusBar.debuggingBackground#974c00
  • statusBar.foreground#444d61
  • statusBar.noFolderBackground#f0f2f4
  • statusBarItem.hoverBackground#ebedef
  • statusBarItem.remoteBackground#33659d
  • statusBarItem.remoteForeground#f9fafc
  • tab.activeBackground#f9fafc
  • tab.activeBorder#33659d
  • tab.activeBorderTop#33659d
  • tab.activeForeground#252e40
  • tab.border#f0f2f4
  • tab.inactiveBackground#f0f2f4
  • tab.inactiveForeground#656f84
  • terminal.ansiBlack#ebedef
  • terminal.ansiBlue#33659d
  • terminal.ansiBrightBlack#dee0e3
  • terminal.ansiBrightBlue#33659d
  • terminal.ansiBrightCyan#097687
  • terminal.ansiBrightGreen#3e7232
  • terminal.ansiBrightMagenta#954886
  • terminal.ansiBrightRed#be2327
  • terminal.ansiBrightWhite#252e40
  • terminal.ansiBrightYellow#8e6c02
  • terminal.ansiCyan#097687
  • terminal.ansiGreen#3e7232
  • terminal.ansiMagenta#954886
  • terminal.ansiRed#be2327
  • terminal.ansiWhite#444d61
  • terminal.ansiYellow#8e6c02
  • terminal.background#f9fafc
  • terminal.foreground#252e40
  • terminal.selectionBackground#dee0e3
  • terminalCursor.background#f9fafc
  • terminalCursor.foreground#33659d
  • testing.iconFailed#be2327
  • testing.iconPassed#3e7232
  • testing.iconQueued#8e6c02
  • textLink.activeForeground#305786
  • textLink.foreground#33659d
  • titleBar.activeBackground#f0f2f4
  • titleBar.activeForeground#252e40
  • titleBar.border#dee0e3
  • titleBar.inactiveBackground#f0f2f4
  • titleBar.inactiveForeground#656f84
  • tree.indentGuidesStroke#dee0e3
  • widget.border#dee0e3
  • 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#be2327bold
keyword.operator#097687
entity.name.function#8e6c02bold
meta.function-call, support.function, meta.function-call entity.name.function#8e6c02
entity.name.function.constructor, entity.name.type.constructor#a75b14bold
entity.name.type, support.type, entity.name.class, support.class#974c00bold
variable.language, support.type.builtin, constant.language#a75b14italic
variable.parameter#1d4455italic
string, string.quoted, string.template#15733c
constant.character.escape#097687
constant.numeric#33659d
constant.language.boolean#695890
constant.other#695890
variable.other.constant#213d72
variable.other.property, support.variable.property, meta.object-literal.key#027369
variable, variable.other.readwrite#312d50
meta.preprocessor#be2327
comment, punctuation.definition.comment#656f84italic
punctuation, meta.brace#5d5f62
entity.name.tag#be2327
support.class.component, entity.name.tag.namespace#974c00
entity.other.attribute-name#0d5e5d
punctuation.definition.tag#444d61
markup.inserted, markup.inserted punctuation.definition.inserted#3e7232
markup.changed, markup.changed punctuation.definition.changed#33659d
markup.deleted, markup.deleted punctuation.definition.deleted#be2327
heading.1.markdown, heading.1.markdown punctuation.definition.heading, markup.heading.setext.1.markdown#2769b7bold
heading.2.markdown, heading.2.markdown punctuation.definition.heading, markup.heading.setext.2.markdown#007399bold
heading.3.markdown, heading.3.markdown punctuation.definition.heading#047781bold
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#0b7a6bbold
markup.bold#252e40bold
markup.italic#252e40italic
markup.inline.raw, markup.raw.inline, fenced_code.block.language, entity.name.language.markdown#027369
markup.underline.link, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#097687underline
markup.quote#656f84italic
punctuation.definition.list.begin.markdown, markup.list.numbered.bullet#974c00
meta.separator.markdown, entity.other.document.begin.yaml#5d5f62
markup.strikethrough#656f84strikethrough
support.type.property-name, support.type.property-name punctuation, entity.name.tag.yaml#027369
variable.other.anchor.yaml, entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#695890
keyword.other.unit#974c00
constant.other.color#695890
keyword.other.important#be2327bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8e6c02
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#097687
constant.other.character-class.regexp, constant.other.character-class.set.regexp#974c00
keyword.operator.quantifier.regexp#be2327
keyword.control.anchor.regexp#be2327
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#695890
variable.other.jsdoc#252e40italic
meta.diff.header, meta.diff.range, punctuation.definition.range.diff, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#33659d
punctuation.definition.string#15733c
keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.logical.python#be2327bold
keyword.control.type, storage.type.type#974c00italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#6031b1bold
storage.modifier.attribute#a75b14
storage.modifier.pointer, storage.modifier.reference, storage.modifier.array.bracket.square#097687bold
storage.modifier, storage.type.ts, storage.type.tsx, storage.type.js, storage.type.function.async#045cb2italic