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.border#444444
  • activityBar.dropBackground#33333377
  • activityBar.foreground#cccccc
  • activityBarBadge.background#5986b3
  • activityBarBadge.foreground#d4d4d4
  • badge.background#333333
  • badge.foreground#d0d0d0
  • breadcrumb.background#2a2a2a
  • button.background#185685
  • button.foreground#d4d4d4
  • button.hoverBackground#238cdc
  • debugExceptionWidget.background#131313
  • debugExceptionWidget.border#444444
  • debugToolBar.background#222222
  • descriptionForeground#d4d4d4
  • diffEditor.insertedTextBackground#3d4f3b
  • diffEditor.insertedTextBorder#ffffff4d
  • diffEditor.removedTextBackground#5e2629
  • diffEditor.removedTextBorder#ffffff4d
  • dropdown.background#444444
  • dropdown.border#888888
  • dropdown.foreground#d4d4d4
  • editor.background#131313
  • editor.findMatchBackground#238cdc60
  • editor.findMatchHighlightBackground#ffffff50
  • editor.findRangeHighlightBackground#ffffff40
  • editor.foreground#cccccc
  • editor.hoverHighlightBackground#e37a7a25
  • editor.inactiveSelectionBackground#ffffff40
  • editor.lineHighlightBackground#ffffff15
  • editor.rangeHighlightBackground#238cdc60
  • editor.selectionBackground#238cdc60
  • editor.selectionForeground#62ff0080
  • editor.selectionHighlightBackground#ffffff40
  • editor.wordHighlightBackground#238cdc70
  • editor.wordHighlightStrongBackground#ffffff35
  • editorBracketMatch.background#ff8cf579
  • editorBracketMatch.border#fac86300
  • editorCodeLens.foreground#7f7f7f
  • editorCursor.background#000000ff
  • editorCursor.foreground#48c248
  • editorError.border#FFFFFF00
  • editorError.foreground#e15a60
  • editorGroup.border#444444
  • editorGroup.dropBackground#33333377
  • editorGroupHeader.noTabsBackground#222222
  • editorGroupHeader.tabsBackground#222222
  • editorGroupHeader.tabsBorder#444444
  • editorGutter.addedBackground#99c794
  • editorGutter.background#222222
  • editorGutter.deletedBackground#e15a60
  • editorGutter.modifiedBackground#6699cc
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#444444
  • editorIndentGuide.background#ffffff1f
  • editorInfo.border#ffff0400
  • editorInfo.foreground#d487fa
  • editorLineNumber.foreground#888888
  • editorLink.activeForeground#6699cc
  • editorMarkerNavigation.background#444444
  • editorMarkerNavigationError.background#e15a60
  • editorMarkerNavigationInfo.background#444444
  • editorMarkerNavigationWarning.background#fac863
  • editorOverviewRuler.addedForeground#99c794
  • editorOverviewRuler.border#444444
  • editorOverviewRuler.commonContentForeground#a94348
  • editorOverviewRuler.currentContentForeground#a94348
  • editorOverviewRuler.deletedForeground#ba656a
  • editorOverviewRuler.errorForeground#ba656a
  • editorOverviewRuler.findMatchForeground#ffffffaa
  • editorOverviewRuler.incomingContentForeground#a94348
  • editorOverviewRuler.infoForeground#6699ccc8
  • editorOverviewRuler.modifiedForeground#6699cc
  • editorOverviewRuler.rangeHighlightForeground#c792EAaa
  • editorOverviewRuler.selectionHighlightForeground#ffffffaa
  • editorOverviewRuler.warningForeground#fac863
  • editorOverviewRuler.wordHighlightForeground#ffffff0f
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff0f
  • editorRuler.foreground#ffffff1f
  • editorSuggestWidget.background#1d2325
  • editorSuggestWidget.border#444444
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#3399FF
  • editorSuggestWidget.selectedBackground#238cdc80
  • editorWarning.border#FFFFFF00
  • editorWarning.foreground#fac863
  • editorWhitespace.foreground#333333
  • editorWidget.background#222222
  • editorWidget.border#444444
  • errorForeground#e15a60
  • extensionButton.prominentBackground#a94348
  • extensionButton.prominentForeground#d4d4d4
  • extensionButton.prominentHoverBackground#a94348
  • focusBorder#444444
  • foreground#f8f8f8
  • gitDecoration.conflictingResourceForeground#e15a60
  • gitDecoration.deletedResourceForeground#e15a60
  • gitDecoration.ignoredResourceForeground#7f7f7f
  • gitDecoration.modifiedResourceForeground#6699cc
  • gitDecoration.untrackedResourceForeground#99c794
  • input.background#444444
  • input.border#444444
  • input.foreground#d4d4d4
  • input.placeholderForeground#aaaaaa
  • inputOption.activeBorder#238cdc
  • inputValidation.errorBackground#a94348
  • inputValidation.errorBorder#444444
  • inputValidation.infoBackground#6699cc
  • inputValidation.infoBorder#444444
  • inputValidation.warningBackground#fac863
  • inputValidation.warningBorder#444444
  • list.activeSelectionBackground#6ec3f73c
  • list.activeSelectionForeground#d4d4d4
  • list.dropBackground#33333377
  • list.focusBackground#6ec3f73c
  • list.focusForeground#d4d4d4
  • list.highlightForeground#d4d4d4
  • list.hoverBackground#6ec3f73c
  • list.hoverForeground#d4d4d4
  • list.inactiveSelectionBackground#6ec3f73c
  • list.inactiveSelectionForeground#d4d4d4
  • merge.border#444444
  • merge.currentContentBackground#1d2325
  • merge.currentHeaderBackground#1d2325
  • merge.incomingContentBackground#1d2325
  • merge.incomingHeaderBackground#1d2325
  • panel.background#131313
  • panel.border#444444
  • panel.dropBackground#33333377
  • panelTitle.activeBorder#30373a
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#7f7f7f
  • peekView.border#444444
  • peekViewEditor.background#131313
  • peekViewEditor.matchHighlightBackground#ffffff1f
  • peekViewEditorGutter.background#1d2325
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#cccccc
  • peekViewResult.lineForeground#cccccc
  • peekViewResult.matchHighlightBackground#ffffff1f
  • peekViewResult.selectionBackground#333333
  • peekViewResult.selectionForeground#cccccc
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#7f7f7f
  • peekViewTitleLabel.foreground#cccccc
  • pickerGroup.border#333333
  • pickerGroup.foreground#7f7f7f
  • progressBar.background#fac863
  • scrollbar.shadow#000000cc
  • scrollbarSlider.activeBackground#6ec3f734
  • scrollbarSlider.background#6ec3f734
  • scrollbarSlider.hoverBackground#6ec3f734
  • selection.background#238cdc80
  • sideBar.background#131313
  • sideBar.border#444444
  • sideBar.dropBackground#33333377
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#3d3d3d
  • sideBarSectionHeader.foreground#c0c0c0
  • sideBarTitle.foreground#cccccc
  • statusBar.background#222222
  • statusBar.border#444444
  • statusBar.debuggingBackground#222222
  • statusBar.debuggingForeground#cccccc
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#222222
  • statusBar.noFolderForeground#cccccc
  • statusBarItem.activeBackground#333333
  • statusBarItem.hoverBackground#333333
  • statusBarItem.prominentBackground#333333
  • statusBarItem.prominentHoverBackground#333333
  • tab.activeBackground#4d4d4d
  • tab.activeBorder#c2f0fa
  • tab.activeForeground#cccccc
  • tab.border#555555
  • tab.inactiveBackground#333333
  • tab.inactiveForeground#a0a0a0
  • tab.unfocusedActiveBorder#22246c
  • tab.unfocusedActiveForeground#9f9f9f
  • tab.unfocusedInactiveForeground#7f7f7f
  • terminal.ansiBlack#131313
  • terminal.ansiBlue#5a77f5
  • terminal.ansiBrightBlack#484848
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#60fdff
  • terminal.ansiBrightGreen#6dd872
  • terminal.ansiBrightMagenta#cb63cb
  • terminal.ansiBrightRed#ff6e67
  • terminal.ansiBrightWhite#d8d8d8
  • terminal.ansiBrightYellow#fffc67
  • terminal.ansiCyan#00c5c7
  • terminal.ansiGreen#48c248
  • terminal.ansiMagenta#da9ed9
  • terminal.ansiRed#c91b00
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#c7c400
  • terminal.background#131313
  • terminal.foreground#cccccc
  • terminalCursor.foreground#48c248
  • textPreformat.foreground#d4d4d4
  • textSeparator.foreground#74dc60
  • titleBar.activeBackground#393939
  • titleBar.activeForeground#cccccc
  • titleBar.border#444444
  • titleBar.inactiveBackground#393939
  • titleBar.inactiveForeground#a0a0a0
  • walkThrough.embeddedEditorBackground#1d2325
  • welcomePage.buttonBackground#1d2325
  • welcomePage.buttonHoverBackground#30373a
  • widget.shadow#55555588

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, source.python string.quoted.docstring, source.python string.quoted.docstring punctuation.definition.string#6b8da5italic
variable#cccccc
string.regexp#e99a69
constant.character.escape#e99a69
constant.other.color#cccccc
invalid, invalid.illegal#dc304d
keyword, keyword.control, storage.type, storage.modifier, entity.other.attribute-name, punctuation.separator.arguments.ruby, entity.name.tag.css, punctuation.separator.key-value.ini, punctuation.definition.entity.ini#c792EA
meta.tag, keyword.other.template, keyword.other.substitution#99CCFF
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, keyword.other.definition.ini#3399FF
constant.other.color, punctuation.separator, punctuation.parenthesis, punctuation.definition.list, punctuation.support.type, punctuation.definition.string, punctuation.definition.variable, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.logical-expression, punctuation.definition.case-pattern, punctuation.definition.dict, punctuation.section.function.begin.python, meta.function string.quoted punctuation.definition, meta.function-call string.quoted punctuation.definition, meta.item-access punctuation.definition.arguments, meta.function-call meta.item-access punctuation.definition.arguments, meta.function-call.arguments punctuation.definition.list, punctuation.bracket.angle.java, punctuation.accessor.js, entity.name.type.js, punctuation.terminator, punctuation.section.embedded, meta.block punctuation.section.parens, source.shell meta.function punctuation.definition, source.php punctuation.section.array, source.ruby punctuation.section, punctuation.section.round-brackets, source.css meta.property-list, punctuation.separator.key-value.css, meta.catch.java punctuation.definition.parameters, punctuation.bracket.round.java, punctuation.other.comma.go#99CCFF
source.cpp punctuation.section, source.c punctuation.section, punctuation.definition.arguments.shell, punctuation.definition.group.shell, keyword.operator.glob.shell, meta.function-call punctuation.definition.arguments, meta.function-call punctuation.section.arguments, meta.function punctuation.definition, meta.function meta.brace.round, meta.function-call punctuation.definition, punctuation.section.class, string.quoted.docstring, source.php punctuation.definition, source.css punctuation.section.property-list, source.css punctuation.section.function, source.css punctuation.definition.entity, punctuation.terminator.rule.css, meta.method-call.java punctuation.definition.parameters, meta.method.identifier.java punctuation.definition.parameters, meta.function-call.java punctuation.definition.parameters, meta.method.java punctuation.section.method, source.java punctuation.section.block, source.java punctuation.section.try, source.java punctuation.section.catch, storage.type.java, source.go punctuation.definition, meta.brace.square.js, meta.brace.round.js#3399FF
entity.other.attribute-name.class, meta.function-call entity.name.function, meta.function-call, variable.function, support.function, entity.name.function.java, entity.name.function.go, keyword.other.special-method, source.sass keyword.control, meta.class-method.js entity.name.function.js, support.variable.property.dom.js, variable.function.constructor#99CCFF
meta.function entity.name.function, entity.name.function.asp, entity.name.type.class, source.css variable.parameter.url, entity.name.type.go, entity.name.package.go, meta.throwables.java storage.type.java#e99a69
variable.parameter, variable.other.special.shell, string.other.math.shell, meta.function.c, meta.object-literal.key.js, source.css keyword.other.unit, source.yaml entity.name.tag, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, entity.name.import.go, variable.other.declaration.go, entity.name.section.group-title.ini#EDC477
support.class, source.php keyword.other, variable.other.constant.object.property.js, variable.other.constant.property.js, variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, source.php keyword.other, source.css constant.numeric, source.css support.constant.property-value, source.css constant.other.color, constant.other.caps.python#e83b44b8
variable.other.assignment.go, meta.item-access.python, variable.other.object.js, entity.name.type.module.js, storage.type.generic.java, constant.character.format.placeholder#cccccc
meta.function-call.c, constant.other.placeholder.go, string constant.other.placeholder, meta.item-access.arguments.python, meta.function-call.arguments#f2e180db
punctuation.definition.dictionary, source.json punctuation.definition.array#ccccccbold
meta.block variable.other#cccccc
entity.name.tag - source.yaml, meta.tag.sgml, markup.deleted.git_gutter#e83b44b8
support.other.variable, string.other.link#e83b44b8
constant.language#6cb891
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#e99a69
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#cccccc
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#cccccc
entity.name.type.hcl, source.terraform.embedded.source#99CCFF
entity.name.function.hcl, keyword.other.function.inline.terraform, keyword.other.section.begin.terraform, keyword.other.section.end.terraform#EDC477
entity.tag.embedded.start.terraform, entity.tag.embedded.end.terraform#3399FF
variable.parameter.hcl#cccccc
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#dc304d
variable.language#dc304ditalic
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#99CCFFitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#EDC477italic
markup.inserted#C3E88D
markup.deleted#dc304d
markup.changed#c792EA
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#dc304ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#c792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EDC477
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#e99a69
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#dc304d
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#C17E70
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#82AAFF
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#e83b44b8
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#c792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#cccccc
text.html.markdown markup.inline.raw.markdown#c792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, beginning.punctuation.definition.list.markdown, markup.bold punctuation.definition, markup.italic punctuation.definition, text.html.markdown punctuation.definition.metadata.markdown, text.html.markdown punctuation.definition.constant.markdown#99CCFF
markdown.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#3399FF
markup.italic#eb7ef5italic
markup.bold, markup.bold string#e4b254bold
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#e4b254bold
markup.quote punctuation.definition.blockquote.markdown, beginning.punctuation.definition.quote.markdown#99CCFF
markup.quote#78a2c2italic
markup.underline#e99a69underline
text.html.markdown entity.other.attribute-name, text.html.markdown entity.name.tag#e99a69
string.other.link.description.title.markdown#c792EA
string.other.link.title.markdown, constant.other.reference.link.markdown#EDC477
markup.inline.raw.string, markup.fenced_code.block#bcf26c
markup.raw.block#c792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#cccccc
variable.language.fenced.markdown#bcf26c
meta.separator#99CCFFbold
markup.table#cccccc
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
Vegas Night Details Theme by robpco - VS Code Theme