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#1D5F6F
  • activityBar.border#ffffff15
  • activityBar.foreground#FF8FA3
  • activityBar.inactiveForeground#fff9f760
  • activityBarBadge.background#FF8FA3
  • activityBarBadge.foreground#1D5F6F
  • button.background#FF8FA3
  • button.foreground#1D5F6F
  • button.hoverBackground#FF8FA3dd
  • editor.background#1D5F6F
  • editor.foreground#fff9f7
  • editor.inactiveSelectionBackground#ff8a3d3580
  • editor.lineHighlightBackground#26333B40
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#ff8a3d35
  • editorCursor.foreground#FF8FA3
  • editorGroupHeader.tabsBackground#1D5F6Fdd
  • editorLineNumber.activeForeground#FF8FA3
  • editorLineNumber.foreground#ffd3c680
  • focusBorder#FF8FA3
  • foreground#fff9f7
  • input.background#26333B
  • input.border#ffffff15
  • input.foreground#fff9f7
  • input.placeholderForeground#fff9f760
  • list.activeSelectionBackground#FF8FA330
  • list.activeSelectionForeground#fff9f7
  • list.highlightForeground#FF8FA3
  • list.hoverBackground#26333B40
  • list.hoverForeground#fff9f7
  • list.inactiveSelectionBackground#FF8FA315
  • list.inactiveSelectionForeground#fff9f7
  • selection.background#ff8a3d35
  • sideBar.background#26333B
  • sideBar.border#ffffff15
  • sideBar.foreground#fff9f7
  • sideBarSectionHeader.background#1D5F6F80
  • sideBarSectionHeader.foreground#fff9f7
  • sideBarTitle.foreground#FF8FA3
  • statusBar.background#1D5F6F
  • statusBar.border#ffffff15
  • statusBar.foreground#fff9f7
  • statusBar.noFolderBackground#1D5F6F
  • tab.activeBackground#1D5F6F
  • tab.activeBorderTop#FF8FA3
  • tab.activeForeground#fff9f7
  • tab.border#ffffff15
  • tab.inactiveBackground#26333B60
  • tab.inactiveForeground#fff9f780
  • terminal.ansiBlack#1D5F6F
  • terminal.ansiBlue#ff8a3d
  • terminal.ansiCyan#67B7C9
  • terminal.ansiGreen#FF8FA3
  • terminal.ansiMagenta#FFB38E
  • terminal.ansiRed#FFB38E
  • terminal.ansiWhite#fff9f7
  • terminal.ansiYellow#67B7C9
  • terminal.background#1D5F6F
  • terminal.foreground#fff9f7
  • titleBar.activeBackground#1D5F6F
  • titleBar.activeForeground#fff9f7
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1D5F6F
  • titleBar.inactiveForeground#fff9f760
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffd3c6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#ff8a3dbold
storage.type, storage.modifier#ff8a3ditalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#FF8FA3
string, punctuation.definition.string, string.template, meta.template.expression#67B7C9
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#FFB38E
variable, variable.other.readwrite, variable.other.object#fff9f7
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#fff9f7
variable.parameter, meta.parameter#fff9f7dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#fff9f780
keyword.operator#fff9f7
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#67B7C9bold
entity.other.inherited-class#FF8FA3
entity.name.tag, punctuation.definition.tag#ff8a3d
entity.other.attribute-name#FF8FA3
meta.diff, meta.diff.header#ffd3c6
markup.deleted#FFB38E
markup.inserted#FF8FA3
markup.changed#67B7C9
markup.heading, markup.heading.setext, punctuation.definition.heading#FF8FA3bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#67B7C9
string.other.link.title, string.other.link.description#FF8FA3
markup.underline.link#ffd3c6underline
punctuation.definition.list#ff8a3d
markup.quote, punctuation.definition.quote#ffd3c6italic