Skip to main content
CodingTheme

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#EE1212
  • activityBar.background#1B1B1E
  • activityBar.foreground#A4B1CD
  • activityBar.inactiveForeground#672e2e
  • activityBarBadge.background#D32828
  • activityBarBadge.foreground#1B1B1E
  • badge.background#FF3E3E
  • badge.foreground#FFFFFF
  • banner.background#2e362f
  • banner.foreground#a4b1cd
  • banner.iconForeground#FFFFFF
  • breadcrumb.activeSelectionForeground#D32828
  • breadcrumb.background#1B1B1E
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#A4B1CD
  • breadcrumbPicker.background#1B1B1E
  • button.background#D32828
  • button.foreground#2e2e36
  • charts.blue#004cff
  • charts.foreground#a4b1cd
  • charts.green#9fef00
  • charts.lines#a4b1cd
  • charts.orange#2ee7b6
  • charts.purple#9f00ff
  • charts.red#ff3e3e
  • charts.yellow#ffaf00
  • checkbox.background#2e2e36
  • checkbox.border#2e2e36
  • checkbox.foreground#D32828
  • debugExceptionWidget.background#ff3e3e49
  • debugExceptionWidget.border#ff3e3e49
  • debugIcon.breakpointCurrentStackframeForeground#ffcb5c8e
  • debugIcon.breakpointDisabledForeground#ff3e3e49
  • debugIcon.breakpointForeground#ff3e3e
  • debugIcon.breakpointStackframeForeground#004cff49
  • debugIcon.breakpointUnverifiedForeground#a4b1cd
  • debugIcon.continueForeground#9fef00
  • debugIcon.disconnectForeground#ff3e3e
  • debugIcon.pauseForeground#9fef00
  • debugIcon.restartForeground#ffaf00
  • debugIcon.startForeground#9fef00
  • debugIcon.stepBackForeground#a4b1cd
  • debugIcon.stepIntoForeground#a4b1cd
  • debugIcon.stepOutForeground#a4b1cd
  • debugIcon.stepOverForeground#a4b1cd
  • debugIcon.stopForeground#ff3e3e
  • debugToolBar.background#321a1d
  • debugToolBar.border#321a1d
  • descriptionForeground#a4b1cd
  • dropdown.background#1B1B1E
  • dropdown.foreground#a4b1cd
  • dropdown.listBackground#1B1B1E
  • editor.background#2b2b2c
  • editor.findMatchBackground#6e7b96a1
  • editor.findMatchHighlightBackground#6e7b968C
  • editor.findRangeHighlightBackground#6e7b968C
  • editor.foldBackground#a4b1cd0e
  • editor.foreground#a4b1cd
  • editor.lineHighlightBackground#a4b1cd11
  • editor.rangeHighlightBackground#a4b1cd11
  • editor.selectionBackground#6e7b968C
  • editor.selectionForeground#2e2e36
  • editor.selectionHighlightBackground#6e7b968C
  • editor.stackFrameHighlightBackground#6e7b968C
  • editorBracketMatch.border#313f55
  • editorCursor.background#D32828
  • editorGroup.border#313f55
  • editorGroup.dropBackground#6e7b9625
  • editorGroupHeader.tabsBackground#2b2b2c
  • editorGutter.addedBackground#73ef00
  • editorGutter.background#2b2b2c
  • editorGutter.commentRangeForeground#a4b1cd
  • editorGutter.deletedBackground#ff3e3e
  • editorGutter.modifiedBackground#004cff
  • editorHoverWidget.background#321a1d
  • editorHoverWidget.foreground#a4b1cd
  • editorIndentGuide.activeBackground#a4b1cd
  • editorIndentGuide.background#313f55
  • editorLightBulb.foreground#ffaf00
  • editorLightBulbAutoFix.foreground#D32828
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#5d6778
  • editorOverviewRuler.bracketMatchForeground#a4b1cd
  • editorOverviewRuler.commonContentForeground#9fef00
  • editorOverviewRuler.errorForeground#ff3e3e
  • editorOverviewRuler.findMatchForeground#004cff
  • editorOverviewRuler.infoForeground#ffffff
  • editorOverviewRuler.rangeHighlightForeground#004cff
  • editorOverviewRuler.selectionHighlightForeground#004cff
  • editorOverviewRuler.warningForeground#ffaf00
  • editorOverviewRuler.wordHighlightForeground#a4b1cd
  • editorSuggestWidget.background#321a1d
  • editorSuggestWidget.border#321a1d
  • editorSuggestWidget.foreground#a4b1cd
  • editorWidget.background#321a1d
  • editorWidget.border#321a1d
  • errorForeground#ff3e3e
  • extensionBadge.remoteBackground#2EE7B6
  • extensionBadge.remoteForeground#2e2e36
  • extensionButton.prominentBackground#D32828
  • extensionButton.prominentForeground#2e2e36
  • extensionButton.prominentHoverBackground#DC5555
  • focusBorder#321a1d
  • foreground#a4b1cd
  • gitDecoration.addedResourceForeground#9fef00
  • gitDecoration.conflictingResourceForeground#ffaf00
  • gitDecoration.deletedResourceForeground#ff3e3e
  • gitDecoration.ignoredResourceForeground#6e7b968C
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.submoduleResourceForeground#5cecc6
  • gitDecoration.untrackedResourceForeground#a4b1cd
  • icon.foreground#a4b1cd
  • input.background#252526
  • input.border#252526
  • input.foreground#ffffff
  • input.placeholderForeground#a4b1cd
  • inputOption.activeBackground#313f55
  • inputOption.activeBorder#313f55
  • inputOption.activeForeground#a4b1cd
  • 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#6e7b965d
  • keybindingLabel.border#6e7b968C
  • keybindingLabel.bottomBorder#a4b1cd7e
  • keybindingLabel.foreground#a4b1cd
  • list.activeSelectionBackground#321a1d
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#313f55
  • list.errorForeground#ff3e3e
  • list.hoverBackground#321a1db5
  • list.inactiveSelectionBackground#321a1d
  • list.warningForeground#ffaf00
  • listFilterWidget.background#004cff
  • menu.background#2e2e36
  • menu.separatorBackground#321a1d
  • menubar.selectionBackground#2e2e36
  • menubar.selectionForeground#a4b1cd
  • 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#9fef00
  • minimapGutter.deletedBackground#ff3e3e
  • minimapGutter.modifiedBackground#004cff
  • minimapSlider.activeBackground#6e7b968C
  • minimapSlider.background#25252656
  • minimapSlider.hoverBackground#25252656
  • notificationCenterHeader.background#321a1d
  • notificationLink.foreground#5cb2ff
  • notifications.background#321a1d
  • notifications.foreground#a4b1cd
  • notificationsErrorIcon.foreground#ff8484
  • notificationsInfoIcon.foreground#9fef00
  • notificationsWarningIcon.foreground#ffcc5c
  • panel.background#333335
  • panel.border#252526
  • panelTitle.activeBorder#9fef00
  • panelTitle.inactiveForeground#a4b1cd
  • peekView.border#321a1d
  • peekViewEditor.background#252526
  • progressBar.background#9fef00
  • scm.providerBorder#a4b1cd
  • scrollbar.shadow#252526
  • scrollbarSlider.activeBackground#6e7b968C
  • scrollbarSlider.background#6e7b968C
  • scrollbarSlider.hoverBackground#6e7b968C
  • selection.background#313f55
  • settings.checkboxBackground#2e2e36
  • settings.checkboxBorder#2e2e36
  • settings.checkboxForeground#D32828
  • settings.dropdownBackground#2e2e36
  • settings.dropdownBorder#2e2e36
  • settings.dropdownForeground#a4b1cd
  • settings.dropdownListBorder#2e2e36
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#D32828
  • settings.numberInputBackground#2e2e36
  • settings.numberInputBorder#2e2e36
  • settings.numberInputForeground#a4b1cd
  • settings.textInputBackground#2e2e36
  • settings.textInputBorder#2e2e36
  • settings.textInputForeground#a4b1cd
  • sideBar.background#27272a
  • sideBar.foreground#a4b1cd
  • sideBarSectionHeader.background#27272a
  • sideBarSectionHeader.foreground#6e7b968C
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1B1B1E
  • statusBar.debuggingBackground#ff8484
  • statusBar.debuggingForeground#252526
  • statusBar.foreground#a4b1cd
  • statusBar.noFolderBackground#1a2332
  • statusBar.noFolderForeground#a4b1cd
  • tab.activeBackground#1b1b1e
  • tab.activeBorder#1b1b1e
  • tab.activeBorderTop#1b1b1e
  • tab.activeModifiedBorder#a4b1cd
  • tab.border#252526
  • tab.hoverBackground#252526
  • tab.hoverBorder#252526
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#6e7b968C
  • tab.unfocusedActiveBorder#a4b1cd
  • 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#9fef00
  • terminal.ansiMagenta#9f00ff
  • terminal.ansiRed#ff3e3e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffaf00
  • terminal.background#252526
  • terminal.foreground#a4b1cd
  • terminalCursor.background#313f55
  • testing.iconErrored#ffaf00
  • testing.iconFailed#ff3e3e
  • testing.iconPassed#9fef00
  • testing.iconQueued#a4b1cd
  • testing.iconSkipped#a4b1cd
  • testing.iconUnset#a4b1cd
  • testing.message.error.decorationForeground#ff3e3e
  • testing.message.error.lineBackground#ff3e3e
  • testing.message.info.decorationForeground#004cff
  • testing.message.info.lineBackground#004cff
  • testing.peekBorder#a4b1cd
  • textBlockQuote.background#141d2b
  • textBlockQuote.border#a4b1cd
  • textCodeBlock.background#252526
  • textLink.activeForeground#c5f467
  • textLink.foreground#ee1212
  • textPreformat.foreground#2e6cff
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#1b1b1e
  • titleBar.activeForeground#a4b1cd
  • titleBar.border#1b1b1e
  • titleBar.inactiveBackground#1b1b1e
  • titleBar.inactiveForeground#d32828c9
  • tree.indentGuidesStroke#D32828
  • widget.shadow#252526
  • window.activeBorder#1a2332

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#A4B1CD
string constant.other.placeholder#C5D1EB
constant.other.color#FFFFFF
invalid, invalid.illegal#FF8484
keyword, storage.type, storage.modifier#FF8484
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#5CECC6
keyword.control#CF8DFB
markup.deleted.git_gutter#C5D1EB
entity.name.tag, meta.tag.sgml#FF8484
markup.deleted.git_gutter#C5D1EB
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFCC5C
meta.block variable.other#C5D1EB
support.other.variable#FF8484
string.other.link#FF8484
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FF
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#C5F467
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#FF8484
entity.name, entity.other.inherited-class#ffffff
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#FF8484
support.type#A4B1CD
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#A4B1CD
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8484
variable.language#FF8484italic
entity.name.method.js#5CB2FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#FF8484
entity.other.attribute-name#5CB2FF
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCC5Citalic
entity.other.attribute-name.class#5CB2FF
source.sass keyword.control#5CB2FF
markup.inserted#C5F467
markup.deleted#FF8484
markup.changed#CF8DFB
string.regexp#5CB2FF
constant.character.escape#5CB2FF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5CB2FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF8484italic
source.json meta.structure.dictionary.json support.type.property-name.json#CF8DFB
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5CB2FF
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#5CB2FF
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#FF8484
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#FF68B3
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#5CB2FF
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#FF8484
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#CF8DFB
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#C5F467
text.html.markdown, punctuation.definition.list_item.markdown#A4B1CD
text.html.markdown markup.inline.raw.markdown#CF8DFB
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#313F55
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C5F467
markup.italic#FF8484italic
markup.bold, markup.bold string#ff009d
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#FF8484bold
markup.underline#FF8484underline
markup.quote punctuation.definition.blockquote.markdown#1A2332
markup.quoteitalic
string.other.link.title.markdown#5CB2FF
string.other.link.description.title.markdown#CF8DFB
constant.other.reference.link.markdown#5CB2FF
markup.raw.block#CF8DFB
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#A4B1CD
variable.language.fenced.markdown#313F55
meta.separator#313F55bold
markup.table#A4B1CD
token.info-token#5CB2FF
token.warn-token#FFCC5C
token.error-token#FF8484
token.debug-token#CF8DFB

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Boitatech Theme by Boitatech - VS Code Theme