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#1E1D1E
  • activityBar.foreground#CACCCA
  • activityBar.inactiveForeground#9E9E9E
  • activityBarBadge.background#307BF6
  • activityBarBadge.foreground#ffffff
  • button.background#373636
  • button.foreground#CACCCA
  • button.hoverBackground#353436
  • debugToolBar.background#131313
  • diffEditor.insertedTextBackground#0C461966
  • diffEditor.removedTextBackground#46190C66
  • editor.background#131313
  • editor.foreground#DDDDDD
  • editor.lineHighlightBackground#272727
  • editor.wordHighlightBackground#55b4d333
  • editor.wordHighlightStrongBackground#fead6633
  • editorError.background#46190C
  • editorGutter.background#131313
  • editorHint.background#0C194D
  • editorInfo.background#0C194D
  • editorLineNumber.activeForeground#DDDDDD
  • editorLineNumber.foreground#8F8F8F
  • editorRuler.foreground#3A3A3A
  • editorWarning.background#3A310E
  • editorWhitespace.foreground#5D5945
  • input.background#131313
  • input.border#404040
  • input.foreground#CACCCA
  • input.placeholderForeground#9E9E9E
  • list.activeSelectionBackground#353436
  • list.activeSelectionForeground#DDDDDD
  • list.focusOutline#3A3A3A
  • list.hoverBackground#353436
  • list.inactiveSelectionBackground#474646
  • panel.background#1E1D1E
  • panel.border#404040
  • panelTitle.activeForeground#DDDDDD
  • panelTitle.inactiveForeground#9E9E9E
  • scrollbarSlider.activeBackground#5C5D5D
  • scrollbarSlider.background#4C4D4DAA
  • scrollbarSlider.hoverBackground#4C4D4D
  • sideBar.background#1E1D1E
  • sideBar.foreground#CACCCA
  • sideBarSectionHeader.background#232323
  • sideBarSectionHeader.foreground#CACCCA
  • statusBar.background#272727
  • statusBar.foreground#CACCCA
  • statusBar.noFolderBackground#272727
  • tab.activeBackground#131313
  • tab.activeForeground#DDDDDD
  • tab.border#404040
  • tab.inactiveBackground#232323
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlack#E8E4CF
  • terminal.ansiBlue#082190
  • terminal.ansiBrightBlack#57564F
  • terminal.ansiBrightBlue#81A9F6
  • terminal.ansiBrightCyan#5BDFD8
  • terminal.ansiBrightGreen#9DE478
  • terminal.ansiBrightMagenta#D86DE9
  • terminal.ansiBrightRed#DD6F61
  • terminal.ansiBrightWhite#3A3A3A
  • terminal.ansiBrightYellow#857F5C
  • terminal.ansiCyan#3DB6B0
  • terminal.ansiGreen#76BA53
  • terminal.ansiMagenta#AE30C2
  • terminal.ansiRed#A8473B
  • terminal.ansiWhite#131313
  • terminal.ansiYellow#E1D797
  • terminal.background#131313
  • terminal.foreground#E8E4CF
  • textLink.foreground#307BF6
  • titleBar.activeBackground#1E1D1E
  • titleBar.activeForeground#CACCCA
  • titleBar.inactiveBackground#1E1D1E
  • titleBar.inactiveForeground#9E9E9E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9E9E9E—
comment.block.documentation#9E9E9E—
string#62BA46—
string.quoted, string.regexp, string.interpolated, string.template#62BA46—
string.escape#62BA46—
string.special#E1D797—
string.other.link#307BF6—
constant#E1D797—
constant.numeric#E1D797—
constant.language.boolean#E1D797—
constant.character.escape#E1D797—
constant.other.placeholder#E1D797—
constant.other.symbol#E1D797—
entity.name.function#fdd888—
support.function#fdd888—
meta.function-call#CACCCA—
variable.parameter.function#CACCCA—
entity.name.type#c75828—
entity.name.type.class#c75828—
entity.other.inherited-class#c75828—
keyword#c28b12—
storage.type, storage.modifier#c28b12—
keyword.operator.accessor#c28b12—
variable#CACCCA—
variable.other.property#CACCCA—
variable.other.object.property#CACCCA—
variable.language#E19773—
variable.language.this#E19773—
variable.language.self#E19773—
entity.name.tag#b5af9a—
meta.tag.structure#b5af9a—
entity.other.attribute-name#e7cb8f—
meta.attribute#e7cb8f—
entity.name.tag.css#b5af9a—
entity.other.attribute-name.class.css#e7cb8f—
entity.other.attribute-name.id.css#e7cb8f—
source.css#CACCCA—
meta.attribute-selector.scss#e7cb8f—
support.type.property-name.json#9E9E9E—
meta.embedded#CACCCA—
support.constant.property-value#CACCCA—
markup.heading#fdd888bold
markup.bold—bold
markup.italic—italic
markup.literal#E1D797—
meta.link#7faef9italic
meta.link.inline.markdown#307BF6underline
token.info-token#316bcd—
token.warn-token#cd9731—
token.error-token#cd3131—
Classic macOS Theme (Zed Port) by CHENJIE - VS Code Theme