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#e0def4ff
  • activityBar.inactiveForeground#908caaff
  • button.background#ebbcbaff
  • button.foreground#191724ff
  • dropdown.background#110e14ff
  • dropdown.border#1b1e25ff
  • editor.background#0f1115ff
  • editor.foreground#e0def4ff
  • editor.lineHighlightBackground#2a2f38bf
  • editor.selectionBackground#403d5266
  • editorCursor.foreground#ebbcba
  • editorGroup.border#1b1e25ff
  • editorGroupHeader.noTabsBackground#0f1115ff
  • editorGroupHeader.tabsBackground#0c0e11ff
  • editorGroupHeader.tabsBorder#1b1e25ff
  • editorGutter.background#0f1115ff
  • editorLineNumber.activeForeground#e0def4ff
  • editorLineNumber.foreground#827f9cff
  • editorWidget.background#15131aff
  • editorWidget.border#1b1e25ff
  • focusBorder#c4a7e7ff
  • input.background#110e14ff
  • input.border#1b1e25ff
  • input.foreground#e0def4ff
  • list.activeSelectionBackground#403d52ff
  • list.activeSelectionForeground#e0def4ff
  • list.focusBackground#26233aff
  • list.hoverBackground#26233aff
  • list.hoverForeground#e0def4ff
  • list.inactiveSelectionBackground#26233aff
  • menu.background#15131aff
  • menu.border#1b1e25ff
  • menu.foreground#e0def4ff
  • menu.separatorBackground#1b1e25ff
  • panel.background#0f1115ff
  • panel.border#1b1e25ff
  • panelTitle.activeForeground#e0def4ff
  • panelTitle.inactiveForeground#908caaff
  • quickInput.background#15131aff
  • quickInput.border#1b1e25ff
  • quickInput.foreground#e0def4ff
  • quickInputList.focusBackground#403d52ff
  • quickInputList.focusForeground#e0def4ff
  • quickInputTitle.background#110e14ff
  • scrollbarSlider.background#7173784c
  • scrollbarSlider.hoverBackground#2b3038ff
  • sideBar.background#0f1115ff
  • sideBar.border#1b1e25ff
  • sideBarSectionHeader.background#0f1115ff
  • sideBarSectionHeader.border#1b1e25ff
  • sideBarSectionHeader.foreground#908caaff
  • sideBarTitle.foreground#e0def4ff
  • statusBar.background#0f1115ff
  • statusBar.border#1b1e25ff
  • statusBar.debuggingForeground#908caaff
  • statusBar.foreground#e0def4ff
  • tab.activeBackground#0f1115ff
  • tab.activeBorder#c4a7e7ff
  • tab.activeForeground#e0def4ff
  • tab.border#1b1e25ff
  • tab.inactiveBackground#0f1115ff
  • tab.inactiveForeground#908caaff
  • terminal.ansiBlack#26233a
  • terminal.ansiBlue#ebbcba
  • terminal.ansiBrightBlack#827f9c
  • terminal.ansiBrightBlue#ebbcba
  • terminal.ansiBrightCyan#9ccfd8
  • terminal.ansiBrightGreen#569ab7
  • terminal.ansiBrightMagenta#c4a7e7
  • terminal.ansiBrightRed#eb6f92
  • terminal.ansiBrightWhite#e0def4
  • terminal.ansiBrightYellow#f6c177
  • terminal.ansiCyan#9ccfd8
  • terminal.ansiGreen#569ab7
  • terminal.ansiMagenta#c4a7e7
  • terminal.ansiRed#eb6f92
  • terminal.ansiWhite#e0def4
  • terminal.ansiYellow#f6c177
  • terminal.background#0f1115ff
  • terminal.foreground#e0def4ff
  • titleBar.activeBackground#0f1115ff
  • titleBar.activeForeground#e0def4ff
  • titleBar.border#1b1e25ff
  • titleBar.inactiveBackground#0c0e11ff
  • titleBar.inactiveForeground#908caaff
  • window.activeBorder#1b1e25ff
  • window.inactiveBorder#1b1e25ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e0def4ff
comment, punctuation.definition.comment#827f9cff
comment.block.documentation#908caaff
keyword, storage.type, storage.modifier, keyword.control#569ab7ff
string, punctuation.definition.string#f6c177ff
constant.character.escape#ebbcbaff
string.regexp#f6c177ff
string.special, constant.other.placeholder#f6c177ff
constant, support.constant, variable.language#569ab7ff
constant.numeric#ebbcbaff
constant.language.boolean#ebbcbaff
variable, meta.definition.variable#e0def4ff
variable.language.this, variable.language.self, variable.predefined#569ab7ff
entity.name.function, support.function, meta.function-call#ebbcbaff
entity.name.function.constructor, meta.constructor#ebbcbaff
entity.name.type, support.type, support.class, storage.type#9ccfd8ff
variable.other.property, meta.object-literal.key, support.type.property-name#e0def4ff
entity.name.tag, meta.tag.sgml#9ccfd8ff
entity.other.attribute-name#c4a7e7ff
keyword.operator#908caaff
punctuation#908caaff
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#908caaff
meta.preprocessor, keyword.control.directive#569ab7ff
Atomic-Dark Theme by thekodeking - VS Code Theme