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.background#383e46
  • activityBar.border#03c4a1
  • activityBar.foreground#d2d3d3
  • activityBarBadge.background#03c4a1
  • activityBarBadge.foreground#ffffff
  • editor.background#222831
  • editor.foreground#d2d3d3
  • editor.selectionBackground#383e46
  • sideBar.background#1f242c
  • sideBarTitle.foreground#d2d3d3
  • statusBar.background#1f242c
  • statusBar.border#383e46
  • statusBar.foreground#03c4a1
  • tab.activeBackground#222831
  • tab.activeBorder#03c4a1
  • tab.activeForeground#d2d3d3
  • tab.hoverBackground#383e46
  • tab.inactiveBackground#1f242c
  • tab.inactiveForeground#919498
  • terminal.ansiBlack#1F242C
  • terminal.ansiBlue#919498
  • terminal.ansiBrightBlack#222831
  • terminal.ansiBrightBlue#D2D3D3
  • terminal.ansiBrightCyan#4CD4A2
  • terminal.ansiBrightGreen#03C4A1
  • terminal.ansiBrightMagenta#F69765
  • terminal.ansiBrightRed#E8647C
  • terminal.ansiBrightWhite#EFEFEF
  • terminal.ansiBrightYellow#E9EA77
  • terminal.ansiCyan#44BF92
  • terminal.ansiGreen#027661
  • terminal.ansiMagenta#AC6A47
  • terminal.ansiRed#A24657
  • terminal.ansiWhite#D2D3D3
  • terminal.ansiYellow#A3A453
  • terminal.background#222831
  • terminal.foreground#d2d3d3
  • terminal.selectionBackground#4E535A
  • terminal.selectionForeground#EFEFEF
  • terminalCursor.background#1F242C
  • terminalCursor.foreground#03C4A1
  • titleBar.activeBackground#222831
  • titleBar.border#383e46
  • titleBar.inactiveBackground#1f242c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4E5A65—
entity.name.function#03C4A1—
storage.type#027661—
keyword.control.import, keyword.control.from, keyword.control.as, keyword.control.export, keyword.control.default#027661—
meta.import#919498—
variable.other.readwrite.alias#D2D3D3—
variable.parameter#D2D3D3—
constant.language.boolean, constant.numeric#AC6A47—
string, string.quoted#919498—
punctuation.definition.string.begin, punctuation.definition.string.end#E9EA77—
keyword.operator#4CD4A2—
keyword.control.conditional#F69765—
keyword.control.flow#F69765—
storage.modifier.async, keyword.control.trycatch#F69765—
variable.other.readwrite#D2D3D3—
variable.other.object#919498—
variable.other.property#D2D3D3—
meta.object-literal#919498—
punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#919498—
meta.brace.round, meta.brace.square#64696F—
punctuation.definition.binding-pattern.object#F69765—
punctuation.definition.binding-pattern.array#4CD4A2—
punctuation.separator.comma, punctuation.terminator.statement#919498—
constant.character.escape.backslash#919498—
punctuation.definition.tag.begin, punctuation.definition.tag.end#64696F—
punctuation.section.embedded.begin, punctuation.section.embedded.end#64696F—
support.class.component#03C4A1—
entity.name.tag#027661—
meta.tag.attributes#D2D3D3—
meta.jsx.children#919498—
keyword.control.at-rule.import, keyword.control.at-rule.include#027661—
entity.other.attribute-name.id#A24657—
entity.other.attribute-name.class#d2d3d3—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#919498—
punctuation.section.property-list.begin.bracket.curly#919498—
variable#03C4A1—
support.type.property-name#64696F—
support.constant.property-value#919498—
support.function.misc#03C4A1—
JSK Theme by jskhan - VS Code Theme