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.

  • badge.background#098842
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#24292e
  • breadcrumb.background#fafbfc
  • breadcrumb.focusForeground#24292e
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#098842
  • button.foreground#ffffff
  • button.hoverBackground#1b9c54
  • button.secondaryBackground#5c6370
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#494e58
  • checkbox.background#ffffff
  • checkbox.border#d1d5da
  • checkbox.foreground#24292e
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#d1d5da
  • debugToolBar.background#ffffff
  • debugToolBar.border#d1d5da
  • descriptionForeground#5c6370
  • diffEditor.border#d1d5da
  • diffEditor.insertedLineBackground#34d0581a
  • diffEditor.insertedTextBackground#34d05833
  • diffEditor.removedLineBackground#ea4a5a1a
  • diffEditor.removedTextBackground#ea4a5a33
  • disabledForeground#959da5
  • dropdown.background#ffffff
  • dropdown.border#d1d5da
  • dropdown.foreground#24292e
  • editor.background#fafbfc
  • editor.findMatchBackground#fcdb7e
  • editor.findMatchBorder#fcdb7e
  • editor.findMatchHighlightBackground#fdf2cc
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#add6ff4d
  • editor.foreground#24292e
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.lineHighlightBackground#f2f4f8
  • editor.lineHighlightBorder#f2f4f8
  • editor.rangeHighlightBackground#fdff0033
  • editor.selectionBackground#b3d4fc
  • editor.selectionHighlightBackground#b3d4fc80
  • editor.selectionHighlightBorder#b3d4fc
  • editor.wordHighlightBackground#e6ebf1
  • editor.wordHighlightStrongBackground#cce0f5
  • editorBracketMatch.background#cce0f5
  • editorBracketMatch.border#cce0f5
  • editorCodeLens.foreground#959da5
  • editorCursor.background#fafbfc
  • editorCursor.foreground#24292e
  • editorError.background#cf222e00
  • editorError.foreground#cf222e
  • editorGroup.border#e1e4e8
  • editorGroup.emptyBackground#fafbfc
  • editorGroupHeader.border#e1e4e8
  • editorGroupHeader.tabsBackground#f3f4f6
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorGutter.addedBackground#34d058
  • editorGutter.background#fafbfc
  • editorGutter.commentRangeForeground#5c6370
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.foldingControlForeground#5c6370
  • editorGutter.modifiedBackground#2188ff
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#d1d5da
  • editorHoverWidget.foreground#24292e
  • editorIndentGuide.activeBackground1#c6cbd1
  • editorIndentGuide.background1#e1e4e8
  • editorInfo.foreground#0550ae
  • editorLineNumber.activeForeground#24292e
  • editorLineNumber.foreground#1b1f234d
  • editorLink.activeForeground#0550ae
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#cf222e
  • editorMarkerNavigationInfo.background#0550ae
  • editorMarkerNavigationWarning.background#9a6700
  • editorOverviewRuler.background#fafbfc
  • editorOverviewRuler.border#e1e4e8
  • editorOverviewRuler.errorForeground#cf222e
  • editorOverviewRuler.warningForeground#9a6700
  • editorRuler.foreground#e1e4e8
  • editorStickyScroll.background#f3f4f6
  • editorStickyScrollHover.background#e1e4e8
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#d1d5da
  • editorSuggestWidget.foreground#24292e
  • editorSuggestWidget.highlightForeground#0550ae
  • editorSuggestWidget.selectedBackground#f0f3f6
  • editorWarning.background#9a670000
  • editorWarning.foreground#9a6700
  • editorWhitespace.foreground#d1d5da
  • editorWidget.background#ffffff
  • editorWidget.border#d1d5da
  • editorWidget.foreground#24292e
  • editorWidget.resizeBorder#d1d5da
  • errorForeground#cf222e
  • focusBorder#098842
  • foreground#5c6370
  • gitDecoration.addedResourceForeground#22863a
  • gitDecoration.conflictingResourceForeground#5a32a3
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#b08800
  • gitDecoration.stageDeletedResourceForeground#cb2431
  • gitDecoration.stageModifiedResourceForeground#dbab09
  • gitDecoration.submoduleResourceForeground#005cc5
  • gitDecoration.untrackedResourceForeground#28a745
  • icon.foreground#5c6370
  • input.background#ffffff
  • input.border#d1d5da
  • input.foreground#24292e
  • input.placeholderForeground#6a737d
  • inputOption.activeBackground#c9e4d6
  • inputOption.activeBorder#098842
  • inputOption.activeForeground#24292e
  • inputValidation.errorBackground#ffecec
  • inputValidation.errorBorder#cf222e
  • inputValidation.infoBackground#e8f4ff
  • inputValidation.infoBorder#0550ae
  • inputValidation.warningBackground#fff8dc
  • inputValidation.warningBorder#9a6700
  • list.activeSelectionBackground#098842
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#e6efe9
  • list.focusBackground#c9e4d6
  • list.focusForeground#24292e
  • list.highlightForeground#098842
  • list.hoverBackground#f0f3f6
  • list.hoverForeground#24292e
  • list.inactiveSelectionBackground#e6efe9
  • list.inactiveSelectionForeground#24292e
  • listFilterWidget.background#fafbfc
  • listFilterWidget.noMatchesOutline#cf222e
  • listFilterWidget.outline#098842
  • merge.commonContentBackground#f3f4f6
  • merge.commonHeaderBackground#e1e4e8
  • merge.currentContentBackground#e8f4ff
  • merge.currentHeaderBackground#cce0f5
  • merge.incomingContentBackground#e6efe9
  • merge.incomingHeaderBackground#c9e4d6
  • minimap.background#fafbfc
  • minimap.errorHighlight#cf222e
  • minimap.findMatchHighlight#fcdb7e
  • minimap.selectionHighlight#b3d4fc
  • minimap.warningHighlight#9a6700
  • minimapGutter.addedBackground#28a745
  • minimapGutter.deletedBackground#cb2431
  • minimapGutter.modifiedBackground#005cc5
  • notificationCenter.border#d1d5da
  • notificationCenterHeader.background#f3f4f6
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#ffffff
  • notifications.border#d1d5da
  • notifications.foreground#24292e
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0550ae
  • notificationsWarningIcon.foreground#9a6700
  • notificationToast.border#d1d5da
  • panel.background#fafbfc
  • panel.border#e1e4e8
  • panelSection.border#e1e4e8
  • panelTitle.activeBorder#098842
  • panelTitle.activeForeground#24292e
  • panelTitle.inactiveForeground#6a737d
  • peekView.border#098842
  • peekViewEditor.background#f3f4f6
  • peekViewEditor.matchHighlightBackground#fdf2cc
  • peekViewEditor.matchHighlightBorder#fcdb7e
  • peekViewEditorGutter.background#f3f4f6
  • peekViewResult.background#ffffff
  • peekViewResult.fileForeground#24292e
  • peekViewResult.lineForeground#6a737d
  • peekViewResult.matchHighlightBackground#fcdb7e80
  • peekViewResult.selectionBackground#b3d4fc
  • peekViewResult.selectionForeground#24292e
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#6a737d
  • peekViewTitleLabel.foreground#24292e
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#0550ae
  • progressBar.background#098842
  • quickInput.background#ffffff
  • quickInput.foreground#24292e
  • quickInputList.focusBackground#f0f3f6
  • quickInputList.focusForeground#24292e
  • quickInputList.focusIconForeground#098842
  • quickInputTitle.background#f3f4f6
  • scrollbar.shadow#d1d5da
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da566
  • selection.background#b3d4fc
  • settings.focusedRowBackground#f0f3f6
  • settings.headerForeground#24292e
  • statusBar.background#098842
  • statusBar.border#08722e
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#098842
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#158043
  • statusBarItem.errorBackground#cf222e
  • statusBarItem.hoverBackground#1b9c54
  • statusBarItem.remoteBackground#07602a
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#9a6700
  • tab.activeBackground#fafbfc
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#24292e
  • tab.activeModifiedBorder#098842
  • tab.border#e1e4e8
  • tab.hoverBackground#f6f8fa
  • tab.inactiveBackground#f3f4f6
  • tab.inactiveForeground#6a737d
  • tab.inactiveModifiedBorder#85c4a1
  • tab.unfocusedActiveBackground#fafbfc
  • tab.unfocusedActiveForeground#24292ecc
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#032f62
  • terminal.ansiBrightBlack#6a737d
  • terminal.ansiBrightBlue#005cc5
  • terminal.ansiBrightCyan#3192aa
  • terminal.ansiBrightGreen#22863a
  • terminal.ansiBrightMagenta#5a32a3
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#d1d5da
  • terminal.ansiBrightYellow#b08800
  • terminal.ansiCyan#1b7c83
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#dbab09
  • terminal.background#fafbfc
  • terminal.border#e1e4e8
  • terminal.foreground#24292e
  • terminal.selectionBackground#b3d4fc
  • terminalCursor.background#0550ae
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#005cc5
  • textLink.foreground#0550ae
  • tree.indentGuidesStroke#d1d5da
  • walkThrough.embeddedEditorBackground#0000000a
  • widget.shadow#0000001a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a737ditalic
