Skip to main content
Coding Theme

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.activeBorder#d97757
  • activityBar.background#0f0f0f
  • activityBar.foreground#d97757
  • activityBarBadge.background#7eb6d9
  • activityBarBadge.foreground#ffffff
  • button.background#7eb6d9
  • button.foreground#ffffff
  • button.hoverBackground#6ba3c7
  • button.secondaryBackground#404040
  • button.secondaryForeground#7eb6d9
  • button.secondaryHoverBackground#4a4a4a
  • dropdown.background#2a2a2a
  • dropdown.foreground#ffffff
  • editor.background#1a1a1a
  • editor.findMatchBackground#664422
  • editor.findMatchHighlightBackground#553311
  • editor.foreground#e8e8e8
  • editor.lineHighlightBackground#2a2a2a
  • editor.selectionBackground#404040
  • editor.selectionHighlightBackground#353535
  • input.background#2a2a2a
  • input.border#404040
  • input.foreground#ffffff
  • list.activeSelectionBackground#404040
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#353535
  • panel.background#161616
  • panel.border#2a2a2a
  • ports.iconRunningProcessForeground#7eb6d9
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#404040
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#141414
  • sideBar.border#2a2a2a
  • sideBar.foreground#9d88a8
  • statusBar.background#d97757
  • statusBar.foreground#2a2a2a
  • statusBar.noFolderBackground#d97757
  • statusBarItem.prominentBackground#7eb6d9
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#6ba3c7
  • statusBarItem.remoteBackground#7eb6d9
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#6ba3c7
  • tab.activeBackground#1a1a1a
  • tab.activeForeground#7eb6d9
  • tab.border#2a2a2a
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#999999
  • terminal.background#1a1a1a
  • terminal.foreground#e8e8e8
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#141414
  • welcomePage.progress.background#404040
  • welcomePage.progress.foreground#7eb6d9
  • welcomePage.tileBackground#2a2a2a
  • welcomePage.tileBorder#404040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#888888italic
keyword, storage.type, storage.modifier#d97757bold
entity.name.function, support.function#7eb6d9italic
string, string.quoted#90c695
constant.numeric#e8a87c
variable, variable.parameter#e8e8e8
constant.language, support.constant, constant.character, constant.escape#c7a7d9
keyword.operator, punctuation#d4d4d4
entity.name.class, entity.name.type, support.type, support.class#f0c674
entity.other.attribute-name, variable.other.property#81c784
keyword.operator.pipe.r#d97757bold
keyword.operator.assignment.r#d97757
entity.name.function.decorator.python, punctuation.definition.decorator.python#c7a7d9
entity.name.function.python, meta.function.python#7eb6d9italic
meta.function-call.python, meta.function-call.generic.python#7eb6d9
entity.name.type.class.python, support.type.python#f0c674
variable.language.special.self.python, variable.language.special.cls.python#d97757italic
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#c7a7d9
support.function.magic.python#c7a7d9italic
support.function.builtin.python#7eb6d9
keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python#d97757bold
constant.character.format.placeholder.other.python, meta.fstring.python#e8a87c
meta.function.parameters.python support.type.python, meta.function.return-type.python#f0c674
variable.parameter.function.language.python#e8e8e8
support.type.exception.python#d97757
constant.language.python#c7a7d9
meta.import.python, meta.import-name.python#81c784
Conversational Dark by Nathen Byford - VS Code Theme