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#000000
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#bababa66
  • activityBarBadge.background#794bc4
  • activityBarBadge.foreground#ffffff
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#8753dd
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ff00ff
  • breadcrumb.foreground#ffffffaa
  • breadcrumbPicker.background#232530
  • button.background#794bc4
  • button.hoverBackground#8753dd
  • button.secondaryBackground#3a3d41
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#61b95544
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#000000
  • editor.findMatchBackground#ff00ff30
  • editor.findMatchBorder#ff00ff40
  • editor.findMatchHighlightBackground#8753dd58
  • editor.findMatchHighlightBorder#8753dd
  • editor.findRangeHighlightBackground#ff00ff30
  • editor.findRangeHighlightBorder#ff00ff40
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#8753dd48
  • editor.inactiveSelectionBackground#ff00ff20
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ff00ff30
  • editor.rangeHighlightBorder#ff00ff40
  • editor.selectionBackground#ff00ff30
  • editor.selectionHighlightBackground#ff00ff20
  • editor.selectionHighlightBorder#ff00ff40
  • editor.wordHighlightBackground#8753dd48
  • editor.wordHighlightStrongBackground#8753dd48
  • editorActiveLineNumber.foreground#9753dd
  • editorBracketHighlight.foreground1#f92672
  • editorBracketHighlight.foreground2#ff8f00
  • editorBracketHighlight.foreground3#ffd866
  • editorBracketHighlight.foreground4#99ec96
  • editorBracketHighlight.foreground5#68fcf8
  • editorBracketHighlight.foreground6#ab9df2
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#8888885a
  • editorCodeLens.foreground#808080
  • editorCursor.background#ffffff
  • editorCursor.foreground#ffaf00aa
  • editorError.foreground#f48771
  • editorGroup.border#ff00ff70
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#ff00ff40
  • editorGutter.addedBackground#587c0c
  • editorGutter.commentRangeForeground#9f9f9f
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#9f9f9f
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#6c6c6ccc
  • editorLink.activeForeground#8468b2
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationInfo.background#75beff
  • editorOverviewRuler.background#25252500
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#ffaa44
  • editorSuggestWidget.selectedBackground#59379160
  • editorSuggestWidget.selectedForeground#ff9944
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#8040ff
  • focusBorder#794bc4
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#3c3c3c
  • input.foreground#ffffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#794bc44c
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#794bc4
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#794bc430
  • list.focusBackground#794bc450
  • list.focusForeground#cccccc
  • list.highlightForeground#794bc4
  • list.hoverBackground#794bc455
  • list.hoverForeground#ffdf00
  • list.inactiveSelectionBackground#794bc430
  • list.inactiveSelectionForeground#dfbf00
  • listFilterWidget.background#794bc4
  • listFilterWidget.noMatchesOutline#be1100
  • menu.background#252526
  • menu.foreground#ffffff
  • menu.selectionBackground#8753dd
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1f
  • menubar.selectionForeground#ffcf00
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#000000
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#8753dd5a
  • minimap.selectionHighlight#8753dd4c
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#403060
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#605090
  • panelSection.border#80808059
  • panelTitle.activeBorder#ffaa00
  • peekView.border#000000
  • peekViewEditor.background#301d4f
  • peekViewEditor.matchHighlightBackground#a67cec5e
  • peekViewEditor.matchHighlightBorder#bfa0f240
  • peekViewEditorGutter.background#0c021b
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.matchHighlightBackground#794bc442
  • peekViewResult.selectionBackground#3399ff33
  • peekViewTitle.background#1e1e1e
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#8753dd
  • progressBar.background#593791
  • scrollbar.shadow#545454
  • selection.background#794bc4
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ffffff
  • sideBar.background#000000
  • sideBar.dropBackground#ffffff00
  • sideBarTitle.foreground#794bc4
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#992299
  • statusBar.noFolderBackground#1a1a1a
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#000000
  • tab.activeBackground#794bc4aa
  • tab.border#000000
  • tab.inactiveBackground#ffffff1e
  • terminal.ansiBlack#232323
  • terminal.ansiBlue#008DF8
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#0092FF
  • terminal.ansiBrightCyan#67FFF0
  • terminal.ansiBrightGreen#ABE15B
  • terminal.ansiBrightMagenta#9A5FEB
  • terminal.ansiBrightRed#FF2740
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD242
  • terminal.ansiCyan#00D8EB
  • terminal.ansiGreen#8CE10B
  • terminal.ansiMagenta#6D43A6
  • terminal.ansiRed#FF000F
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFB900
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#00000010
  • terminalCursor.foreground#ffaf00aa
  • textLink.activeForeground#794bc4
  • textLink.foreground#9753dd
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#794bc4
  • walkThrough.embeddedEditorBackground#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5a4b81italic
string, constant.character.escape.regexp#ffcc60italic
variable.parameter, variable.language.arguments#fd971fbold
keyword.control, storage.type.class, storage.modifier.java, punctuation.definition.tag, keyword.other.import, punctuation.section.embedded#f92672bold
constant.language#70e0efbold
storage.type#70e0efbold
entity.name.function, meta.function-call.generic, keyword.other.special-method, entity.other.attribute-name#a6e22ebold
keyword.operator, punctuation.definition.variable, punctuation.separator.key-value#f92672bold
support.type, entity.name.type.class, support.function, support.class, keyword.other.typedef#70e0efbold
constant.character.format, constant.character.escape#7a6baa—
support.type.property-name#7b68ee—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#98fb98—
meta.property-value#70ddff—
entity.name.tag#ff9030bold
keyword.other.create, keyword.other.sql, keyword.other.DML, keyword.other.LUW, keyword.other.alias#f92672bold
Dark Purpled Theme v0.0.8 by harryrardy - VS Code Theme