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#222222
  • activityBar.foreground#C2C2B0
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#5F875F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#5F875F
  • badge.foreground#FFFFFF
  • button.background#5F875F
  • button.foreground#FFFFFF
  • button.hoverBackground#5F875FCC
  • diffEditor.insertedTextBackground#5F875F20
  • diffEditor.removedTextBackground#68574220
  • dropdown.background#1E1E1E
  • dropdown.foreground#C2C2B0
  • editor.background#222222
  • editor.findMatchBackground#C9A55450
  • editor.findMatchHighlightBackground#C9A55430
  • editor.findRangeHighlightBackground#5F875F20
  • editor.foreground#C2C2B0
  • editor.inactiveSelectionBackground#5F875F20
  • editor.selectionBackground#5F875F40
  • editor.selectionHighlightBackground#5F875F30
  • editor.wordHighlightBackground#BB774420
  • editor.wordHighlightStrongBackground#BB774440
  • editorBracketHighlight.foreground1#A38A45
  • editorBracketHighlight.foreground2#A38A45
  • editorBracketHighlight.foreground3#A38A45
  • editorBracketHighlight.foreground4#A38A45
  • editorBracketHighlight.foreground5#A38A45
  • editorBracketHighlight.foreground6#A38A45
  • editorBracketHighlight.unexpectedBracket.foreground#DD100C
  • editorCursor.foreground#C2C2B0
  • editorGroup.border#1E1E1E
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorLineNumber.activeForeground#C2C2B0
  • editorLineNumber.foreground#666666
  • foreground#C2C2B0
  • gitDecoration.addedResourceForeground#5F875F
  • gitDecoration.conflictingResourceForeground#B36D43
  • gitDecoration.deletedResourceForeground#685742
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#C9A554
  • gitDecoration.stageModifiedResourceForeground#AE9164
  • gitDecoration.untrackedResourceForeground#5F875F
  • input.background#1E1E1E
  • input.foreground#C2C2B0
  • input.placeholderForeground#666666
  • inputOption.activeBorder#5F875F
  • list.activeSelectionBackground#5F875F40
  • list.activeSelectionForeground#C2C2B0
  • list.highlightForeground#5F875F
  • list.hoverBackground#5F875F20
  • list.inactiveSelectionBackground#5F875F20
  • list.inactiveSelectionForeground#C2C2B0
  • panel.background#222222
  • panel.border#1E1E1E
  • panelTitle.activeForeground#C2C2B0
  • panelTitle.inactiveForeground#666666
  • peekView.border#5F875F
  • peekViewEditor.background#1E1E1E
  • peekViewEditor.matchHighlightBackground#C9A55450
  • peekViewResult.background#1E1E1E
  • peekViewResult.matchHighlightBackground#C9A55450
  • peekViewResult.selectionBackground#5F875F40
  • peekViewTitle.background#222222
  • progressBar.background#5F875F
  • sideBar.background#1E1E1E
  • sideBar.foreground#C2C2B0
  • sideBarSectionHeader.background#222222
  • sideBarSectionHeader.foreground#C2C2B0
  • sideBarTitle.foreground#C2C2B0
  • statusBar.background#222222
  • statusBar.debuggingBackground#BB7744
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#C2C2B0
  • statusBar.noFolderBackground#222222
  • tab.activeBackground#2A2A2A
  • tab.activeForeground#C2C2B0
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#666666
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#C2C2B0
  • titleBar.inactiveBackground#1E1E1E
  • titleBar.inactiveForeground#666666

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
comment storage.type.class.jsdoc, comment punctuation.definition.block.tag.jsdoc, comment storage.type.class.jsdoc punctuation.definition.inline.tag.jsdoc, comment entity.name.type.instance.jsdoc, comment punctuation.definition.bracket.angle.begin.jsdoc, comment punctuation.definition.bracket.angle.end.jsdoc, comment punctuation.definition.bracket.curly.begin.jsdoc, comment punctuation.definition.bracket.curly.end.jsdoc, comment storage.type.class.javadoc, comment variable.other.jsdoc#9B7E62italic
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.readwrite.ts, variable.other.readwrite.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.js, variable.other.object.ts, variable.other.object.js, meta.block variable.other, string constant.other.placeholder, meta.export.ts meta.block.ts variable.other.readwrite.ts#B3A97F
variable.other.constant, variable.other.constant.ts, variable.other.constant.object#B3A97F
variable.other.property, variable.other.object.property#D7C483
variable.parameter#D5B56Bitalic
variable.language#947652italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#BB7744
storage.type, storage.modifier#BB7744
keyword.operator#B36D43
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#A38A45
storage.type.type, storage.type.type.ts, storage.type.interface.ts, storage.type.class.ts, meta.export storage.type.type.ts, meta.block storage.type.type.ts, meta.export meta.block storage.type.type.ts, meta.export.ts storage.type.type.ts, meta.export.declaration.ts storage.type.type.ts, meta.block.ts storage.type.type.ts, meta.export.ts meta.block.ts storage.type.type.ts, keyword.other.type, keyword.control.type, storage.modifier.type, source.ts storage.type.type#BB7744
entity.name.type, entity.name.type.ts, entity.name.type.alias, entity.name.type.alias.ts, entity.name.type.class, entity.name.type.class.ts, entity.name.type.interface, entity.name.type.interface.ts, entity.name.type.module, entity.name.type.module.ts, meta.block.ts storage.type.type.ts + variable.other.readwrite.ts, meta.export.declaration.ts meta.block.ts storage.type.type.ts variable.other.readwrite.ts#8DA26C
support.type, support.class, support.type.sys-types#8DA26C
constant.numeric, keyword.other.unit#C9A554
constant.language, support.constant, constant.character, constant.escape, keyword.other#C9A554
constant.other.color#D7C483
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#5F875F
string.regexp#C9A554
constant.character.escape#C9A554
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#78824B
entity.name.method.js, meta.class-method.js entity.name.function.js, variable.function.constructor#78824Bitalic
entity.name, entity.name.class, entity.name.type.class#8DA26C
entity.other.inherited-class#5F875F
support.other.namespace.use.php, meta.use.php, support.other.namespace.php#8DA26C
entity.name.tag, meta.tag.sgml#9B7E62
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#D7C483italic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#78824B
entity.other.attribute-name.class#D7C483
source.sass keyword.control, entity.other.attribute-name.id#78824B
variable.other.readwrite.js, variable.other.object.js, variable.other.class.js#B3A97F
entity.name.module.js, variable.import.parameter.js#685742
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#78824Bitalic
source.js constant.other.object.key.js string.unquoted.label.js#685742italic
source.json meta.structure.dictionary.json support.type.property-name.json#BB7744
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D7C483
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C9A554
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#685742
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B36D43
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#78824B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B36D43
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#BB7744
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5F875F
comment.line.number-sign.toml, punctuation.definition.comment.toml#666666italic
entity.name.section.toml, entity.name.tag.toml#5F875F
entity.name.section.array.table.toml#5F875F
variable.other.key.toml#BB7744
string.quoted.double.toml, string.quoted.single.toml, string.literal.toml#5F875F
constant.numeric.integer.toml, constant.numeric.float.toml#C9A554
constant.language.boolean.toml#C9A554
constant.other.time.datetime.offset.toml, constant.other.time.datetime.local.toml, constant.other.time.date.local.toml, constant.other.time.time.local.toml, constant.other.date, constant.other.timestamp#C9A554
punctuation.definition.table.toml, punctuation.definition.table.begin.toml, punctuation.definition.table.end.toml, punctuation.definition.array.table.begin.toml, punctuation.definition.array.table.end.toml, punctuation.definition.array.toml, punctuation.separator.key-value.toml#A38A45
text.html.markdown, punctuation.definition.list_item.markdown#C2C2B0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#5F875F
text.html.markdown markup.inline.raw.markdown#BB7744
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#666666
markup.italic#B36D43italic
markup.bold, markup.bold string#B36D43bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#B36D43bold italic
markup.underline#C9A554underline
markup.quote punctuation.definition.blockquote.markdown#666666
markup.quoteitalic
string.other.link.title.markdown#78824B
string.other.link.description.title.markdown#BB7744
constant.other.reference.link.markdown#D7C483
markup.raw.block#BB7744
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#C2C2B0
variable.language.fenced.markdown#666666
meta.separator#666666bold
markup.table#C2C2B0
markup.changed, markup.changed.git_gutter#BB7744
markup.deleted, markup.deleted.git_gutter#685742
markup.inserted, markup.inserted.git_gutter#5F875F
invalid, invalid.illegal#685742
*url*, *link*, *uri*underline
cha theme by cha-theme - VS Code Theme