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#1c1d26
  • activityBar.foreground#f2e5bc
  • activityBarBadge.background#d79921
  • activityBarBadge.foreground#f9f5d7
  • badge.background#458588
  • button.background#d79921
  • button.foreground#f9f5d7
  • dropdown.background#1c1d26
  • editor.background#242424
  • editor.findMatchBackground#ffffff22
  • editor.findMatchHighlightBackground#ffffbe55
  • editor.findRangeHighlightBackground#ffffff22
  • editor.foreground#f2e5bc
  • editor.inactiveSelectionBackground#ffffff22
  • editor.lineHighlightBackground#272836
  • editor.selectionBackground#60daff47
  • editor.selectionHighlightBackground#ffffbe55
  • editor.wordHighlightBackground#00000033
  • editor.wordHighlightStrongBackground#090e3577
  • editorBracketHighlight.foreground1#cc241d
  • editorBracketHighlight.foreground2#b16286
  • editorBracketHighlight.foreground3#458588
  • editorBracketHighlight.foreground4#689d6a
  • editorBracketHighlight.foreground5#98971a
  • editorBracketHighlight.foreground6#d79921
  • editorBracketHighlight.unexpectedBracket.foreground#ffffff
  • editorCursor.foreground#f42c3e
  • editorGroupHeader.tabsBackground#1c1d26
  • editorGutter.background#242424
  • editorWidget.background#272836
  • extensionButton.prominentBackground#599442
  • focusBorder#3e588c
  • foreground#f2e5bc
  • gitDecoration.conflictingResourceForeground#f42c3e
  • gitDecoration.ignoredResourceForeground#3e588c
  • gitDecoration.modifiedResourceForeground#fabd2f
  • gitDecoration.untrackedResourceForeground#7ec16e
  • input.background#181921
  • input.border#272836
  • list.activeSelectionBackground#313242
  • list.focusBackground#313242
  • list.hoverBackground#313242
  • list.inactiveSelectionBackground#313242
  • menu.background#ff0000
  • peekView.border#3e588c
  • peekViewEditor.background#21222d
  • peekViewResult.background#21222d
  • peekViewResult.selectionBackground#3e588c
  • scrollbarSlider.activeBackground#ff704250
  • sideBar.background#1a1a1a
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#21222d
  • statusBar.background#1c1d26
  • statusBar.foreground#f2e5bc
  • statusBar.noFolderBackground#1c1d26
  • tab.activeBackground#21222d
  • tab.activeForeground#f2e5bc
  • tab.inactiveBackground#1c1d26
  • terminal.ansiBlack#1d2021
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#99c6ca
  • terminal.ansiBrightCyan#7ec16e
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#d3869b
  • terminal.ansiBrightRed#f42c3e
  • terminal.ansiBrightWhite#ebdbb2
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#181921
  • terminal.foreground#ebdbb2
  • titleBar.activeBackground#242420
  • titleBar.activeForeground#f2e5bc
  • window.activeBorder#b8a300
  • window.inactiveBorder#0b1213

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#458588—
comment, punctuation.definition.comment#506899italic
constant, variable.arguments#D3869B—
constant.rgb-value#EBDBB2—
entity.name.selector#7EC16E—
entity.other.attribute-name#7EC16E—
entity.other.attribute-name.css#FE8019—
invalid#CC241D—
markup.underline—underline
markup.bold#FE8019bold
markup.heading#FE8019bold
markup.italic—italic
markup.inserted#B8BB26—
markup.deleted#D65D0E—
markup.changed#FE8019—
markup.punctuation.quote.beginning#98971A—
markup.punctuation.list.beginning#99C6CA—
markup.inline.raw#D65D0E—
meta.selector#7EC16E—
#D79921—
meta.preprocessor#FE8019—
meta.preprocessor.string#B8BB26—
meta.preprocessor.numeric#B8BB26—
meta.structure.dictionary.key.python#689D6A—
meta.header.diff#FE8019—
storage#F42C3E—
storage.modifier#FE8019—
string#B8BB26—
string.tag#B8BB26—
string.value#B8BB26—
string.regexp#FE8019—
string.escape#F42C3E—
string.quasi#7EC16E—
string.entity#B8BB26—
object#EBDBB2—
module.node#99C6CA—
support.type.property-name#FABD2F—
keyword#F42C3E—
keyword.control#F42C3E—
keyword.control.module#7EC16E—
keyword.control.less#D79921—
keyword.operator#7EC16E—
keyword.operator.new#FE8019—
keyword.other.unit#B8BB26—
metatag.php#FE8019—
support.function.git-rebase#689D6A—
constant.sha.git-rebase#B8BB26—
storage.modifier.import.java, storage.modifier.package.java#EBDBB2—
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, storage.type.java, variable.class#FABD2F—
variable.this#D3869B—
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#FABD2F—
storage.type.function, entity.function, entity.name.function.static#7EC16E—
variable.language#D3869Bitalic
entity.name.function.function-call#7EC16E—
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689D6A—
brace#D5C4A1—
meta.parameter.type.variable, variable.parameter, variable, variable.name, variable.other#99C6CA—
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#D65D0E—
prototype#D3869B—
storage.type.class#F42C3E—
support.type.property-name.css#FABD2F—
meta.property-group, support.constant.property-value.css#B8BB26—
entity.name.tag, punctuation.tag#FABD2F—
punctuation#EBDBB2—
punctuation.quasi#F42C3E—
comment#505664—
punctuation.definition.comment#505664—
punctuation.definition.comment#505664—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—