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.activeBorder#f0c060
  • activityBar.background#241c1a
  • activityBar.border#4a3830
  • activityBar.foreground#c8b8ac
  • activityBar.inactiveForeground#6b5e56
  • activityBarBadge.background#7ec8e3
  • activityBarBadge.foreground#1a2830
  • badge.background#7ec8e3
  • badge.foreground#1a2830
  • breadcrumb.activeSelectionForeground#ede0cf
  • breadcrumb.background#2e2420
  • breadcrumb.foreground#8a7b70
  • breadcrumbPicker.background#3d302a
  • button.background#7ec8e3
  • button.foreground#1a2830
  • button.hoverBackground#a0d8ee
  • button.secondaryBackground#5a4438
  • button.secondaryForeground#ede0cf
  • debugConsole.errorForeground#f08080
  • debugConsole.infoForeground#7ec8e3
  • debugConsole.sourceForeground#c9a0dc
  • debugConsole.warningForeground#f0c060
  • debugToolBar.background#3d302a
  • dropdown.background#3d302a
  • dropdown.border#5a4438
  • dropdown.foreground#ede0cf
  • editor.background#2e2420
  • editor.findMatchBackground#f0c06050
  • editor.findMatchHighlightBackground#f0c06028
  • editor.foreground#ede0cf
  • editor.inactiveSelectionBackground#5a4a4245
  • editor.lineHighlightBackground#3a2e28
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#5a4a4280
  • editor.selectionHighlightBackground#5a4a4255
  • editor.wordHighlightBackground#7ec8e322
  • editor.wordHighlightStrongBackground#7ec8e340
  • editorBracketHighlight.foreground1#7ec8e3
  • editorBracketHighlight.foreground2#f0c060
  • editorBracketHighlight.foreground3#82cfaa
  • editorBracketHighlight.foreground4#c9a0dc
  • editorBracketHighlight.foreground5#f08080
  • editorBracketHighlight.foreground6#e8a87c
  • editorBracketHighlight.unexpectedBracket.foreground#f08080
  • editorBracketMatch.background#7ec8e322
  • editorBracketMatch.border#7ec8e3
  • editorCursor.background#2e2420
  • editorCursor.foreground#f0c060
  • editorError.foreground#f08080
  • editorGhostText.foreground#6b5e5680
  • editorGroupHeader.tabsBackground#3d302a
  • editorGroupHeader.tabsBorder#4a3830
  • editorGutter.addedBackground#82cfaa
  • editorGutter.background#2e2420
  • editorGutter.deletedBackground#f08080
  • editorGutter.modifiedBackground#f0c060
  • editorHint.foreground#82cfaa
  • editorHoverWidget.background#3d302a
  • editorHoverWidget.border#5a4438
  • editorIndentGuide.activeBackground1#6b5040
  • editorIndentGuide.background1#4a3830
  • editorInfo.foreground#7ec8e3
  • editorInlayHint.background#3d302a80
  • editorInlayHint.foreground#8a7b70
  • editorInlayHint.parameterBackground#3d302a80
  • editorInlayHint.parameterForeground#e8a87c
  • editorInlayHint.typeBackground#3d302a80
  • editorInlayHint.typeForeground#82cfaa
  • editorLineNumber.activeForeground#a08f82
  • editorLineNumber.foreground#6b5e56
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#f08080
  • editorOverviewRuler.findMatchForeground#f0c06090
  • editorOverviewRuler.warningForeground#f0c060
  • editorSuggestWidget.background#3d302a
  • editorSuggestWidget.border#5a4438
  • editorSuggestWidget.foreground#ede0cf
  • editorSuggestWidget.highlightForeground#f0c060
  • editorSuggestWidget.selectedBackground#5a4438
  • editorWarning.foreground#f0c060
  • editorWidget.background#3d302a
  • editorWidget.border#5a4438
  • focusBorder#7ec8e380
  • gitDecoration.addedResourceForeground#82cfaa
  • gitDecoration.conflictingResourceForeground#c9a0dc
  • gitDecoration.deletedResourceForeground#f08080
  • gitDecoration.ignoredResourceForeground#6b5e56
  • gitDecoration.modifiedResourceForeground#f0c060
  • gitDecoration.untrackedResourceForeground#82cfaa
  • input.background#3d302a
  • input.border#5a4438
  • input.foreground#ede0cf
  • input.placeholderForeground#6b5e56
  • inputValidation.errorBackground#3d302a
  • inputValidation.errorBorder#f08080
  • inputValidation.warningBackground#3d302a
  • inputValidation.warningBorder#f0c060
  • list.activeSelectionBackground#5a4438
  • list.activeSelectionForeground#ede0cf
  • list.errorForeground#f08080
  • list.focusForeground#ede0cf
  • list.highlightForeground#f0c060
  • list.hoverBackground#4a383040
  • list.hoverForeground#ede0cf
  • list.inactiveSelectionBackground#4a3830
  • list.inactiveSelectionForeground#c8b8ac
  • list.warningForeground#f0c060
  • menu.background#3d302a
  • menu.border#5a4438
  • menu.foreground#ede0cf
  • menu.selectionBackground#5a4438
  • menu.selectionForeground#ede0cf
  • menu.separatorBackground#4a3830
  • menubar.selectionBackground#4a3830
  • menubar.selectionForeground#ede0cf
  • minimap.background#2e2420
  • minimap.findMatchHighlight#f0c06060
  • minimap.selectionHighlight#5a4a4280
  • minimapSlider.activeBackground#5a443860
  • minimapSlider.background#5a443820
  • minimapSlider.hoverBackground#5a443840
  • notificationLink.foreground#7ec8e3
  • notifications.background#3d302a
  • notifications.border#5a4438
  • notifications.foreground#ede0cf
  • panel.background#382c28
  • panel.border#4a3830
  • panelTitle.activeBorder#f0c060
  • panelTitle.activeForeground#ede0cf
  • panelTitle.inactiveForeground#6b5e56
  • peekView.border#7ec8e3
  • peekViewEditor.background#2e2420
  • peekViewEditor.matchHighlightBackground#f0c06040
  • peekViewResult.background#3d302a
  • peekViewResult.fileForeground#ede0cf
  • peekViewResult.lineForeground#c8b8ac
  • peekViewResult.matchHighlightBackground#f0c06040
  • peekViewTitle.background#3d302a
  • peekViewTitleDescription.foreground#a08f82
  • peekViewTitleLabel.foreground#ede0cf
  • progressBar.background#7ec8e3
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#5a4438a0
  • scrollbarSlider.background#5a443830
  • scrollbarSlider.hoverBackground#5a443860
  • selection.background#5a4a4280
  • sideBar.background#382c28
  • sideBar.border#4a3830
  • sideBar.foreground#c8b8ac
  • sideBarSectionHeader.background#3d302a
  • sideBarSectionHeader.border#4a3830
  • sideBarSectionHeader.foreground#a08f82
  • sideBarTitle.foreground#a08f82
  • statusBar.background#241c1a
  • statusBar.border#4a3830
  • statusBar.debuggingBackground#4a2010
  • statusBar.debuggingForeground#f0c060
  • statusBar.foreground#a08f82
  • statusBar.noFolderBackground#241c1a
  • statusBarItem.errorBackground#f08080
  • statusBarItem.errorForeground#241c1a
  • statusBarItem.hoverBackground#38302a
  • statusBarItem.remoteBackground#7ec8e3
  • statusBarItem.remoteForeground#1a2830
  • tab.activeBackground#2e2420
  • tab.activeBorder#f0c060
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ede0cf
  • tab.border#4a3830
  • tab.hoverBackground#4a3830
  • tab.inactiveBackground#3d302a
  • tab.inactiveForeground#8a7b70
  • terminal.ansiBlack#2e2420
  • terminal.ansiBlue#7ec8e3
  • terminal.ansiBrightBlack#7a6e68
  • terminal.ansiBrightBlue#a0d8ee
  • terminal.ansiBrightCyan#80e8d0
  • terminal.ansiBrightGreen#a0dfbc
  • terminal.ansiBrightMagenta#d8b8ec
  • terminal.ansiBrightRed#f5a0a0
  • terminal.ansiBrightWhite#f5ede0
  • terminal.ansiBrightYellow#f5d080
  • terminal.ansiCyan#5fd7c0
  • terminal.ansiGreen#82cfaa
  • terminal.ansiMagenta#c9a0dc
  • terminal.ansiRed#f08080
  • terminal.ansiWhite#ede0cf
  • terminal.ansiYellow#f0c060
  • terminal.background#2e2420
  • terminal.foreground#ede0cf
  • terminal.selectionBackground#5a4a4260
  • textBlockQuote.background#3d302a
  • textBlockQuote.border#7ec8e3
  • textCodeBlock.background#3d302a
  • textLink.activeForeground#a0d8ee
  • textLink.foreground#7ec8e3
  • titleBar.activeBackground#241c1a
  • titleBar.activeForeground#c8b8ac
  • titleBar.border#4a3830
  • titleBar.inactiveBackground#2e2420
  • titleBar.inactiveForeground#6b5e56
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6e68italic
string, punctuation.definition.string, string.template#e8a87c
string.template punctuation.definition.template-expression#c9a0dc
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in#7ec8e3
storage.type, storage.modifier, keyword.declaration, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#7ec8e3italic
entity.name.function, support.function, meta.function-call entity.name.function, variable.function#f0c060
variable.parameter, meta.parameter#e8a87citalic
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#82cfaa
meta.type.annotation, meta.type.parameters, support.type.primitive, storage.type.generic#82cfaaitalic
entity.name.type.interface#82cfaaitalic
constant.numeric, constant.numeric.integer, constant.numeric.float#c9a0dc
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan#c9a0dcitalic
constant.language, variable.other.constant#c9a0dc
variable.other.property, support.type.property-name, meta.object-literal.key#f0c060
meta.object-literal.key string#f0c060
variable.other, variable.other.readwrite#ede0cf
entity.name.tag, meta.tag.structure entity.name.tag#f08080
entity.other.attribute-name#f0c060
support.type.property-name.css, entity.name.tag.css#7ec8e3
support.constant.property-value.css, constant.other.color#e8a87c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#82cfaa
keyword.operator, keyword.operator.arithmetic#b09a90
punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace#b09a90
meta.decorator, punctuation.decorator, entity.name.function.decorator#c9a0dcitalic
markup.heading, punctuation.definition.heading.markdown#f0c060bold
markup.bold#ede0cfbold
markup.italic#ede0cfitalic
markup.inline.raw, markup.raw.inline#82cfaa
markup.underline.link#7ec8e3
markup.quote#8a7b70italic
punctuation.definition.list.begin.markdown#f0c060
string.regexp, constant.regexp#5fd7c0
constant.character.escape#c9a0dc
entity.name.namespace, entity.name.module, support.module#82cfaaitalic
variable.other.enummember, constant.other.enum#c9a0dc
invalid, invalid.illegal#f08080underline
variable.language#c9a0dcitalic
entity.name.function.method, meta.method entity.name.function#f0c060
storage.type.function.arrow, keyword.operator.arrow#7ec8e3
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#6b5e56
support.constant, support.constant.math, support.constant.dom#c9a0dc
support.variable, support.variable.dom, support.class.dom#7ec8e3
markup.fenced_code.block, markup.raw.block#82cfaa
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#82cfaa