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#0c1914
  • activityBar.foreground#dbf8eb
  • activityBarBadge.background#ff7a00
  • activityBarBadge.foreground#0f1513
  • button.background#39cb83
  • button.foreground#0f1513
  • editor.background#0f1513
  • editor.foreground#dbf8eb
  • editor.lineHighlightBackground#16201d
  • editor.selectionBackground#1e3a2f
  • editorCursor.foreground#ff7a00
  • editorInlayHint.background#3e3021
  • editorInlayHint.foreground#9b7b5c
  • editorLineNumber.activeForeground#2b91af
  • editorLineNumber.foreground#2b91af
  • editorWhitespace.foreground#204852
  • focusBorder#ff7a00
  • menu.background#303031
  • menu.foreground#CCCCCC
  • ports.iconRunningProcessForeground#369432
  • sideBar.background#0c1914
  • sideBar.foreground#9ac0ad
  • statusBar.background#0c1914
  • statusBar.debuggingBackground#ff4d64
  • statusBar.foreground#9ac0ad
  • tab.activeBackground#0f1513
  • tab.activeForeground#dbf8eb
  • tab.inactiveBackground#0c1914
  • tab.inactiveForeground#9ac9ad
  • terminal.background#0f1513
  • terminal.foreground#dbf8eb
  • terminal.inactiveSelectionBackground#3A3D41
  • titleBar.activeBackground#0c1914
  • titleBar.activeForeground#dbf8eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier, keyword.operator.noexcept#ff7a00
string#d100ff
constant.numeric#28a7ff
comment, punctuation.definition.comment#ff4d64italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#7a63ff
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#ff3f57
variable, variable.other, variable.other.property, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#dbf8eb
support.type.property-name#ff7a00
entity.name.tag, punctuation.definition.tag#ff3f57
entity.other.attribute-name, variable.other.constant, variable.other.enummember#7a63ff
keyword.operator, punctuation#9ac0ad
constant.regexp#646695
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#dcdcaa
keyword.operator.quantifier.regexp#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#ce9178
keyword.control.comment.special.note#f872fc
keyword.control.comment.special.todo#ffa200
keyword.control.comment.special.fixme#ff2a00
keyword.control.comment.special.hack#fff700
keyword.control.comment.special.bug#00ff6e
keyword.control.comment.special.xxx#ffa200
keyword.control.comment.special.nb#ee00ff
keyword.control.comment.symbol.tilde#00FFCC
keyword.control.comment.structure.divider#565656
keyword.control.comment.symbol.exclamation#ff0000
keyword.control.comment.symbol.at#fff700
keyword.control.comment.symbol.pound#d48686
keyword.control.comment.symbol.cash#00ff00
keyword.control.comment.symbol.percent#00ffff
keyword.control.comment.symbol.caret#ffaa00
keyword.control.comment.symbol.ampersand#d2a1fa
keyword.control.comment.symbol.asterisk, keyword.control.comment.symbol.minus, keyword.control.comment.symbol.plus, keyword.control.comment.symbol.equals, keyword.control.comment.symbol.multiply, keyword.control.comment.symbol.divide, keyword.control.comment.symbol.bullet, keyword.control.comment.symbol.bullet-sharp#ff6600
keyword.control.comment.symbol.pipe, keyword.control.comment.symbol.colon, keyword.control.comment.symbol.semicolon, keyword.control.comment.symbol.broken-pipe, keyword.control.comment.symbol.bdc-horizontal, keyword.control.comment.symbol.bdc-vertical, keyword.control.comment.symbol.bdc-down-right, keyword.control.comment.symbol.bdc-down-left, keyword.control.comment.symbol.bdc-up-right, keyword.control.comment.symbol.bdc-up-left, keyword.control.comment.symbol.bdc-vertical-right, keyword.control.comment.symbol.bdc-vertical-left, keyword.control.comment.symbol.bdc-horizontal-down, keyword.control.comment.symbol.bdc-horizontal-up, keyword.control.comment.symbol.bdc-vertical-horizontal, keyword.control.comment.symbol.bdc-down-right-arc, keyword.control.comment.symbol.bdc-down-left-arc, keyword.control.comment.symbol.bdc-up-left-arc, keyword.control.comment.symbol.bdc-up-right-arc#565656
keyword.control.comment.symbol.greaterthan#a7a7a7
keyword.control.comment.symbol.question#3ed03e
keyword.control.comment.symbol.backslash#669988
keyword.control.comment.symbol.lessthan#996688
keyword.control.comment.symbol.grave#343434
keyword.control.comment.symbol.section#abcabc
keyword.control.comment.symbol.pilcrow#ccff99
keyword.control.comment.symbol.generic#ff00ff
keyword.control.comment.symbol.single-right-pointing-angle-quote, keyword.control.comment.symbol.single-left-pointing-angle-quote, keyword.control.comment.symbol.double-right-pointing-angle-quote, keyword.control.comment.symbol.double-left-pointing-angle-quote#aa33aa
TG11 Cyberpunk Pack by TG11 - VS Code Theme