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#fd7e14
  • activityBar.background#e8eefe
  • activityBar.border#d1d9e0
  • activityBar.foreground#000000
  • activityBarBadge.background#0969da
  • activityBarBadge.foreground#ffffff
  • badge.background#0969da
  • badge.foreground#ffffff
  • button.background#000000
  • button.foreground#ffffff
  • button.hoverBackground#999999
  • button.secondaryBackground#f6f8fa
  • button.secondaryForeground#1f2328
  • button.secondaryHoverBackground#eaeef2
  • dropdown.background#f6f8fa
  • dropdown.border#d1d9e0
  • dropdown.foreground#1f2328
  • editor.background#e8eefe
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d80
  • editor.foreground#1f2328
  • editor.hoverHighlightBackground#0969da10
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#0969da20
  • editor.selectionHighlightBackground#0969da15
  • editor.wordHighlightBackground#7c3aed20
  • editor.wordHighlightStrongBackground#7c3aed40
  • editorCursor.foreground#0969da
  • editorGroup.border#d1d9e0
  • editorGroupHeader.border#0d1117
  • editorGroupHeader.noTabsBackground#0d1117
  • editorGroupHeader.tabsBackground#0d1117
  • editorIndentGuide.activeBackground1#8c959f
  • editorIndentGuide.background1#d1d9e0
  • editorLineNumber.activeForeground#0969da
  • editorLineNumber.foreground#656d76
  • editorOverviewRuler.commonContentForeground#656d76
  • editorOverviewRuler.currentContentForeground#1f883d
  • editorOverviewRuler.incomingContentForeground#0969da
  • editorRuler.foreground#d1d9e0
  • editorWhitespace.foreground#d1d9e0
  • errorLens.errorBackground#aa0000
  • errorLens.errorBackgroundLight#aa0000
  • errorLens.errorForeground#ffffff
  • errorLens.errorForegroundLight#ffffff
  • errorLens.hintBackground#f6d258
  • errorLens.hintBackgroundLight#f6d258
  • errorLens.hintForeground#ffffff
  • errorLens.hintForegroundLight#ffffff
  • errorLens.infoBackground#88a2bc
  • errorLens.infoBackgroundLight#88a2bc
  • errorLens.infoForeground#ffffff
  • errorLens.infoForegroundLight#ffffff
  • errorLens.warningBackground#ff8800
  • errorLens.warningBackgroundLight#ff8800
  • errorLens.warningForeground#ffffff
  • errorLens.warningForegroundLight#ffffff
  • extensionButton.prominentBackground#1f883d
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#1a7f37
  • focusBorder#ffffff
  • gitDecoration.addedResourceForeground#164f3f
  • gitDecoration.conflictingResourceForeground#7a1f2b
  • gitDecoration.deletedResourceForeground#7a1f2b
  • gitDecoration.ignoredResourceForeground#8c959f
  • gitDecoration.modifiedResourceForeground#5b55a3
  • gitDecoration.submoduleResourceForeground#656d76
  • gitDecoration.untrackedResourceForeground#164f3f
  • icon.foreground#aaaaaa
  • input.background#f6f8fa
  • input.border#d1d9e0
  • input.foreground#1f2328
  • input.placeholderForeground#656d76
  • inputOption.activeBorder#fd7e14
  • inputValidation.errorBackground#86181d
  • inputValidation.errorBorder#a40e26
  • inputValidation.warningBackground#9a6700
  • inputValidation.warningBorder#bf8700
  • list.activeSelectionBackground#f6f8fa
  • list.activeSelectionForeground#1f2328
  • list.focusBackground#f6f8fa
  • list.focusForeground#1f2328
  • list.hoverBackground#f3f4f6
  • list.hoverForeground#1f2328
  • list.inactiveSelectionBackground#eaeef2
  • list.inactiveSelectionForeground#1f2328
  • menu.background#ffffff
  • menu.foreground#1f2328
  • menu.selectionBackground#f6f8fa
  • menu.selectionForeground#1f2328
  • menu.separatorBackground#d1d9e0
  • menubar.selectionBackground#f6f8fa
  • menubar.selectionForeground#1f2328
  • merge.border#d1d9e0
  • merge.commonContentBackground#656d7620
  • merge.commonHeaderBackground#656d7640
  • merge.currentContentBackground#1f883d20
  • merge.currentHeaderBackground#1f883d40
  • merge.incomingContentBackground#0969da20
  • merge.incomingHeaderBackground#0969da40
  • notificationCenter.border#d1d9e0
  • notificationCenterHeader.background#f6f8fa
  • notificationCenterHeader.foreground#1f2328
  • notificationLink.foreground#0969da
  • notifications.background#ffffff
  • notifications.border#d1d9e0
  • notifications.foreground#1f2328
  • notificationToast.border#d1d9e0
  • panel.background#e8eefe
  • panel.border#d1d9e0
  • panelTitle.activeBorder#fd7e14
  • panelTitle.activeForeground#1f2328
  • panelTitle.inactiveForeground#656d76
  • peekView.border#d1d9e0
  • peekViewEditor.background#f6f8fa
  • peekViewEditor.matchHighlightBackground#ffdf5d80
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#1f2328
  • peekViewResult.lineForeground#656d76
  • peekViewResult.matchHighlightBackground#ffdf5d80
  • peekViewResult.selectionBackground#f6f8fa
  • peekViewResult.selectionForeground#1f2328
  • peekViewTitle.background#f6f8fa
  • peekViewTitleDescription.foreground#656d76
  • peekViewTitleLabel.foreground#1f2328
  • progressBar.background#0969da
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#d1d9e080
  • scrollbarSlider.background#d1d9e040
  • scrollbarSlider.hoverBackground#d1d9e060
  • sideBar.background#e8eefe
  • sideBar.border#777777
  • sideBar.foreground#777777
  • sideBarSectionHeader.background#f6f8fa
  • sideBarSectionHeader.foreground#1f2328
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#ffffff
  • statusBar.border#d1d9e0
  • statusBar.debuggingBackground#86181d
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#656d76
  • statusBar.noFolderBackground#ffffff
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#f78166
  • tab.activeForeground#c9d1d9
  • tab.border#777777
  • tab.hoverBackground#0d1117
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#8b949e
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#30363d
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#24292f
  • terminal.ansiBlue#0969da
  • terminal.ansiBrightBlack#656d76
  • terminal.ansiBrightBlue#218bff
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#a475f9
  • terminal.ansiBrightRed#a40e26
  • terminal.ansiBrightWhite#8c959f
  • terminal.ansiBrightYellow#633c01
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#116329
  • terminal.ansiMagenta#8250df
  • terminal.ansiRed#86181d
  • terminal.ansiWhite#6e7781
  • terminal.ansiYellow#4d2d00
  • terminal.background#e8eefe
  • terminal.foreground#1f2328
  • toolbar.hoverBackground#666666
  • widget.border#d1d9e0
  • widget.shadow#8c959f33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#656d76
