Skip to main content
Coding Theme

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.activeBackground#111
  • activityBar.activeBorder#763310
  • activityBar.activeFocusBorder#763310
  • activityBar.background#050505
  • activityBar.border#00000000
  • activityBar.dropBorder#00000000
  • activityBar.foreground#efefef
  • activityBar.inactiveForeground#777
  • activityBarBadge.background#763310
  • activityBarBadge.foreground#efefef
  • button.background#763310bd
  • button.border#763310bd
  • button.foreground#bebebe
  • button.hoverBackground#763310
  • button.secondaryBackground#00000000
  • button.secondaryForeground#763310bd
  • button.secondaryHoverBackground#111
  • checkbox.background#050505
  • checkbox.border#efefef
  • checkbox.foreground#efefef
  • checkbox.selectBackground#763310
  • checkbox.selectBorder#00000000
  • descriptionForeground#bebebe
  • dropdown.background#552605
  • dropdown.border#aaa
  • dropdown.foreground#ddd
  • dropdown.listBackground#763310
  • editor.background#050505
  • editor.findMatchBackground#33a0009f
  • editor.findMatchHighlightBackground#f700ff36
  • editor.lineHighlightBackground#111
  • editor.lineHighlightBorder#222
  • editor.selectionBackground#77777777
  • editor.wordHighlightBackground#99410355
  • editor.wordHighlightStrongBackground#99410355
  • editor.wordHighlightTextBackground#99410355
  • editorBracketPairGuide.activeBackground1#ccb20e
  • editorBracketPairGuide.activeBackground2#ccb20e
  • editorBracketPairGuide.activeBackground3#ccb20e
  • editorBracketPairGuide.activeBackground4#ccb20e
  • editorBracketPairGuide.activeBackground5#ccb20e
  • editorBracketPairGuide.activeBackground6#ccb20e
  • editorCursor.foreground#fff
  • editorGroup.border#00000000
  • editorGroup.dropBackground#00ccff55
  • editorGroup.dropIntoPromptBackground#0097bd
  • editorGroup.dropIntoPromptBorder#00000000
  • editorGroup.dropIntoPromptForeground#efefef
  • editorGroup.emptyBackground#181818
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#00000000
  • editorHoverWidget.background#111
  • editorHoverWidget.border#763310
  • editorHoverWidget.foreground#ffffffdd
  • editorSuggestWidget.focusHighlightForeground#0097bd
  • editorSuggestWidget.highlightForeground#0f4c5f
  • editorWidget.background#151515
  • editorWidget.border#763310
  • editorWidget.foreground#aaa
  • editorWidget.resizeBorder#763310
  • errorForeground#fc2828
  • focusBorder#bbb
  • foreground#bebebe
  • icon.foreground#bebebe
  • input.background#050505
  • input.border#404040
  • input.foreground#efefef
  • input.placeholderForeground#888
  • inputOption.activeBackground#444
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#aaa
  • inputOption.hoverBackground#444
  • list.activeSelectionBackground#050505
  • list.activeSelectionForeground#efefef
  • list.activeSelectionIconForeground#efefef
  • list.deemphasizedForeground#333
  • list.dropBackground#00ccffdd
  • list.errorForeground#fc2828
  • list.focusAndSelectionOutline#00000000
  • list.focusHighlightForeground#000000
  • list.focusOutline#000
  • list.hoverBackground#222
  • list.hoverForeground#efefef
  • list.inactiveSelectionBackground#050505
  • list.inactiveSelectionForeground#ddd
  • list.inactiveSelectionIconForeground#ddd
  • list.warningForeground#ffae00
  • listFilterWidget.background#000000
  • listFilterWidget.shadow#88888855
  • minimap.background#080808
  • minimap.errorHighlight#fc2828
  • minimap.findMatchHighlight#00ccffdd
  • minimap.foregroundOpacity#ffffffcc
  • minimap.selectionHighlight#00ccff55
  • minimap.selectionOccurrenceHighlight#00000000
  • minimap.warningHighlight#ff8800cc
  • minimapGutter.addedBackground#00000000
  • minimapGutter.deletedBackground#00000000
  • minimapGutter.modifiedBackground#00000000
  • minimapSlider.activeBackground#0097bd88
  • minimapSlider.background#0097bd88
  • minimapSlider.hoverBackground#0097bdcc
  • notifications.background#151515
  • notifications.foreground#ccc
  • notificationToast.border#444
  • sash.hoverBorder#763310bd
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#76331088
  • scrollbarSlider.background#76331088
  • scrollbarSlider.hoverBackground#763310cc
  • selection.background#763310bd
  • sideBar.background#111
  • sideBar.border#050505
  • sideBar.dropBackground#11a3dd
  • sideBar.foreground#777
  • sideBarSectionHeader.background#763310
  • sideBarSectionHeader.border#781c1c00
  • sideBarSectionHeader.foreground#eee
  • sideBarTitle.foreground#763310
  • sideBySideEditor.horizontalBorder#0097bd
  • sideBySideEditor.verticalBorder#0097bd
  • statusBar.background#0f4c5f
  • statusBar.debuggingBackground#913acf
  • statusBar.focusBorder#00000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0f4c5f
  • tab.activeBackground#050505
  • tab.activeBorder#000000
  • tab.activeBorderTop#763310
  • tab.activeForeground#efefef
  • tab.activeModifiedBorder#00000000
  • tab.border#181818
  • tab.hoverBackground#050505
  • tab.hoverForeground#aaa
  • tab.inactiveBackground#282828
  • tab.inactiveForeground#aaa
  • tab.inactiveModifiedBorder#00000000
  • titleBar.activeBackground#0f4c5f
  • titleBar.activeForeground#efefef
  • titleBar.inactiveBackground#0f4c5faf
  • toolbar.hoverBackground#0f4252
  • toolbar.hoverOutline#0f4252
  • tree.indentGuidesStroke#763310bd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888italic
keyword.control, keyword, punctuation.definition.keyword, markup.bold#b54646bold
meta.function-call.generic, meta.function-call, entity.name.function, entity.name.tag, heading#824aaa
keyword.operator, meta.paragraph, constant.character.escape#ccb20eitalic bold
meta.brace, punctuation.section, punctuation.separator.colon, punctuation.separator.parameters#ccb20e
punctuation.definition, punctuation.definition.tag, constant.character.format.placeholder, punctuation.parenthesis, punctuation.definition.tag.begin.html, source.js-ignored-vscode#ccb20ebold
string, string.quoted, punctuation.definition.string, meta.paragraph#cccitalic
storage.type.function, entity.other.attribute-name, keyword.other.unit, punctuation.definition.constant.css, markup.italic, support.type, keyword.operator.expression, storage.type.string#b54646italic
variable, meta.variable, source, support.type.property-name, meta.function-call.arguments#0f7b99
boolean, constant, markup.inline.raw.string.markdown, markup.underline.link#cccitalic