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#202835
  • button.background#5b968b
  • button.foreground#1b97b6
  • button.hoverBackground#69afa2
  • diffEditor.insertedTextBackground#1e343a
  • diffEditor.removedTextBackground#27263d
  • dropdown.background#090a0c
  • dropdown.border#385768
  • dropdown.foreground#afbace
  • editor.background#181d25
  • editor.findMatchBackground#00ff001a
  • editor.findMatchBorder#14964b
  • editor.findMatchHighlightBackground#0000
  • editor.findMatchHighlightBorder#0F7018
  • editor.findRangeHighlightBackground#00ff550a
  • editor.foreground#8593ac
  • editor.hoverHighlightBackground#1d2a38
  • editor.inactiveSelectionBackground#1d2a38
  • editor.lineHighlightBackground#151920
  • editor.rangeHighlightBackground#00ff001a
  • editor.selectionBackground#00c3ff1c
  • editor.selectionHighlightBackground#46dbff12
  • editor.selectionHighlightBorder#46dbff3b
  • editor.wordHighlightBackground#0000
  • editor.wordHighlightBorder#186092
  • editor.wordHighlightStrongBackground#0000
  • editor.wordHighlightStrongBorder#4F3A73
  • editorBracketMatch.background#5ff2
  • editorBracketMatch.border#0000
  • editorCursor.foreground#98A6BF
  • editorError.foreground#ff5555
  • editorGroup.dropBackground#11151c
  • editorGroupHeader.tabsBackground#262f3f
  • editorHoverWidget.background#262f3f
  • editorHoverWidget.border#334159
  • editorIndentGuide.background#2f3847
  • editorInfo.foreground#4397f7
  • editorLineNumber.activeForeground#03a1d1
  • editorLineNumber.foreground#272f3b
  • editorLink.activeForeground#1AC1DE
  • editorOverviewRuler.bracketMatchForeground#5ff6
  • editorOverviewRuler.findMatchForeground#14964baa
  • editorOverviewRuler.wordHighlightForeground#1882ccaa
  • editorOverviewRuler.wordHighlightStrongForeground#6d3dbfaa
  • editorSuggestWidget.background#262f3f
  • editorSuggestWidget.border#334159
  • editorSuggestWidget.highlightForeground#abd
  • editorSuggestWidget.selectedBackground#334159
  • editorSuggestWidget.selectedForeground#fff
  • editorUnnecessary.foreground#3a3494
  • editorWarning.foreground#a050b4
  • editorWhitespace.foreground#2f3847
  • editorWidget.background#181D26
  • focusBorder#143f7400
  • foreground#636e7e
  • gitDecoration.conflictingResourceForeground#8866aa
  • gitDecoration.deletedResourceForeground#cc8899
  • gitDecoration.ignoredResourceForeground#778899
  • gitDecoration.modifiedResourceForeground#55aacc
  • input.background#090a0c
  • input.border#385768
  • inputOption.activeBorder#385768
  • list.activeSelectionBackground#161a22
  • list.activeSelectionForeground#b9ddee
  • list.dropBackground#262f3f
  • list.errorForeground#ff5555
  • list.focusBackground#262f3f
  • list.hoverBackground#262f3f
  • list.inactiveSelectionBackground#161a22
  • list.inactiveSelectionForeground#b9ddee
  • list.warningForeground#a050b4
  • menu.background#1b2330
  • menu.selectionBackground#4b5b79
  • menu.separatorBackground#4b5b79
  • menubar.selectionBackground#202939
  • minimap.findMatchHighlight#09680C
  • scrollbarSlider.activeBackground#3586
  • scrollbarSlider.background#6ac2
  • scrollbarSlider.hoverBackground#6ac4
  • sideBar.background#1b2330
  • sideBarSectionHeader.background#262f3f
  • statusBar.background#2e6391
  • statusBar.debuggingBackground#2d917d
  • tab.border#262f3f
  • tab.inactiveBackground#262f3f
  • titleBar.activeBackground#181D26
  • titleBar.inactiveBackground#262f3f
  • widget.shadow#090a0c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.namespace#518aa1
token, meta.property-list#98A6BF
comment, puncutuation.definition.comment, puncutuation.definition.comment.json, comment.line.double-slash#3e4a5fitalic
string, punctuation.definition.string, string.regexp punctuation.definition.string, meta.attribute-selector#10a4e9
constant.numeric, keyword.other.unit, keyword.operator.quantifier#3e9dddbold
entity.name.scope-resolution#2f8273
meta.structure#7fb5e0
punctuation.separator.pointer-access#2f8273
source variable, source support.variable#4f7aa1
variable.other.property, variable.other.object.property#556bce
property, support.type.property-name, meta.object-literal.key, meta.type.tuple, entity.name.label, variable.object.property#556bce
support.variable.property#556bce
keyword.operator, punctuation.separator.pointer#5dabd8
variable.parameter#0d74b9
keyword.control, keyword.control punctuation, keyword.other#517bd6bold
entity.name.function, storage.type.class.jsdoc, meta.decorator variable, punctuation.decorator, punctuation.definition.block.tag.jsdoc, keyword.command, entity.name.function.definition.cpp#008bad
support.function#187e7e
source variable.other.constant#549ad6
constant.language, support.type.primitive, support.type.builtin#0086ff
support.constant.property-value#0086ff
constant.character, constant.other#0086ff
punctuation.support.type.property-name, meta.object-literal.key punctuation.definition.string#465e9e
support.type.vendored.property-name#537acc
variable.other.jsdoc#657dbf
meta.object-literal.key#657dbf
variable.other.enummember#657dbf
entity.other.attribute-name#657dbf
entity.other.attribute-name.class#5c79ff
entity.other.attribute-name.class punctuation#5c79ff
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation#3d8bff
entity.name.label#3d8bff
punctuation.separator.label#2a6ac9
keyword.other.important#309eb3
storage, storage.type, keyword.operator.new#389dc5bold
variable.language.this#549ad6
variable.language.super#549ad6
entity.name.tag.reference#52708b
entity.name.class, entity.name.type, entity.other.inherited-class, support.class.builtin#3caaaebold
source.css#495c80
entity.name.tag#5eb593
entity.name.type.module#2f8273
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-element punctuation#2f8273
keyword.operator.expression#1d93ab
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-class punctuation#207698
meta.at-rule.keyframes entity.other.attribute-name#207698
support.constant#52708b
invalid#f8f8f0
invalid.deprecated#f8f8f0
Aozora by Jennifer Ong - VS Code Theme