variable, string constant.other.placeholder#1f2328
constant.other.color#004b5f
invalid, invalid.illegal#86181d
keyword, storage.type, storage.modifier#86181d
keyword.control, 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#1f2328
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#116329
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4c2889
meta.block variable.other#623600
support.other.variable, string.other.link#623600
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#004b5f
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#0a3069
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#623600
support.type#004b5f
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#004b5f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#86181d
variable.language#86181d
entity.name.method.js#4c2889
meta.class-method.js entity.name.function.js, variable.function.constructor#4c2889
entity.other.attribute-name#004b5f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#623600
entity.other.attribute-name.class#623600
source.sass keyword.control#4c2889
markup.inserted#116329
markup.deleted#86181d
markup.changed#623600
string.regexp#0a3069
constant.character.escape#176f75
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4c2889
source.js constant.other.object.key.js string.unquoted.label.js#86181d
source.json meta.structure.dictionary.json support.type.property-name.json#004b5f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#623600
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#623600
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#86181d
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#4c2889
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#004b5f
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#623600
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#623600
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#116329
text.html.markdown, punctuation.definition.list_item.markdown#1f2328
text.html.markdown markup.inline.raw.markdown#004b5f
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#656d76
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#004b5f
markup.italic#623600italic
markup.bold, markup.bold string#623600bold
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#623600bold
markup.underline#623600underline
markup.quote punctuation.definition.blockquote.markdown#656d76
markup.quoteitalic
string.other.link.title.markdown#004b5f
string.other.link.description.title.markdown#004b5f
constant.other.reference.link.markdown#623600
markup.raw.block#004b5f
markup.raw.block.fenced.markdown#1f232800
punctuation.definition.fenced.markdown#1f232800
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#1f2328
variable.language.fenced.markdown#656d76
meta.separator#656d76bold
markup.table#1f2328
Berlin Postal Themes by Heiko Panjas - VS Code Theme