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.activeBackground#969FE0
  • activityBar.background#B5BBE7
  • activityBar.border#B5BBE7
  • activityBar.foreground#262734
  • activityBar.inactiveForeground#262734
  • button.background#24a148
  • button.hoverBackground#a04828
  • editor.background#F4F4F4
  • editor.foreground#161616
  • editor.lineHighlightBackground#fcf4d6
  • editorGroupHeader.tabsBackground#B5BBE7
  • editorGroupHeader.tabsBorder#21272A
  • focusBorder#EDE6DA
  • input.background#EDE6DA
  • input.border#21272A
  • inputOption.activeForeground#B8522E
  • notificationToast.border#21272A
  • panel.background#EDE6DA
  • panel.border#21272A
  • panelTitle.activeBorder#B8522E
  • sideBar.background#E4E4F2
  • sideBar.border#21272A
  • sideBar.foreground#000000
  • statusBar.background#7378D6
  • statusBar.border#7378D6
  • tab.activeBackground#F4F4F4
  • tab.activeBorder#F4F4F4
  • tab.border#21272A
  • tab.inactiveBackground#e0e0e0
  • terminal.ansiBlack#012456
  • terminal.ansiBlue#0037DA
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#3B78FF
  • terminal.ansiBrightCyan#61D6D6
  • terminal.ansiBrightGreen#16C60C
  • terminal.ansiBrightMagenta#B4009E
  • terminal.ansiBrightRed#E74856
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#F9F1A5
  • terminal.ansiCyan#3A96DD
  • terminal.ansiGreen#13A10E
  • terminal.ansiMagenta#881798
  • terminal.ansiRed#C50F1F
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#C19C00
  • terminal.background#012456
  • terminal.foreground#CCCCCC
  • terminal.selectionBackground#FFFFFF50
  • terminalCursor.foreground#FFFFFF
  • titleBar.activeBackground#EDE6DA
  • titleBar.border#21272A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.tag, support.constant.property-value, variable.object, variable.other.object, variable.other.readwrite, variable.parameter#161616
ATOM.ONE.LIGHT#383A42
constant, entity.other.attribute-name, markup.bold, keyword.other.unit, punctuation.definition.bold, punctuation.definition.constant, punctuation.definition.link, support.constant, variable.other.constant#8e6a00
ATOM.ONE.LIGHT#986801
entity.name.type, entity.other.inherited-class, support.class, variable.other.property#ba4e00
ATOM.ONE.LIGHT#C18401
entity.name.section, entity.name.tag, keyword.other.definition, markup.deleted, punctuation.definition.heading, support.type.object, support.type.property-name, support.variable, variable, variable.other.object.property, variable.other.readwrite.alias#da1e28
ATOM.ONE.LIGHT#E45649
punctuation.definition, punctuation.section.embedded, variable.interpolation#d02670
ATOM.ONE.LIGHT#CA1243
keyword.control, keyword.other, storage.modifier, keyword.operator.expression, keyword.operator.new, markup.italic, markup.underline, punctuation.definition.entity, punctuation.definition.italic, punctuation.definition.metadata, storage.type#8a3ffc
ATOM.ONE.LIGHT#A626A4
entity.name.function#0f62fe
ATOM.ONE.LIGHT#4078F2
constant.character, constant.language, constant.other, keyword.operator, storage.type.property, string.regexp, support.function, support.type#0072c3
ATOM.ONE.LIGHT#0184BC
markup.changed, markup.heading, markup.inline, markup.link, markup.list, markup.raw, markup.table, markup.untracked#007d79
ATOM.ONE.LIGHT#A0A1A7
entity.name.type.module, markup.inserted, string.quoted, string.unquoted, string.template#198038
ATOM.ONE.LIGHT#50A14F
comment.block, comment.line, markup.quote, punctuation.definition.comment, punctuation.definition.quote#6f6f6fitalic
ATOM.ONE.LIGHT#696C77
Carbon One by Gerardo Tordoya - VS Code Theme