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#0c0e11ff
  • activityBar.border#1b1e25ff
  • activityBar.foreground#cdcdcd
  • activityBar.inactiveForeground#606079
  • button.background#405065
  • button.foreground#cdcdcd
  • dropdown.background#111112ff
  • dropdown.border#1b1e25ff
  • editor.background#0f1115ff
  • editor.foreground#cdcdcd
  • editor.lineHighlightBackground#1c1c24
  • editor.selectionBackground#333738
  • editorCursor.foreground#cdcdcd
  • editorGroup.border#1b1e25ff
  • editorGroupHeader.noTabsBackground#0f1115ff
  • editorGroupHeader.tabsBackground#0c0e11ff
  • editorGroupHeader.tabsBorder#1b1e25ff
  • editorGutter.background#0f1115ff
  • editorLineNumber.activeForeground#cdcdcd
  • editorLineNumber.foreground#606079
  • editorWidget.background#141415ff
  • editorWidget.border#1b1e25ff
  • focusBorder#6e94b2
  • input.background#111112ff
  • input.border#1b1e25ff
  • input.foreground#cdcdcd
  • list.activeSelectionBackground#333738
  • list.activeSelectionForeground#cdcdcd
  • list.focusBackground#1c1c24
  • list.hoverBackground#1c1c24
  • list.hoverForeground#cdcdcd
  • list.inactiveSelectionBackground#1c1c24
  • menu.background#141415ff
  • menu.border#1b1e25ff
  • menu.foreground#cdcdcd
  • menu.separatorBackground#1b1e25ff
  • panel.background#0f1115ff
  • panel.border#1b1e25ff
  • panelTitle.activeForeground#cdcdcd
  • panelTitle.inactiveForeground#606079
  • quickInput.background#141415ff
  • quickInput.border#1b1e25ff
  • quickInput.foreground#cdcdcd
  • quickInputList.focusBackground#333738
  • quickInputList.focusForeground#cdcdcd
  • quickInputTitle.background#111112ff
  • scrollbarSlider.background#7173784c
  • scrollbarSlider.hoverBackground#2b3038ff
  • sideBar.background#0f1115ff
  • sideBar.border#1b1e25ff
  • sideBarSectionHeader.background#0f1115ff
  • sideBarSectionHeader.border#1b1e25ff
  • sideBarSectionHeader.foreground#606079
  • sideBarTitle.foreground#cdcdcd
  • statusBar.background#0f1115ff
  • statusBar.border#1b1e25ff
  • statusBar.debuggingForeground#606079
  • statusBar.foreground#cdcdcd
  • tab.activeBackground#0f1115ff
  • tab.activeBorder#6e94b2
  • tab.activeForeground#cdcdcd
  • tab.border#1b1e25ff
  • tab.inactiveBackground#0f1115ff
  • tab.inactiveForeground#606079
  • terminal.ansiBlack#141415
  • terminal.ansiBlue#8ba9c1
  • terminal.ansiBrightBlack#252530
  • terminal.ansiBrightBlue#7e98e8
  • terminal.ansiBrightCyan#b4d4cf
  • terminal.ansiBrightGreen#7fa563
  • terminal.ansiBrightMagenta#aeaed1
  • terminal.ansiBrightRed#d8647e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f3be7c
  • terminal.ansiCyan#bebeda
  • terminal.ansiGreen#99b782
  • terminal.ansiMagenta#c9b1ca
  • terminal.ansiRed#e08398
  • terminal.ansiWhite#d7d7d7
  • terminal.ansiYellow#f5cb96
  • terminal.background#0f1115ff
  • terminal.foreground#cdcdcd
  • titleBar.activeBackground#0f1115ff
  • titleBar.activeForeground#cdcdcd
  • titleBar.border#1b1e25ff
  • titleBar.inactiveBackground#0c0e11ff
  • titleBar.inactiveForeground#606079
  • window.activeBorder#1b1e25ff
  • window.inactiveBorder#1b1e25ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cdcdcd
comment, punctuation.definition.comment#606079
comment.block.documentation#606079
keyword, storage.type, storage.modifier, keyword.control#6e94b2
string, punctuation.definition.string#e8b589
constant.character.escape#e8b589
string.regexp#e8b589
string.special, constant.other.placeholder#e8b589
constant, support.constant, variable.language#aeaed1
constant.numeric#e0a363
constant.language.boolean#e0a363
variable, meta.definition.variable#cdcdcd
variable.language.this, variable.language.self, variable.predefined#bb9dbd
entity.name.function, support.function, meta.function-call#c48282
entity.name.function.constructor, meta.constructor#c48282
entity.name.type, support.type, support.class, storage.type#9bb4bc
variable.other.property, meta.object-literal.key, support.type.property-name#c3c3d5
entity.name.tag, meta.tag.sgml#6e94b2
entity.other.attribute-name#c3c3d5
keyword.operator#90a0b5
punctuation#cdcdcd
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#cdcdcd
meta.preprocessor, keyword.control.directive#b4d4cf