support.function.tex, support.function.be.latex, keyword.control.tex, keyword.other.tex, entity.name.function.tex, support.class.tex, meta.function.tex#172b4d
keyword.control.flow.begin.latex, keyword.control.flow.end.latex, storage.type.function.begin.latex, storage.type.function.end.latex#172b4dbold
variable.parameter.function.latex, support.class.latex, entity.other.attribute-name.latex#22863a
string.other.math.tex, meta.math.block.latex, keyword.operator.math.latex, constant.other.math.tex#0f6b75
constant.character.escape.tex, constant.character.tex#a01a22
punctuation.definition.arguments.latex, punctuation.definition.group.tex, meta.group.braces.latex#24292e
entity.name.section.latex#172b4dbold
string, string.quoted#22863a
punctuation.definition.string.begin, punctuation.definition.string.end#22863a
keyword, keyword.control#0550ae
storage, storage.type, storage.modifier#0550ae
constant.numeric#09885a
constant.language#0550ae
constant.other#09885a
variable#00287a
variable.language#0550ae
variable.parameter#00287aitalic
entity.name.function, support.function, meta.require, support.function.any-method, variable.function#855818
entity.name.class, entity.name.type, support.class, entity.name.type.class#20677c
entity.name.type.interface#20677c
entity.name.namespace, entity.name.type.namespace#20677c
keyword.operator#24292e
punctuation, punctuation.separator.delimiter#24292e
entity.name.tag#a01a22
entity.other.attribute-name#cf222eitalic
support.type.property-name#cf222e
support.constant.property-value#0550ae
support.type.property-name.json#0550ae
markup.heading, entity.name.section.markdown#172b4dbold
markup.bold#24292ebold
markup.italicitalic
markup.inline.raw, markup.inline.raw.string.markdown#a01a22
markup.underline.link, string.other.link#0550ae
markup.quote.markdown#6a737d
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#172b4d
string.regexp#852042
constant.character.escape#cf222e
invalid#cf222e
invalid.deprecated#cf222eitalic
markup.inserted, markup.inserted.diff#22863a
markup.deleted, markup.deleted.diff#cf222e
markup.changed, markup.changed.diff#b08800
variable.parameter.function.language.special.self.python#0550aeitalic
meta.function.decorator.python#855818
keyword.control.import.python, keyword.control.flow.python#0550aeitalic
variable.parameter.function.python, variable.parameter.function.language.python#00287a
keyword.operator.expression.import, keyword.operator.module#0550ae
string.template, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#22863a
variable.other.constant#005cc5
markup.italic.markdownitalic
Overleaf Light Color Theme by JHermosillaD - VS Code Theme