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#1A1A1A
  • activityBar.border#1A1A1A60
  • activityBar.foreground#957FCF
  • activityBarBadge.background#A3A3A3
  • activityBarBadge.foreground#1A1A1A
  • badge.background#1A1A1A30
  • badge.foreground#808080
  • breadcrumb.activeSelectionForeground#808080
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#AFAFAF
  • breadcrumb.foreground#9F9F9F
  • breadcrumbPicker.background#1A1A1A
  • button.background#80808050
  • contrastBorder#80808040
  • debugToolBar.background#1A1A1A
  • diffEditor.insertedTextBackground#A8A8A815
  • diffEditor.removedTextBackground#9B9B9B20
  • dropdown.background#1A1A1A
  • dropdown.border#ECECEC10
  • editor.background#1A1A1A
  • editor.findMatchBackground#1A1A1A
  • editor.findMatchBorder#808080
  • editor.findMatchHighlightBackground#80808093
  • editor.findMatchHighlightBorder#ECECEC30
  • editor.foreground#AFAFAF
  • editor.lineHighlightBackground#1A1A1A50
  • editor.selectionBackground#A3A3A330
  • editor.selectionHighlightBackground#8080806b
  • editor.selectionHighlightBorder#A3A3A3f0
  • editorBracketMatch.background#1A1A1A
  • editorBracketMatch.border#A0A0A07f
  • editorCursor.foreground#A0A0A0
  • editorError.foreground#BF3636FF
  • editorGroup.border#1A1A1A30
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGutter.addedBackground#A8A8A860
  • editorGutter.deletedBackground#9B9B9B60
  • editorGutter.modifiedBackground#A3A3A360
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#ECECEC10
  • editorIndentGuide.activeBackground#525252
  • editorIndentGuide.background#52525270
  • editorInfo.foreground#A3A3A370
  • editorLineNumber.activeForeground#9E6C73
  • editorLineNumber.foreground#9E6C7360
  • editorLink.activeForeground#7DBDF8
  • editorMarkerNavigation.background#AFAFAF05
  • editorOverviewRuler.border#1A1A1A
  • editorOverviewRuler.errorForeground#BF3636FF
  • editorOverviewRuler.findMatchForeground#808080
  • editorOverviewRuler.infoForeground#A3A3A340
  • editorOverviewRuler.warningForeground#FFc40070
  • editorRuler.foreground#525252
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#ECECEC10
  • editorSuggestWidget.foreground#AFAFAF
  • editorSuggestWidget.highlightForeground#A0A0A0
  • editorSuggestWidget.selectedBackground#80808020
  • editorWarning.foreground#FFc400
  • editorWhitespace.foreground#AFAFAF40
  • editorWidget.background#1A1A1A
  • editorWidget.border#A0A0A0
  • editorWidget.resizeBorder#808080
  • extensionButton.prominentBackground#A8A8A890
  • extensionButton.prominentHoverBackground#9B9B9B
  • focusBorder#ECECEC00
  • gitDecoration.conflictingResourceForeground#A0A0A0
  • gitDecoration.deletedResourceForeground#9B9B9B
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#9F9F9F
  • gitDecoration.untrackedResourceForeground#A3A3A3
  • input.background#3B3B3B
  • input.border#ECECEC10
  • input.foreground#AFAFAF
  • input.placeholderForeground#AFAFAF60
  • inputOption.activeBackground#AFAFAF30
  • inputOption.activeBorder#AFAFAF30
  • inputValidation.errorBorder#BF3636FF
  • inputValidation.infoBorder#A3A3A350
  • inputValidation.warningBorder#FFc40050
  • list.activeSelectionBackground#1A1A1A
  • list.activeSelectionForeground#7DBDF860
  • list.focusBackground#3B3B3B
  • list.focusForeground#A3A3A3
  • list.highlightForeground#7DBDF8
  • list.hoverBackground#47474730
  • list.hoverForeground#7DBDF8
  • list.inactiveSelectionBackground#1A1A1A30
  • list.inactiveSelectionForeground#7DBDF8AA
  • list.warningForeground#FFc400
  • listFilterWidget.background#1A1A1A30
  • listFilterWidget.noMatchesOutline#1A1A1A30
  • listFilterWidget.outline#1A1A1A30
  • menu.background#1A1A1Af8
  • menu.border#80808050
  • menu.foreground#AFAFAF
  • menu.selectionBackground#3B3B3B
  • menu.selectionBorder#1A1A1A30
  • menu.selectionForeground#AFAFAF
  • menu.separatorBackground#AFAFAF
  • menubar.selectionBackground#3B3B3B
  • menubar.selectionBorder#80808050
  • menubar.selectionForeground#AFAFAF
  • minimap.background#1A1A1A
  • minimapGutter.addedBackground#9B9B9B
  • minimapGutter.deletedBackground#A0A0A0
  • minimapGutter.modifiedBackground#A8A8A8
  • minimapSlider.activeBackground#A8A8A8b0
  • minimapSlider.background#A8A8A880
  • minimapSlider.hoverBackground#A8A8A8a0
  • notificationLink.foreground#808080
  • notifications.background#1A1A1A
  • notifications.foreground#AFAFAF
  • panel.background#1A1A1A
  • panel.border#1A1A1A60
  • panelTitle.activeBorder#808080
  • panelTitle.activeForeground#ECECEC
  • panelTitle.inactiveForeground#AFAFAF
  • peekView.border#1A1A1A30
  • peekViewEditor.background#AFAFAF05
  • peekViewEditor.matchHighlightBackground#80808050
  • peekViewEditorGutter.background#AFAFAF05
  • peekViewResult.background#AFAFAF05
  • peekViewResult.matchHighlightBackground#80808050
  • peekViewResult.selectionBackground#80808070
  • peekViewTitle.background#AFAFAF05
  • peekViewTitleDescription.foreground#AFAFAF60
  • pickerGroup.foreground#808080
  • progressBar.background#808080
  • scrollbar.shadow#1A1A1A00
  • scrollbarSlider.activeBackground#808080cc
  • scrollbarSlider.background#808080bb
  • scrollbarSlider.hoverBackground#808080ee
  • selection.background#808080
  • settings.checkboxBackground#1A1A1A
  • settings.checkboxForeground#AFAFAF
  • settings.dropdownBackground#1A1A1A
  • settings.dropdownForeground#AFAFAF
  • settings.headerForeground#808080
  • settings.modifiedItemIndicator#808080
  • settings.numberInputBackground#1A1A1A
  • settings.numberInputForeground#AFAFAF
  • settings.textInputBackground#1A1A1A
  • settings.textInputForeground#AFAFAF
  • sideBar.background#1A1A1A
  • sideBar.border#80808050
  • sideBar.foreground#AFAFAF
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.border#1A1A1A60
  • sideBarSectionHeader.foreground#5D6CAC
  • sideBarTitle.foreground#CE5499
  • statusBar.background#CE549955
  • statusBar.border#1A1A1A60
  • statusBar.debuggingBackground#A0A0A0
  • statusBar.debuggingForeground#ECECEC
  • statusBar.foreground#CACACA
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.hoverBackground#80808020
  • statusBarItem.remoteBackground#808080
  • statusBarItem.remoteForeground#1A1A1A
  • tab.activeBackground#80808020
  • tab.activeBorder#808080
  • tab.activeForeground#ECECEC
  • tab.activeModifiedBorder#808080
  • tab.border#1A1A1A
  • tab.inactiveBackground#80808020
  • tab.inactiveForeground#AFAFAFaf
  • tab.unfocusedActiveBackground#80808040
  • tab.unfocusedActiveBorder#808080
  • tab.unfocusedActiveForeground#AFAFAF
  • tab.unfocusedInactiveBackground#80808010
  • tab.unfocusedInactiveForeground#AFAFAF7f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000dd
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#0000ff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ff00
  • terminal.ansiBrightMagenta#ff00ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00dddd
  • terminal.ansiGreen#00dd00
  • terminal.ansiMagenta#dd00dd
  • terminal.ansiRed#dd0000
  • terminal.ansiWhite#d8d8d8
  • terminal.ansiYellow#dddd00
  • terminalCursor.background#1A1A1A
  • terminalCursor.foreground#A0A0A0
  • textLink.activeForeground#AFAFAF
  • textLink.foreground#808080
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#AFAFAF
  • titleBar.border#1A1A1A60
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#808080
  • tree.indentGuidesStroke#525252
  • widget.shadow#1A1A1A30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#A0A0A0—
