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#eef1f6ff
  • activityBar.inactiveForeground#b1b6c4ff
  • button.background#3b414eff
  • button.foreground#eef1f6ff
  • dropdown.background#0d0f12ff
  • dropdown.border#1b1e25ff
  • editor.background#0f1115ff
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2a2f38bf
  • editor.selectionBackground#7abff53d
  • editorCursor.foreground#7abff5ff
  • editorGroup.border#1b1e25ff
  • editorGroupHeader.noTabsBackground#0f1115ff
  • editorGroupHeader.tabsBackground#0c0e11ff
  • editorGroupHeader.tabsBorder#1b1e25ff
  • editorGutter.background#0f1115ff
  • editorLineNumber.activeForeground#eef1f6ff
  • editorLineNumber.foreground#585b70ff
  • editorWidget.background#0f1116ff
  • editorWidget.border#1b1e25ff
  • focusBorder#26406bff
  • input.background#0d0f12ff
  • input.border#1b1e25ff
  • input.foreground#eef1f6ff
  • list.activeSelectionBackground#3b414eff
  • list.activeSelectionForeground#eef1f6ff
  • list.focusBackground#232933ff
  • list.hoverBackground#232933ff
  • list.hoverForeground#eef1f6ff
  • list.inactiveSelectionBackground#232933ff
  • menu.background#0f1116ff
  • menu.border#1b1e25ff
  • menu.foreground#eef1f6ff
  • menu.separatorBackground#1b1e25ff
  • panel.background#0f1115ff
  • panel.border#1b1e25ff
  • panelTitle.activeForeground#eef1f6ff
  • panelTitle.inactiveForeground#b1b6c4ff
  • quickInput.background#0f1116ff
  • quickInput.border#1b1e25ff
  • quickInput.foreground#eef1f6ff
  • quickInputList.focusBackground#3b414eff
  • quickInputList.focusForeground#eef1f6ff
  • quickInputTitle.background#0c0e11ff
  • scrollbarSlider.background#7173784c
  • scrollbarSlider.hoverBackground#2b3038ff
  • sideBar.background#0f1115ff
  • sideBar.border#1b1e25ff
  • sideBarSectionHeader.background#0f1115ff
  • sideBarSectionHeader.border#1b1e25ff
  • sideBarSectionHeader.foreground#b1b6c4ff
  • sideBarTitle.foreground#eef1f6ff
  • statusBar.background#0f1115ff
  • statusBar.border#1b1e25ff
  • statusBar.debuggingForeground#b1b6c4ff
  • statusBar.foreground#eef1f6ff
  • tab.activeBackground#0f1115ff
  • tab.activeBorder#26406bff
  • tab.activeForeground#eef1f6ff
  • tab.border#1b1e25ff
  • tab.inactiveBackground#0f1115ff
  • tab.inactiveForeground#b1b6c4ff
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#636d83
  • terminal.ansiBrightBlue#85c1ff
  • terminal.ansiBrightCyan#6ed5de
  • terminal.ansiBrightGreen#aad581
  • terminal.ansiBrightMagenta#d398eb
  • terminal.ansiBrightRed#ea858b
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#ffd885
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#0f1115ff
  • terminal.foreground#cdd2dcff
  • titleBar.activeBackground#0f1115ff
  • titleBar.activeForeground#eef1f6ff
  • titleBar.border#1b1e25ff
  • titleBar.inactiveBackground#0c0e11ff
  • titleBar.inactiveForeground#b1b6c4ff
  • window.activeBorder#1b1e25ff
  • window.inactiveBorder#1b1e25ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#abb2bf
comment, punctuation.definition.comment#7f848e
comment.block.documentation#8e929b
keyword, storage.type, storage.modifier, keyword.control#c678dd
string, punctuation.definition.string#98c379
constant.character.escape#56b6c2
string.regexp#98c379
string.special, constant.other.placeholder#d19a66
constant, support.constant, variable.language#d19a66
constant.numeric#d19a66
constant.language.boolean#d19a66
variable, meta.definition.variable#abb2bf
variable.language.this, variable.language.self, variable.predefined#e06c75
entity.name.function, support.function, meta.function-call#61afef
entity.name.function.constructor, meta.constructor#61afef
entity.name.type, support.type, support.class, storage.type#e5c07b
variable.other.property, meta.object-literal.key, support.type.property-name#e06c75
entity.name.tag, meta.tag.sgml#e06c75
entity.other.attribute-name#61afef
keyword.operator#56b6c2
punctuation#abb2bf
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#abb2bf
meta.preprocessor, keyword.control.directive#c678dd
Atomic-Dark Theme by thekodeking - VS Code Theme