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#FF5541d0
  • activityBar.background#191918
  • activityBar.foreground#FFFFFFd0
  • activityBar.inactiveForeground#433B39
  • activityBarBadge.background#FF5541d0
  • activityBarBadge.foreground#1E1E1E
  • badge.background#ff3e3e
  • badge.foreground#ffffffd0
  • banner.background#141411
  • banner.foreground#ffffffd0
  • banner.iconForeground#ffffff
  • breadcrumb.activeSelectionForeground#FF5541d0
  • breadcrumb.background#191918
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#FFFFFF80
  • breadcrumbPicker.background#141411
  • button.background#FF5541d0
  • button.foreground#FFFFFFd0
  • charts.blue#004cff
  • charts.foreground#ffffffd0
  • charts.green#FF5541d0
  • charts.lines#FFFFFF
  • charts.orange#2ee7b6
  • charts.purple#9f00ff
  • charts.red#ff3e3e
  • charts.yellow#ffaf00
  • checkbox.background#141411
  • checkbox.border#2E2E2E
  • checkbox.foreground#FF5541d0
  • debugExceptionWidget.background#ff3e3e49
  • debugExceptionWidget.border#ff3e3e49
  • debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
  • debugIcon.breakpointDisabledForeground#ff3e3e49
  • debugIcon.breakpointForeground#ff3e3e
  • debugIcon.breakpointStackframeForeground#004cff49
  • debugIcon.breakpointUnverifiedForeground#FDE8D5
  • debugIcon.continueForeground#FF5541d0
  • debugIcon.disconnectForeground#ff3e3e
  • debugIcon.pauseForeground#FF5541d0
  • debugIcon.restartForeground#ffaf00
  • debugIcon.startForeground#FF5541d0
  • debugIcon.stepBackForeground#ffffffd0
  • debugIcon.stepIntoForeground#ffffffd0
  • debugIcon.stepOutForeground#ffffffd0
  • debugIcon.stepOverForeground#ffffffd0
  • debugIcon.stopForeground#ff3e3e
  • debugToolBar.background#1E1E1E
  • debugToolBar.border#2E2E2E
  • descriptionForeground#ffffffd0
  • dropdown.background#141411
  • dropdown.foreground#ffffffd0
  • dropdown.listBackground#141411
  • editor.background#191918
  • editor.findMatchBackground#FFFFFF50
  • editor.findMatchHighlightBackground#ffffff25
  • editor.findRangeHighlightBackground#ffffff10
  • editor.foldBackground#191918
  • editor.foreground#ffffffd0
  • editor.lineHighlightBackground#1E1E1E
  • editor.lineHighlightBorder#2E2E2E
  • editor.rangeHighlightBackground#433B39
  • editor.selectionBackground#ffffff15
  • editor.selectionforeground#ffffffd0
  • editor.selectionHighlightBackground#E8D4B68C
  • editor.stackFrameHighlightBackground#E8D4B68C
  • editorBracketMatch.border#433B39
  • editorCursor.background#FF5541d0
  • editorGroup.border#433B39
  • editorGroup.dropBackground#E8D4B625
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorGutter.addedBackground#FF5541d0
  • editorGutter.background#191918
  • editorGutter.commentRangeForeground#ffffffd0
  • editorGutter.deletedBackground#ff3e3e
  • editorGutter.modifiedBackground#004cff
  • editorHoverWidget.background#1E1E1E
  • editorHoverWidget.foreground#ffffffd0
  • editorIndentGuide.activeBackground#FFFFFF
  • editorIndentGuide.background#433B39
  • editorLightBulb.foreground#ffaf00
  • editorLightBulbAutoFix.foreground#FF5541d0
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#433B39
  • editorOverviewRuler.bracketMatchForeground#ffffffd0
  • editorOverviewRuler.commonContentForeground#FF5541d0
  • editorOverviewRuler.errorForeground#ff3e3e
  • editorOverviewRuler.findMatchForeground#004cff
  • editorOverviewRuler.infoForeground#ffffff
  • editorOverviewRuler.rangeHighlightForeground#004cff
  • editorOverviewRuler.selectionHighlightForeground#004cff
  • editorOverviewRuler.warningForeground#ffaf00
  • editorOverviewRuler.wordHighlightForeground#ffffffd0
  • editorSuggestWidget.background#1E1E1E
  • editorSuggestWidget.border#2E2E2E
  • editorSuggestWidget.foreground#ffffffd0
  • editorWidget.background#1E1E1E
  • editorWidget.border#2E2E2E
  • errorForeground#ff3e3e
  • extensionBadge.remoteBackground#2ee7b6
  • extensionBadge.remoteforeground#ffffffd0
  • extensionButton.prominentBackground#FF5541d0
  • extensionButton.prominentforeground#ffffffd0
  • extensionButton.prominentHoverBackground#c5f467
  • extensionIcon.starForeground#ffaf00
  • focusBorder#2E2E2E
  • foreground#ffffffd0
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#ffffffd0
  • input.background#191918
  • input.border#191918
  • input.foreground#ffffffd0
  • input.placeholderForeground#ffffffd0
  • inputOption.activeBackground#433B39
  • inputOption.activeBorder#433B39
  • inputOption.activeForeground#ffffffd0
  • inputValidation.errorBackground#ff3e3e70
  • inputValidation.errorBorder#ff3e3e49
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#004cff70
  • inputValidation.infoBorder#004cff54
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#ffaf0070
  • inputValidation.warningBorder#ffaf0070
  • inputValidation.warningForeground#ffffff
  • keybindingLabel.background#E8D4B65d
  • keybindingLabel.border#E8D4B68C
  • keybindingLabel.bottomBorder#FFFFFF7e
  • keybindingLabel.foreground#ffffffd0
  • list.activeSelectionBackground#6b81eb20
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#433B39
  • list.errorForeground#ff3e3e
  • list.hoverBackground#6b81eb10
  • list.inactiveSelectionBackground#1E1E1E
  • list.warningForeground#ffaf00
  • listFilterWidget.background#004cff
  • menu.background#1E1E1E
  • menu.selectionBackground#FF5541d0
  • menu.separatorBackground#FFFFFF20
  • menubar.selectionBackground#292929
  • menubar.selectionForeground#ffffffd0
  • merge.commonContentBackground#ffffff
  • merge.commonHeaderBackground#ffffff
  • merge.currentContentBackground#ff3e3e49
  • merge.currentHeaderBackground#ff3e3e
  • merge.incomingContentBackground#004cff49
  • merge.incomingHeaderBackground#004cff
  • minimap.errorHighlight#ff8484
  • minimap.findMatchHighlight#c5f467
  • minimap.selectionHighlight#ffffffd0
  • minimap.warningHighlight#ffcc5c
  • minimapGutter.addedBackground#FF5541d0
  • minimapGutter.deletedBackground#ff3e3e
  • minimapGutter.modifiedBackground#004cff
  • minimapSlider.activeBackground#E8D4B68C
  • minimapSlider.background#191918
  • minimapSlider.hoverBackground#141411
  • notificationCenterHeader.background#1E1E1E
  • notificationLink.foreground#5cb2ff
  • notifications.background#1E1E1E
  • notifications.foreground#ffffffd0
  • notificationsErrorIcon.foreground#ff8484
  • notificationsInfoIcon.foreground#FF5541d0
  • notificationsWarningIcon.foreground#ffcc5c
  • panel.background#191918
  • panel.border#ffffff20
  • panelTitle.activeBorder#FF5541d0
  • panelTitle.inactiveForeground#ffffffd0
  • peekView.border#2E2E2E
  • peekViewEditor.background#191918
  • progressBar.background#FF5541d0
  • scm.providerBorder#FFFFFF
  • scrollbar.shadow#191918
  • scrollbarSlider.activeBackground#FFFFFF30
  • scrollbarSlider.background#FFFFFF30
  • scrollbarSlider.hoverBackground#FFFFFF30
  • selection.background#433B39
  • settings.checkboxBackground#141411
  • settings.checkboxBorder#2E2E2E
  • settings.checkboxForeground#FF5541d0
  • settings.dropdownBackground#141411
  • settings.dropdownBorder#2E2E2E
  • settings.dropdownForeground#ffffffd0
  • settings.dropdownListBorder#2E2E2E
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#FF5541d0
  • settings.numberInputBackground#141411
  • settings.numberInputBorder#2E2E2E
  • settings.numberInputForeground#ffffffd0
  • settings.textInputBackground#141411
  • settings.textInputBorder#2E2E2E
  • settings.textInputForeground#ffffffd0
  • sideBar.background#1E1E1E
  • sideBar.foreground#FFFFFFd0
  • sideBarSectionHeader.background#1E1E1E
  • sideBarSectionHeader.border#ffffff10
  • sideBarSectionHeader.foreground#ffffffd0
  • sideBarTitle.foreground#ffffffd0
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#ff8484
  • statusBar.debuggingforeground#ffffffd0
  • statusBar.foreground#ffffffd0
  • statusBar.noFolderBackground#1E1E1E
  • statusBar.noFolderForeground#ffffffd0
  • tab.activeBackground#191918
  • tab.activeBorderTop#191918
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#FFFFFF
  • tab.border#191918
  • tab.hoverBackground#191918
  • tab.hoverBorder#191918
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveBorder#FFFFFF
  • terminal.ansiBlue#004cff
  • terminal.ansiBrightBlue#5cb2ff
  • terminal.ansiBrightCyan#5cecc6
  • terminal.ansiBrightGreen#c5f467
  • terminal.ansiBrightMagenta#c16cfa
  • terminal.ansiBrightRed#ff8484
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcc5c
  • terminal.ansiCyan#2ee7b6
  • terminal.ansiGreen#FF5541d0
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#ff3e3e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffaf00
  • terminal.background#191918
  • terminal.foreground#FFFFFFd0
  • terminalCursor.background#433B39
  • testing.iconErrored#ffaf00
  • testing.iconFailed#ff3e3e
  • testing.iconPassed#FF5541d0
  • testing.iconQueued#FFFFFF
  • testing.iconSkipped#FFFFFF
  • testing.iconUnset#FFFFFF
  • testing.message.error.decorationForeground#ff3e3e
  • testing.message.error.lineBackground#ff3e3e
  • testing.message.hint.decorationForeground#2ee7b6
  • testing.message.hint.lineBackground#2ee7b6
  • testing.message.info.decorationForeground#004cff
  • testing.message.info.lineBackground#004cff
  • testing.message.warning.decorationForeground#ffaf00
  • testing.message.warning.lineBackground#ffaf00
  • testing.peekBorder#FFFFFF
  • textBlockQuote.background#191918
  • textBlockQuote.border#FFFFFF
  • textCodeBlock.background#141411
  • textLink.activeForeground#c5f467
  • textLink.foreground#FF5541d0
  • textPreformat.foreground#2e6cff
  • textSeparator.foreground#ffffffd0
  • titleBar.activeBackground#191918
  • titleBar.activeForeground#ffffffd0
  • titleBar.border#ffffff20
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#433B39
  • tree.indentGuidesStroke#ffffff50
  • walkThrough.embeddedEditorBackground#191918
  • welcomePage.background#191918
  • welcomePage.buttonBackground#1E1E1E
  • welcomePage.buttonHoverBackground#433B39
  • widget.shadow#1414117e
  • window.activeBorder#2E2E2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#FDE8D5e0
