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.background#2d2d2d
  • activityBar.border#00000000
  • activityBar.dropBackground#555555
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff8F
  • activityBarBadge.background#027aff
  • activityBarBadge.foreground#ffffff
  • button.background#696969
  • button.foreground#fcfbfc
  • button.hoverBackground#696969
  • descriptionForeground#ffffff
  • diffEditor.border#ff0000
  • diffEditor.insertedTextBackground#ff0000
  • diffEditor.insertedTextBorder#ff0000
  • diffEditor.removedTextBackground#ff0000
  • diffEditor.removedTextBorder#ff0000
  • dropdown.background#000
  • dropdown.border#ffffff33
  • dropdown.foreground#ffffff
  • dropdown.listBackground#000
  • editor.background#1c1c1c
  • editor.foreground#ffffffd8
  • editor.inactiveSelectionBackground#6e6e6e
  • editor.lineHighlightBackground#FFFFFF07
  • editor.selectionBackground#636f83
  • editor.selectionHighlightBackground#636f8380
  • editor.wordHighlightBackground#636f8380
  • editor.wordHighlightStrongBackground#636f8380
  • editorError.border#ff000000
  • editorError.foreground#c1c1c1
  • editorGroup.border#000000
  • editorGroup.dropBackground#555555
  • editorGroup.emptyBackground#1e1e1e
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.noTabsBackground#1c1c1c
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#4dbf57
  • editorGutter.background#ff000000
  • editorGutter.deletedBackground#e21515
  • editorGutter.modifiedBackground#348cff
  • editorHint.border#ff000000
  • editorHint.foreground#027aff
  • editorInfo.border#ff000000
  • editorInfo.foreground#4dbf57
  • editorLineNumber.activeForeground#ffffffd8
  • editorLineNumber.foreground#747478
  • editorOverviewRuler.addedForeground#4dbf57
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.bracketMatchForeground#636f8380
  • editorOverviewRuler.deletedForeground#e21515
  • editorOverviewRuler.errorForeground#e21515
  • editorOverviewRuler.findMatchForeground#636f8380
  • editorOverviewRuler.infoForeground#027aff
  • editorOverviewRuler.modifiedForeground#027aff
  • editorOverviewRuler.rangeHighlightForeground#636f8380
  • editorOverviewRuler.selectionHighlightForeground#636f8380
  • editorOverviewRuler.warningForeground#ffc501
  • editorOverviewRuler.wordHighlightForeground#636f8380
  • editorOverviewRuler.wordHighlightStrongForeground#636f8380
  • editorPane.background#1e1e1e
  • editorUnnecessaryCode.opacity#000000c0
  • editorWarning.border#ff000000
  • editorWarning.foreground#ffc501
  • errorForeground#ece1e0
  • foreground#ffffffd8
  • panel.background#1e1e1e
  • panel.border#00000000
  • panel.dropBackground#555555
  • panelTitle.activeBorder#ff000000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff8F
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#ffffff8F
  • scrollbarSlider.background#ffffff1C
  • scrollbarSlider.hoverBackground#ffffff8F
  • selection.background#636f83
  • sideBar.background#2d2d2d
  • sideBar.border#000000
  • sideBar.dropBackground#555555
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1e1e1e
  • statusBar.border#ff000000
  • statusBar.debuggingBackground#225526
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#027aff
  • statusBar.noFolderBorder#ff000000
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff1C
  • statusBarItem.hoverBackground#ff000000
  • tab.activeBackground#2d2d2d
  • tab.activeBorder#00000000
  • tab.activeForeground#ffffffd8
  • tab.border#ffffff00
  • tab.inactiveBackground#1e1e1e
  • tab.inactiveForeground#515151
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveForeground#ffffff15
  • textBlockQuote.background#ff0000
  • textBlockQuote.border#ff0000
  • textCodeBlock.background#ff0000
  • textLink.activeForeground#6699fe
  • textLink.foreground#6699fe
  • textPreformat.foreground#ffffffd8
  • textSeparator.foreground#ffffffd8
  • titleBar.activeBackground#2d2d2d
  • titleBar.border#ff000000
  • titleBar.inactiveBackground#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f8c98italic
string.quoted#fe8170
storage.type.function.arrow#ffffffd8
storage.type, storage.modifier, keyword, variable.language.this, variable.language.super, keyword.other.typedef, constant.language#fe7ab2bold
entity.name.type.class#6bdfff
variable.other.property, variable.other.object.property#b181ec
entity.name.function, entity.name.function.method#4db1cb
entity.name.type.module, entity.other.inherited-class, entity.name.class#d9baff
meta.type.annotation#6bdfff
punctuation.definition.tag, entity.name.tag, punctuation.separator.key-value#fe7ab2bold
punctuation.separator.key-value.js#ffffffd9
meta.attribute, entity.other.attribute-name#cc9767
constant.numeric#d8c87c
variable.other.property#abf2e4
keyword.operator#ffffffd9
variable.parameter#ffffffd9
support.type#d9baff
keyword.operator.assignment#ffffffd9
entity.name.fragment.graphql, variable.fragment.graphql#6bdfff
punctuation.quasi.element#ffffffd9
variable.other.readwrite#ffffffd9
meta.brace#ffffffd9
keyword.operator.arithmetic#b281eb