invalid, invalid.illegal#FF293B—
constant.character.escape#ABABAB—
*url*, *link*, *uri*—underline
support.type.property-name.json#957fcf—
token.error-token#FF293B—
token.debug-token#ABABAB—
text.tex, source.c, source.python, source.v, variable, variable.parameter.c, parameter, variable.other.local.c, meta.function-call.java, meta.method-call.java, meta.try.body.java, meta.method.body.java, variable.parameter.java#c1d0dd
meta.indexed-name.python, storage.type, keyword.fn.v, keyword.other.item.latex#9e6c73
constant.other.placeholder.c, constant.character.escape, string.quoted.other.lt-gt.include.c, variable.language.special.self.python, constant.language, storage.modifier.implements.java, storage.modifier.extends.java, variable.language.java, variable.language.this.java, variable.parameter.function.latex, support.class.math.block.tex, support.class.latex, constant.character.format.placeholder.other.python#5D6CAC—
constant.numeric, punctuation.definition.string, string.quoted.double.c, string.quoted.double.java, string.quoted.single.python, string.quoted.docstring.multi.python, constant.character.math.tex#7dbdf8—
support.function.general.tex, entity.name.function.c, keyword.control, entity.name.function.v, function, entity.name.function.java, entity.name.function.python, meta.function-call.generic.python, support.function.builtin.python, support.function.be.latex, constant.other.general.math.tex#957fcf
keyword.other, storage.type.struct.c, entity.name.type, support.variable.magic.python, support.function.magic.python, keyword.control.preamble.latex, storage.type.struct.v, storage.type.enum.v, storage.type.annotation, entity.other.inherited-class.java#cf5757—
keyword, punctuation.separator, keyword.control.java, keyword.control.c, keyword.control.flow.python, meta.structure.array.json.comments, keyword.control.v, punctuation.definition, punctuation.math#e9c092—
storage.modifier.java, storage.modifier.attribute.v, entity.name.type.c, entity.name.struct.v, entity.name.enum.v, storage.modifier.declaration.python, entity.name.type.class.python, support.function.general.tex, entity.name.section.latex#ffa844—
storage.type.built-in.primitive.c, storage.type.primitive.java, storage.type.java, keyword.other.import.java, storage.type.function.python, support.type.python, storage.type.class.python, storage.type.generic.java, storage.modifier.c, keyword.function.v, storage.type.numeric.v, storage.type.bool.v, storage.modifier.v, support.function.section.latex#ce5499—
comment, comment.line.double-slash.c, comment.line.double-slash.java, comment.line.double-slash.v, comment.line.number-sign.python, comment.block.java, comment.block.c, comment.block.documentation.v, punctuation.definition.comment.tex, punctuation.definition.comment.latex#716375italic
Mago Custom Theme by Magnus Økstad - VS Code Theme