string constant.other.placeholder#FFFFFFc0
constant.other.color#ffffffd0
invalid, invalid.illegal#FF8484e0
keyword, storage.type, storage.modifier#FF8484e0
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5CECC6e0
keyword.control#CF8DFBe0
markup.deleted.git_gutter#FFFFFFc0
entity.name.tag, meta.tag.sgml#FF8484e0
markup.deleted.git_gutter#FFFFFFc0
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFCC5Ce0
meta.block variable.other#FFFFFFc0
support.other.variable#FF8484e0
string.other.link#FF8484e0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FFe0
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C5F467e0
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484e0
entity.name, entity.other.inherited-class#ffffffd0
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FF8484e0
support.type#FDE8D5e0
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#FDE8D5e0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8484e0
variable.language#FF8484e0italic
entity.name.method.js#5CB2FFe0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#FF8484e0
entity.other.attribute-name#5CB2FFe0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCC5Ce0italic
entity.other.attribute-name.class#5CB2FFe0
source.sass keyword.control#5CB2FFe0
markup.inserted#C5F467e0
markup.deleted#FF8484e0
markup.changed#CF8DFBe0
string.regexp#5CB2FFe0
constant.character.escape#5CB2FFe0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5CB2FFe0italic
source.js constant.other.object.key.js string.unquoted.label.js#FF8484e0italic
source.json meta.structure.dictionary.json support.type.property-name.json#CF8DFBe0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FFe0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FFe0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8484e0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF68B3e0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FFe0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8484e0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CF8DFBe0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C5F467e0
text.html.markdown, punctuation.definition.list_item.markdown#FDE8D5e0
text.html.markdown markup.inline.raw.markdown#CF8DFBe0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#433B39
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C5F467e0
markup.italic#FF8484e0italic
markup.bold, markup.bold string#ff009de0
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF8484e0bold
markup.underline#FF8484e0underline
markup.quote punctuation.definition.blockquote.markdown#1E1E1E
markup.quoteitalic
string.other.link.title.markdown#5CB2FFe0
string.other.link.description.title.markdown#CF8DFBe0
constant.other.reference.link.markdown#5CB2FFe0
markup.raw.block#CF8DFBe0
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FDE8D5e0
variable.language.fenced.markdown#433B39
meta.separator#433B39bold
markup.table#FDE8D5e0
token.info-token#5CB2FFe0
token.warn-token#FFCC5Ce0
token.error-token#FF8484e0
token.debug-token#CF8DFBe0
Beatsoft Theme by Beatsoft - VS Code Theme