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.activeBackground#191B23
  • activityBar.background#1C1E26
  • activityBar.border#1C1E26
  • activityBar.foreground#d4dbff
  • activityBar.inactiveForeground#717898
  • activityBarBadge.background#E95678
  • activityBarBadge.foreground#d4dbff
  • badge.background#f1a57f
  • badge.foreground#111317
  • button.background#E95678
  • button.foreground#d4dbff
  • button.hoverBackground#E95678
  • button.secondaryBackground#1A1C23
  • button.secondaryForeground#d4dbff
  • button.secondaryHoverBackground#4E546A
  • debugToolBar.background#111317
  • diffEditor.border#4E546A
  • diffEditor.insertedTextBackground#39F9B320
  • diffEditor.removedTextBackground#D91C4820
  • dropdown.background#3D4152
  • editor.background#1C1E26
  • editor.findMatchBackground#ffffff26
  • editor.findMatchHighlightBackground#6BDFE626
  • editor.findRangeHighlightBackground#ffffff18
  • editor.foldBackground#ffffff0A
  • editor.foreground#d4dbff
  • editor.hoverHighlightBackground#6BDFE618
  • editor.inactiveSelectionBackground#ffffff20
  • editor.lineHighlightBackground#FFFFFF05
  • editor.selectionBackground#ffffff10
  • editor.selectionHighlightBackground#ffffff30
  • editor.wordHighlightBackground#57575760
  • editor.wordHighlightStrongBackground#6BDFE626
  • editorBracketHighlight.foreground1#FFC819
  • editorBracketHighlight.foreground2#E95678
  • editorBracketHighlight.foreground3#F09483
  • editorBracketHighlight.foreground4#39F9B3
  • editorBracketHighlight.foreground5#B877DB
  • editorBracketHighlight.foreground6#6BDFE6
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#ffffff24
  • editorCodeLens.foreground#B9BCCB
  • editorCursor.background#1C1E26
  • editorCursor.foreground#B9BCCB
  • editorError.foreground#D91C48
  • editorGroup.border#4E546A
  • editorGroupHeader.tabsBackground#111317
  • editorGutter.addedBackground#39F9B3
  • editorGutter.background#1C1E26
  • editorGutter.deletedBackground#D91C48
  • editorGutter.foldingControlForeground#B9BCCB
  • editorGutter.modifiedBackground#f1a57f
  • editorHoverWidget.background#191B23
  • editorHoverWidget.border#4E546A
  • editorHoverWidget.foreground#d4dbff
  • editorIndentGuide.activeBackground#A1A5BA
  • editorIndentGuide.background#4E546A
  • editorInfo.foreground#25B0BC
  • editorLineNumber.activeForeground#B9BCCB
  • editorLineNumber.foreground#575D75
  • editorLink.activeForeground#25B0BC
  • editorOverviewRuler.border#0000
  • editorRuler.foreground#404040
  • editorSuggestWidget.background#191B23
  • editorSuggestWidget.border#4E546A
  • editorSuggestWidget.foreground#d4dbff
  • editorSuggestWidget.highlightForeground#25B0BC
  • editorSuggestWidget.selectedBackground#ffffff12
  • editorWarning.foreground#FFC60A
  • editorWhitespace.foreground#565656
  • editorWidget.background#1A1C23
  • editorWidget.foreground#B9BCCB
  • editorWidget.resizeBorder#191B23
  • focusBorder#fafafa15
  • foreground#B9BCCB
  • gitDecoration.addedResourceForeground#39F9B3
  • gitDecoration.conflictingResourceForeground#F09483
  • gitDecoration.deletedResourceForeground#E95678
  • gitDecoration.ignoredResourceForeground#57584f
  • gitDecoration.modifiedResourceForeground#f1a57f
  • gitDecoration.stageDeletedResourceForeground#E95678
  • gitDecoration.stageModifiedResourceForeground#f1a57f
  • gitDecoration.submoduleResourceForeground#1fd3fd
  • gitDecoration.untrackedResourceForeground#F09483
  • input.background#3D4152
  • input.foreground#B9BCCB
  • inputOption.activeBackground#ffffff1f
  • list.activeSelectionBackground#FFFFFF0C
  • list.activeSelectionForeground#d4dbff
  • list.dropBackground#FFFFFF08
  • list.errorForeground#D91C48
  • list.focusBackground#FFFFFF08
  • list.focusForeground#d4dbff
  • list.highlightForeground#f1a57f
  • list.hoverBackground#FFFFFF0C
  • list.hoverForeground#d4dbff
  • list.inactiveSelectionBackground#FFFFFF08
  • list.inactiveSelectionForeground#d4dbff
  • list.warningForeground#FFC60A
  • listFilterWidget.background#181915
  • listFilterWidget.noMatchesOutline#D91C48
  • menu.background#1C1E26
  • menu.foreground#B9BCCB
  • menu.selectionBackground#FFFFFF05
  • menu.selectionForeground#d4dbff
  • menu.separatorBackground#4E546A
  • menubar.selectionBackground#FFFFFF08
  • menubar.selectionForeground#d4dbff
  • merge.commonContentBackground#1C1E26
  • merge.commonHeaderBackground#191B23
  • merge.currentContentBackground#048B59
  • merge.currentHeaderBackground#06C680
  • merge.incomingContentBackground#114F55
  • merge.incomingHeaderBackground#1B7F88
  • notebook.cellBorderColor#1A1C23
  • notebook.cellEditorBackground#1C1E26
  • notebook.cellHoverBackground#1A1C23
  • notebook.cellInsertionIndicator#B9BCCB
  • notebook.cellStatusBarItemHoverBackground#ffffff20
  • notebook.cellToolbarSeparator#191B23
  • notebook.focusedCellBackground#1A1C23
  • notebook.focusedCellBorder#25B0BC
  • notebook.focusedEditorBorder#191B23
  • notebook.inactiveFocusedCellBorder#ffffff20
  • notebook.outputContainerBackgroundColor#1A1C23
  • notebook.selectedCellBackground#ffffff20
  • notebook.selectedCellBorder#ffffff20
  • notebook.symbolHighlightBackground#ffffff0b
  • notebookScrollbarSlider.activeBackground#ffffff45
  • notebookScrollbarSlider.background#ffffff12
  • notebookScrollbarSlider.hoverBackground#ffffff45
  • notebookStatusErrorIcon.foreground#D91C48
  • notebookStatusRunningIcon.foreground#4E546A
  • notebookStatusSuccessIcon.foreground#39F9B3
  • notificationCenterHeader.background#1A1C23
  • notificationCenterHeader.foreground#B9BCCB
  • notifications.background#1A1C23
  • notifications.border#1A1C23
  • notifications.foreground#B9BCCB
  • notificationsErrorIcon.foreground#D91C48
  • notificationsInfoIcon.foreground#25B0BC
  • notificationsWarningIcon.foreground#FFC819
  • panel.background#1C1E26
  • panel.border#6BDFE6
  • panelTitle.activeBorder#f1a57f
  • panelTitle.activeForeground#f1a57f
  • panelTitle.inactiveForeground#717898
  • peekView.border#4E546A
  • peekViewEditor.background#191B23
  • peekViewEditor.matchHighlightBackground#191B23
  • peekViewEditorGutter.background#191B23
  • peekViewResult.background#191B23
  • peekViewResult.fileForeground#d4dbff
  • peekViewResult.lineForeground#B9BCCB
  • peekViewResult.matchHighlightBackground#6BDFE62c
  • peekViewResult.selectionBackground#6BDFE640
  • peekViewResult.selectionForeground#d4dbff
  • peekViewTitle.background#191B23
  • peekViewTitleDescription.foreground#B9BCCB
  • peekViewTitleLabel.foreground#d4dbff
  • pickerGroup.border#191B23
  • pickerGroup.foreground#25B0BC
  • progressBar.background#15ADCB
  • scrollbar.shadow#1919197c
  • scrollbarSlider.activeBackground#ffffff45
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff45
  • selection.background#fafafa15
  • sideBar.background#191B23
  • sideBar.border#1C1E26
  • sideBar.foreground#717898
  • sideBarSectionHeader.background#2B2E3B
  • sideBarSectionHeader.foreground#d4dbff
  • sideBarTitle.foreground#B9BCCB
  • statusBar.background#1C1E26
  • statusBar.border#1C1E26
  • statusBar.debuggingBackground#F09483
  • statusBar.debuggingBorder#111317
  • statusBar.debuggingForeground#d4dbff
  • statusBar.foreground#B9BCCB
  • statusBar.noFolderBackground#E44225
  • statusBar.noFolderBorder#111317
  • statusBar.noFolderForeground#d4dbff
  • statusBarItem.hoverBackground#FFFFFF0F
  • statusBarItem.remoteBackground#E95678
  • statusBarItem.remoteForeground#d4dbff
  • tab.activeBackground#1C1E26
  • tab.activeBorderTop#E95678
  • tab.activeForeground#d4dbff
  • tab.border#00000000
  • tab.hoverForeground#d4dbff
  • tab.inactiveBackground#111317
  • tab.inactiveForeground#959AB1
  • terminal.ansiBlack#1C1E26
  • terminal.ansiBlue#25B0BC
  • terminal.ansiBrightBlack#343846
  • terminal.ansiBrightBlue#3AA6BB
  • terminal.ansiBrightCyan#6BDFE6
  • terminal.ansiBrightGreen#39F9B3
  • terminal.ansiBrightMagenta#FF99A8
  • terminal.ansiBrightRed#D91C48
  • terminal.ansiBrightWhite#d4dbff
  • terminal.ansiBrightYellow#FFC819
  • terminal.ansiCyan#3FD6DE
  • terminal.ansiGreen#06C680
  • terminal.ansiMagenta#FFC2CB
  • terminal.ansiRed#E53861
  • terminal.ansiWhite#d4dbff
  • terminal.ansiYellow#FFC60A
  • terminal.border#FFFFFF0F
  • terminal.selectionBackground#ffffff21
  • terminalCursor.foreground#d4dbff
  • textLink.activeForeground#44CDDA
  • textLink.foreground#25B0BC
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#B9BCCB
  • titleBar.inactiveBackground#1C1E26
  • titleBar.inactiveForeground#B9BCCB
  • tree.indentGuidesStroke#4E546A
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#727997italic
source.python, meta.function-call.arguments, source.js, variable.other.object.js, meta.template.expression.js, source.java, variable.other.object.java, meta.method.body.java, source.cpp, meta.body.function.definition.cpp#d4dbff
constant.other.color#B877DB
invalid, invalid.illegal#D91C48
keyword, storage.modifier, storage.modifier.java, meta.tag, keyword.operator, keyword.other.unit, keyword.other.new.php#E95678
keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.import.java, keyword.other.package.java, variable.language.this#E95678italic
punctuation.definition.arguments, punctuation.definition.parameters, punctuation.definition.list, punctuation.definition.block, punctuation.definition.section, punctuation.separator, punctuation.section, punctuation.parenthesis, punctuation.definition.dict, punctuation.definition.dictionary, meta.function.parameters.python, punctuation.definition.array, punctuation.definition.inheritance, punctuation.terminator, meta.brace, punctuation.bracket.square, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square, punctuation.bracket.round, punctuation.definition.binding-pattern.object, punctuation.accessor.js, punctuation.definition.tag, punctuation.separator.inheritance.php, meta.head.namespace.cpp, punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.math.begin.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, punctuation.other.period.go, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.definition.begin.bracket.curly.go, punctuation.definition.end.bracket.curly.go, punctuation.definition.bracket.square.go, punctuation.definition.begin.bracket.round.php, punctuation.definition.end.bracket.round.php, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, keyword.operator.access.dot.rust, punctuation.semi.rust, punctuation.brackets.round.rust, punctuation.brackets.curly.rust, punctuation.brackets.attribute.rust, punctuation.brackets.square.rust, punctuation.comma.rust#959AB1
punctuation.section.embedded#F09483
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#d4dbff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E95678
meta.function.python, meta.definition.function, meta.function.definition, meta.method.declaration.js, meta.method.java, entity.name.namespace.cpp, meta.function.php, entity.name.function.go, entity.name.function.declaration.kotlin#39F9B3
storage.type.function.arrow, storage.type.function.lambda.python, punctuation.definition.arrow.php#E95678
storage.type.function.arrow
meta.function-call, variable.function, support.function.go, meta.function.call.rust, entity.name.function.call.kotlin#6BDFE6
storage.type#E95678italic
storage.type.class#E95678italic
support.other.variable, string.other.link#39F9B3
support.constant, constant.character, constant.language, variable.other.constant, constant.escape, constant.numeric, variable.other.global.php, constant.other#B877DB
support.function.builtin, support.function.construct.output.php, support.function.construct.php, entity.name.function.macro.rust#39F9B3
meta.block variable.other#d4dbff
variable.parameter, meta.function.parameters.php#F89563italic
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#f1a57f
support.class, entity.name.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#6BDFE6
entity.other.inherited-class#6BDFE6
support.type#6BDFE6
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#d4dbff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E95678
variable.language#E95678italic
entity.name.method.js#6BDFE6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6BDFE6
entity.other.attribute-name#6BDFE6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f1a57fitalic
entity.other.attribute-name.class#39F9B3
entity.other.attribute-name.pseudo-element.css, variable.css#E95678
entity.other.attribute-name.pseudo-class.css#F09483
entity.other.attribute-name.id.css, entity.name.function.namespace-prefix.css, entity.other.namespace-prefix.css, support.function.misc.css, support.constant.media.css, support.function.calc.css, support.function.transform.css, support.function.gradient.css, support.function.url.css, support.function.shape.css#6BDFE6
entity.other.keyframe-offset.css#39F9B3
entity.other.keyframe-offset.percentage.css#B877DB
variable.argument.css#B877DB
source.sass keyword.control#6BDFE6
markup.inserted#39F9B3
markup.deleted#FF5370
markup.changed#B877DB
string.regexp#f1a57f
constant.character.escape#B877DB
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6BDFE6italic
source.js constant.other.object.key.js string.unquoted.label.js#E95678italic
variable.other.object.property.js, variable.other.constant.property.js#39F9B3
source.json meta.structure.dictionary.json support.type.property-name.json#d4dbff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6BDFE6
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#39F9B3
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#F09483
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#E95678
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#B877DB
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#d4dbff
text.html.markdown, punctuation.definition.list_item.markdown#d4dbff
text.html.markdown markup.inline.raw.markdown#B877DB
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6BDFE6
heading.1.markdown#f1a57fbold
heading.2.markdown#E95678bold
heading.3.markdown#F09483bold
heading.4.markdown#39F9B3bold
heading.5.markdown#B877DBbold
heading.6.markdown#6BDFE6bold
markup.italic#6BDFE6italic
markup.bold, markup.bold string#E95678bold
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#E95678bold
markup.underlineunderline
markup.strikethrough.markdown#B877DB
markup.quote punctuation.definition.blockquote.markdown#6BDFE6
markup.quoteitalic
punctuation.definition.list.begin.markdown#E95678
string.other.link.title.markdown#6BDFE6
markup.underline.link#f1a57fitalic
string.other.link.description.title.markdown#B877DB
constant.other.reference.link.markdown#f1a57f
markup.raw.block#B877DB
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4dbff
variable.language.fenced.markdown#CCC8B4
meta.separator#CCC8B4bold
markup.table#d4dbff
meta.function.decorator, meta.decorator.js#BFBCB0italic
string.quoted.docstring.multi.python#727997
support.variable.magic.python, support.function.magic.python#B877DB
variable.parameter.function.language.special.self.python, variable.language.special.self.python#B9BCCB
constant.character.format.placeholder.other.python, punctuation.definition.template-expression#6BDFE6
punctuation.definition.annotation.java#E95678
storage.modifier.import, storage.modifier.package, storage.type.java#d4dbff
meta.method-call.javabold
punctuation.bracket.angle, punctuation.brackets.angle.rust#E95678
support.type.pythonitalic
source.rust, variable.other.rust#d4dbff
entity.name.type.annotation.kotlin#BFBCB0
keyword.operator.assignment.rust#E95678

Shiki preview

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

Loading...

Vantablack - Coding Theme