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#cdd6f4ff
  • activityBar.inactiveForeground#a6adc8ff
  • button.background#3b414eff
  • button.foreground#cdd6f4ff
  • dropdown.background#130e13ff
  • dropdown.border#1b1e25ff
  • editor.background#0f1115ff
  • editor.foreground#cdd6f4ff
  • editor.lineHighlightBackground#2a2f38bf
  • editor.selectionBackground#89b4fa66
  • editorCursor.foreground#89b4faff
  • editorGroup.border#1b1e25ff
  • editorGroupHeader.noTabsBackground#0f1115ff
  • editorGroupHeader.tabsBackground#0c0e11ff
  • editorGroupHeader.tabsBorder#1b1e25ff
  • editorGutter.background#0f1115ff
  • editorLineNumber.activeForeground#cdd6f4ff
  • editorLineNumber.foreground#585b70ff
  • editorWidget.background#181318ff
  • editorWidget.border#1b1e25ff
  • focusBorder#26406bff
  • input.background#130e13ff
  • input.border#1b1e25ff
  • input.foreground#cdd6f4ff
  • list.activeSelectionBackground#3b414eff
  • list.activeSelectionForeground#cdd6f4ff
  • list.focusBackground#232933ff
  • list.hoverBackground#232933ff
  • list.hoverForeground#cdd6f4ff
  • list.inactiveSelectionBackground#232933ff
  • menu.background#181318ff
  • menu.border#1b1e25ff
  • menu.foreground#cdd6f4ff
  • menu.separatorBackground#1b1e25ff
  • panel.background#0f1115ff
  • panel.border#1b1e25ff
  • panelTitle.activeForeground#cdd6f4ff
  • panelTitle.inactiveForeground#a6adc8ff
  • quickInput.background#181318ff
  • quickInput.border#1b1e25ff
  • quickInput.foreground#cdd6f4ff
  • quickInputList.focusBackground#3b414eff
  • quickInputList.focusForeground#cdd6f4ff
  • quickInputTitle.background#130e13ff
  • scrollbarSlider.background#7173784c
  • scrollbarSlider.hoverBackground#2b3038ff
  • sideBar.background#0f1115ff
  • sideBar.border#1b1e25ff
  • sideBarSectionHeader.background#0f1115ff
  • sideBarSectionHeader.border#1b1e25ff
  • sideBarSectionHeader.foreground#a6adc8ff
  • sideBarTitle.foreground#cdd6f4ff
  • statusBar.background#0f1115ff
  • statusBar.border#1b1e25ff
  • statusBar.debuggingForeground#a6adc8ff
  • statusBar.foreground#cdd6f4ff
  • tab.activeBackground#0f1115ff
  • tab.activeBorder#26406bff
  • tab.activeForeground#cdd6f4ff
  • tab.border#1b1e25ff
  • tab.inactiveBackground#0f1115ff
  • tab.inactiveForeground#a6adc8ff
  • terminal.ansiBlack#45475a
  • terminal.ansiBlue#89b4fa
  • terminal.ansiBrightBlack#585b70
  • terminal.ansiBrightBlue#89b4fa
  • terminal.ansiBrightCyan#94e2d5
  • terminal.ansiBrightGreen#a6e3a1
  • terminal.ansiBrightMagenta#cba6f7
  • terminal.ansiBrightRed#f38ba8
  • terminal.ansiBrightWhite#a6adc8
  • terminal.ansiBrightYellow#f9e2af
  • terminal.ansiCyan#94e2d5
  • terminal.ansiGreen#a6e3a1
  • terminal.ansiMagenta#cba6f7
  • terminal.ansiRed#f38ba8
  • terminal.ansiWhite#bac2de
  • terminal.ansiYellow#f9e2af
  • terminal.background#0f1115ff
  • terminal.foreground#cdd6f4ff
  • titleBar.activeBackground#0f1115ff
  • titleBar.activeForeground#cdd6f4ff
  • titleBar.border#1b1e25ff
  • titleBar.inactiveBackground#0c0e11ff
  • titleBar.inactiveForeground#a6adc8ff
  • window.activeBorder#1b1e25ff
  • window.inactiveBorder#1b1e25ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cdd6f4ff
comment, punctuation.definition.comment#767b91ff
comment.block.documentation#7f849cff
keyword, storage.type, storage.modifier, keyword.control#cba6f7ff
string, punctuation.definition.string#a6e3a1ff
constant.character.escape#7f849cff
string.regexp#fab387ff
string.special, constant.other.placeholder#fab387ff
constant, support.constant, variable.language#fab387ff
constant.numeric#fab387ff
constant.language.boolean#fab387ff
variable, meta.definition.variable#cdd6f4ff
variable.language.this, variable.language.self, variable.predefined#fab387ff
entity.name.function, support.function, meta.function-call#89b4faff
entity.name.function.constructor, meta.constructor#89b4faff
entity.name.type, support.type, support.class, storage.type#89dcebff
variable.other.property, meta.object-literal.key, support.type.property-name#f38ba8ff
entity.name.tag, meta.tag.sgml#89b4faff
entity.other.attribute-name#89b4faff
keyword.operator#94e2d5ff
punctuation#bac2deff
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#a6adc8ff
meta.preprocessor, keyword.control.directive#cdd6f4ff