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#2A2A29
  • activityBar.border#2A2A29
  • activityBar.foreground#F9FBFC
  • activityBarBadge.background#F9FBFC
  • activityBarBadge.foreground#2A2A29
  • badge.background#F9FBFC
  • badge.foreground#2A2A29
  • breadcrumb.activeSelectionForeground#F9FBFC
  • breadcrumb.focusForeground#F9FBFC
  • breadcrumb.foreground#A2AFBC
  • button.background#F9FBFC3d
  • button.foreground#F9FBFC
  • button.hoverBackground#F9FBFC60
  • debugToolBar.background#2A2A29
  • diffEditor.insertedTextBackground#00e67630
  • diffEditor.insertedTextBorder#00e67600
  • diffEditor.removedTextBackground#f4433630
  • diffEditor.removedTextBorder#f4433600
  • dropdown.background#20222c
  • dropdown.border#20222c
  • dropdown.foreground#F9FBFC
  • editor.background#2A2A29
  • editor.findMatchBackground#323232d5
  • editor.findMatchHighlightBackground#36355377
  • editor.findRangeHighlightBackground#584f697c
  • editor.foreground#CED3DB
  • editor.hoverHighlightBackground#3a405c5e
  • editor.lineHighlightBackground#323232
  • editor.lineHighlightBorder#323232
  • editor.selectionBackground#323232
  • editor.selectionHighlightBackground#323232a1
  • editor.wordHighlightBackground#e706d41f
  • editorBracketMatch.background#515151
  • editorBracketMatch.border#2A2A2900
  • editorCodeLens.foreground#613f8390
  • editorCursor.foreground#F9FBFC
  • editorError.foreground#f44336
  • editorGroup.border#2A2A29
  • editorGroup.dropBackground#1d202b
  • editorGroupHeader.noTabsBackground#323232
  • editorGroupHeader.tabsBackground#2A2A29
  • editorGroupHeader.tabsBorder#2A2A29
  • editorGutter.addedBackground#e0e252
  • editorGutter.background#2A2A2900
  • editorGutter.deletedBackground#f700ff
  • editorGutter.modifiedBackground#00e676
  • editorHoverWidget.background#262b3d
  • editorHoverWidget.border#262b3d
  • editorIndentGuide.activeBackground#DBD6D3
  • editorIndentGuide.background#dbd6d359
  • editorInfo.foreground#2196f3
  • editorLineNumber.foreground#dbd6d351
  • editorLink.activeForeground#F9FBFC
  • editorOverviewRuler.addedForeground#00e676
  • editorOverviewRuler.border#2A2A2900
  • editorOverviewRuler.commonContentForeground#F9FBFC
  • editorOverviewRuler.currentContentForeground#2196f3
  • editorOverviewRuler.deletedForeground#f700ff
  • editorOverviewRuler.errorForeground#ff4531
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#00e676
  • editorOverviewRuler.infoForeground#86c7d3
  • editorOverviewRuler.modifiedForeground#00e676
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#ffde03
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#DBD6D359
  • editorSuggestWidget.background#272c3f
  • editorSuggestWidget.border#2A2A29
  • editorSuggestWidget.foreground#F9FBFC
  • editorSuggestWidget.highlightForeground#00e676
  • editorSuggestWidget.selectedBackground#2b3350
  • editorWarning.foreground#ffe32e
  • editorWhitespace.foreground#dbd6d38c
  • editorWidget.background#232738
  • editorWidget.border#2A2A29
  • errorForeground#fb4934
  • extensionButton.prominentBackground#451A6D
  • extensionButton.prominentHoverBackground#501e7e
  • foreground#F9FBFC
  • gitDecoration.conflictingResourceForeground#ff02c8
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.ignoredResourceForeground#c2c2c2e7
  • gitDecoration.modifiedResourceForeground#00e676
  • gitDecoration.untrackedResourceForeground#ffde03
  • input.background#323232
  • input.border#2A2A29
  • input.foreground#F9FBFC
  • input.placeholderForeground#dbd6d365
  • inputValidation.errorBackground#8f3f39
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#336994
  • inputValidation.infoBorder#00e676
  • inputValidation.warningBackground#ff6f00
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#F9FBFC
  • list.dropBackground#1d202b
  • list.focusBackground#323232c2
  • list.focusForeground#F9FBFC
  • list.highlightForeground#A2AFBC
  • list.hoverBackground#323232
  • list.hoverForeground#F9FBFC
  • list.inactiveSelectionBackground#323232c7
  • list.inactiveSelectionForeground#F9FBFC
  • list.warningForeground#00e676
  • merge.border#2A2A2900
  • merge.currentContentBackground#2196f320
  • merge.currentHeaderBackground#2196f340
  • merge.incomingContentBackground#00e67620
  • merge.incomingHeaderBackground#00e67640
  • panel.border#2A2A29
  • panelTitle.activeForeground#F9FBFC
  • panelTitle.inactiveForeground#c2c2c2e7
  • peekView.border#1e212c
  • peekViewEditor.background#1e212c
  • peekViewEditorGutter.background#1e212c
  • peekViewResult.background#1e212c
  • peekViewResult.fileForeground#F9FBFC
  • peekViewResult.matchHighlightBackground#8ec07c30
  • peekViewResult.selectionBackground#8ec07c30
  • peekViewResult.selectionForeground#8ec07c30
  • peekViewTitle.background#1e212c
  • peekViewTitleDescription.foreground#F9FBFC
  • peekViewTitleLabel.foreground#F9FBFC
  • progressBar.background#00e676
  • scrollbar.shadow#2A2A29
  • scrollbarSlider.activeBackground#F9FBFC7c
  • scrollbarSlider.background#F9FBFC23
  • scrollbarSlider.hoverBackground#F9FBFC4d
  • sideBar.background#2A2A29
  • sideBar.border#2A2A29
  • sideBar.foreground#F9FBFC
  • sideBarSectionHeader.background#1f2333
  • sideBarSectionHeader.foreground#F9FBFC
  • sideBarTitle.foreground#F9FBFC
  • statusBar.background#2A2A29
  • statusBar.border#2A2A29
  • statusBar.debuggingBackground#00353E
  • statusBar.debuggingBorder#2A2A2900
  • statusBar.debuggingForeground#2A2A29
  • statusBar.foreground#A2AFBC
  • statusBar.noFolderBackground#2A2A29
  • statusBar.noFolderBorder#2A2A2900
  • tab.activeBackground#2A2A29
  • tab.activeBorder#2A2A29
  • tab.activeForeground#F9FBFC
  • tab.border#2A2A29
  • tab.inactiveBackground#2A2A29
  • tab.inactiveForeground#c2c2c2e7
  • tab.unfocusedActiveBorder#2A2A29
  • tab.unfocusedActiveForeground#c2c2c2e7
  • tab.unfocusedInactiveForeground#5a6a81
  • terminal.ansiBlack#2A2A29
  • terminal.ansiBlue#206dac
  • terminal.ansiBrightBlack#232635
  • terminal.ansiBrightBlue#00e676
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#cacc53
  • terminal.ansiBrightMagenta#df6495
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#F9FBFC
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#00e676
  • terminal.ansiGreen#00e676
  • terminal.ansiMagenta#ff0266
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#613f83
  • terminal.ansiYellow#ffde03
  • terminal.background#2A2A29
  • terminal.foreground#F9FBFC
  • textLink.activeForeground#F9FBFC
  • textLink.foreground#F9FBFCdd
  • titleBar.activeBackground#2A2A29
  • titleBar.activeForeground#F9FBFC
  • titleBar.inactiveBackground#2A2A29
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F9FBFC
emphasisitalic
strongbold
header#F9FBFC
comment, punctuation.definition.comment#6b7087
punctuation.definition.string.template#F9FBFC
punctuation.definition.string.begin, punctuation.definition.string.end, constant.language#c2c2c2e7
constant, support.constant, variable.arguments#F9FBFCunderline
constant.language.boolean#c2c2c2e7underline
constant.character.entity#c2c2c2e7underline
constant.rgb-value#f9fbfcceunderline
entity.name.selector#F9FBFC
entity.other.attribute-name#F9FBFC
entity.other.inherited-class#F9FBFC
entity.name.tag, punctuation.tag, invalid.illegal.bad-ampersand#c2c2c2e7
invalid, invalid.illegal#f44336
invalid.deprecated#ff0266
meta.selector, meta.object.member#F9FBFC
meta.preprocessor#F9FBFC
meta.preprocessor.string#F9FBFC
meta.preprocessor.numeric#F9FBFC
meta.header.diff#F9FBFC
meta.section.attributes.plain#c2c2c2e7
storage#c2c2c2e7
storage.modifier#c2c2c2e7
string#F9FBFC
string.tag#c2c2c2e7
string.value#F9FBFC
string.regexp#F9FBFC
string.escape#c2c2c2e7
string.quasi#c2c2c2e7
string.entity#F9FBFC
object#F9FBFC
module.node#F9FBFC
support.type.property-name#F9FBFC
keyword#c2c2c2e7italic bold
keyword.control#c2c2c2e7
keyword.control.try, keyword.control.catch, keyword.control.trycatch#F9FBFC
keyword.control.conditional, keyword.control.loop#F9FBFC
keyword.control.module#F9FBFC
keyword.control.less#F9FBFC
keyword.operator, keyword.operator.punctuation, keyword.operator.new#c2c2c2e7
keyword.operator.navigation#c2c2c2e7
keyword.other.unit#F9FBFC
metatag.php#F9FBFC
support.function.git-rebase#F9FBFC
constant.sha.git-rebase#F9FBFC
meta.type.name, meta.return.type, meta.return-type, meta.cast, support.type, storage.type.cs, variable.class#c2c2c2e7
variable.this, support.variable#F9FBFC
entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type.class#F9FBFCitalic bold
meta.type.annotation, meta.type.parameters#c2c2c2e7
storage.type.function, entity.function, entity.name.function.static, meta.delimiter#c2c2c2e7
entity.name.function.function-call#F9FBFC
support.function.builtin#F9FBFC
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#c2c2c2e7
brace, meta.brace.round, meta.brace.square, meta.brace.curly#c2c2c2e7
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#F9FBFC
prototype#F9FBFC
storage.type.class#c2c2c2e7
punctuation#c2c2c2e7
punctuation.quoted#c2c2c2e7
punctuation.quasi#c2c2c2e7
punctuation.accessor, keyword.operator.accessor#F9FBFC
*url*, *link*, *uri*underline
text.haml, string.quoted.double.ruby, meta.section.attributes.plain.haml#F9FBFC
meta.section.attributes.plain.haml, entity.name.tag, meta.tag.haml#c2c2c2e7
support.type.python, meta.function.python, meta.function-call.python, entity.name.function.python, meta.function-call.generic, meta.function-call.arguments, constant.other.caps#F9FBFC
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, entity.name.function.decorator#c2c2c2e7
keyword.operator.logical#c2c2c2e7
punctuation.definition.logical-expression#c2c2c2e7
string.inperpolated.dollar.shell#c2c2c2e7
string.interpolated.dollar.shell, string.interpolated.backtick.shell#c2c2c2e7
keyword.control.directive#c2c2c2e7
support.function.C99 , keyword.control.c#F9FBFC
meta.scope.prerequisites#fabd2f
entity.name.function.target#b8bb26bold
keyword.other.import.java, comment.block.javadoc variable.parameter.java, source.java variable.other.object, source.java variable.other.definition.java, storage.modifier.import.java, storage.modifier.package.java, punctuation.separator.period#F9FBFC
keyword.other.package.java, keyword.other.import.java, storage.type.java, storage.type.annotation, keyword.other.documentation.javadoc#c2c2c2e7
meta.function-parameters.lisp#fabd2f
markup.underlineunderline
string.other.link.title.markdown#F9FBFCunderline
markup.underline.link#F9FBFC
markup.bold#F9FBFCbold
markup.heading#F9FBFCbold
markup.italicitalic
markup.inserted#F9FBFC
markup.deleted#F9FBFC
markup.changed#F9FBFC
markup.punctuation.quote.beginning#c2c2c2e7
markup.punctuation.list.beginning#c2c2c2e7
markup.inline.raw, markup.fenced_code.block#F9FBFC
string.quoted.double.interpolated.ruby, source.ruby.embedded.haml, meta.line.ruby.haml, tring.quoted.double.ruby#F9FBFC
string.quoted.double.json#F9FBFC
source.json meta.structure.dictionary.json support.type.property-name.json#F9FBFC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F9FBFC
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#F9FBFC
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#F9FBFC
support.function.name.sass#F9FBFC
entity.other.attribute-name.pseudo-class.css.sass, meta.property-list.css.sass, keyword.other.unit.css.sass#c2c2c2e7
entity.other.attribute-name.css, support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss, source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc, entity.other.attribute-name.class, punctuation.definition.entity, support.type.property-name.css, source.css meta.selector#F9FBFC
entity.name.tag.css, punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.deg.css, entity.other.attribute-name.pseudo-element.css#c2c2c2e7
string.quoted.double.html#F9FBFC
support.type.object.html-attribute, punctuation.definition.tag.end.html, punctuation.definition.tag, cast.expr, text.html entity.name.tag, text.html punctuation.tag#c2c2c2e7
#F9FBFC
string.regexp.angular-interpolation.begin, string.regexp.angular-interpolation.end, meta.directive.angular, text.html.angular#c2c2c2e7
support.type.object, variable.language.self.js#F9FBFC
source.js variable.language#c2c2c2e7
meta.decorator.ts, meta.objectliteral.ts, variable.other.object.ts#F9FBFC
source.ts variable.language, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts#c2c2c2e7
source.go storage.type#c2c2c2e7
source.go entity.name.import#F9FBFC
punctuation.other.period#F9FBFC
source.go keyword.package, source.go keyword.import#c2c2c2e7
source.go keyword.interface, source.go keyword.struct#c2c2c2e7
source.go entity.name.type#F9FBFC
source.go entity.name.function#F9FBFC
keyword.control.cucumber.table#F9FBFC
source.reason string.double#F9FBFC
source.reason keyword.control.less#c2c2c2e7
source.reason entity.name.function#F9FBFC
source.reason support.property-value, source.reason entity.name.filename#F9FBFC
source.powershell variable.other.member.powershell#F9FBFC
source.powershell support.function.powershell#c2c2c2e7
keyword.control.powershell#F9FBFC
source.powershell support.function.attribute.powershell#F9FBFC
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#c2c2c2e7
Minimal by Ephraim Atta-Duncan - VS Code Theme