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#21222d
  • 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
  • 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
  • peekView.border#3e588c
  • peekViewEditor.background#21222d
  • peekViewResult.background#21222d
  • peekViewResult.selectionBackground#3e588c
  • sideBar.background#1C1D26
  • sideBar.foreground#fbf1c7
  • 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#1C1D26
  • titleBar.activeForeground#f2e5bc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
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.underlineunderline
markup.bold#fe8019bold
markup.heading#fe8019bold
markup.italicitalic
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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Popping and Locking Theme - Coding Theme