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.activeBackground#160d2f
  • activityBar.activeBorder#160d2f
  • activityBar.background#06030d
  • activityBar.border#160d2f
  • activityBar.foreground#a78bfa
  • activityBarBadge.background#7F70FF
  • activityBarBadge.foreground#06030d
  • badge.background#7F70FF
  • badge.foreground#06030d
  • breadcrumb.activeSelectionForeground#a78bfa
  • breadcrumb.background#06030d
  • breadcrumb.focusForeground#a78bfa
  • breadcrumb.foreground#a78bfa
  • breadcrumbPicker.background#06030d
  • button.background#160d2f
  • button.foreground#a78bfa
  • button.hoverBackground#160d2f
  • button.secondaryBackground#160d2f
  • button.secondaryForeground#a78bfa
  • button.secondaryHoverBackground#160d2f
  • checkbox.background#06030d
  • checkbox.foreground#7F70FF
  • debugToolBar.background#06030d
  • debugToolBar.border#160d2f
  • diffEditor.border#160d2f
  • diffEditor.diagonalFill#160d2f55
  • diffEditor.insertedLineBackground#1f3d2b33
  • diffEditor.insertedTextBackground#1f3d2b88
  • diffEditor.removedLineBackground#3d1f2b33
  • diffEditor.removedTextBackground#3d1f2b88
  • dropdown.background#06030d
  • dropdown.border#160d2f
  • dropdown.foreground#e6e1f0
  • dropdown.listBackground#06030d
  • editor.background#06030d
  • editor.focusedStackFrameHighlightBackground#160d2faa
  • editor.foreground#7F70FF
  • editor.inactiveSelectionBackground#160d2f
  • editor.lineHighlightBackground#160d2f
  • editor.rangeHighlightBackground#06030d
  • editor.selectionBackground#160d2f
  • editor.selectionHighlightBackground#160d2f88
  • editor.snippetFinalTabstopHighlightBackground#160d2f55
  • editor.snippetTabstopHighlightBackground#160d2f55
  • editor.stackFrameHighlightBackground#160d2f88
  • editor.wordHighlightBackground#7F70FF40
  • editor.wordHighlightStrongBackground#7F70FF40
  • editorBracketHighlight.foreground1#5A50D9
  • editorBracketHighlight.foreground2#4F44C1
  • editorBracketHighlight.foreground3#473BB0
  • editorBracketHighlight.foreground4#4037A3
  • editorBracketHighlight.foreground5#3B32A0
  • editorBracketHighlight.foreground6#352B8F
  • editorBracketHighlight.unexpectedBracket.foreground#7F70FF
  • editorBracketMatch.background#160d2f88
  • editorBracketMatch.border#5A50D9
  • editorCursor.background#06030d
  • editorCursor.foreground#7F70FF
  • editorError.foreground#f38ba8
  • editorGroup.background#06030d
  • editorGroup.border#160d2f
  • editorGroup.dropBackground#160d2f88
  • editorGroup.emptyBackground#06030d
  • editorGroupHeader.border#160d2f
  • editorGroupHeader.noTabsBackground#06030d
  • editorGroupHeader.tabsBackground#06030d
  • editorGroupHeader.tabsBorder#160d2f
  • editorGutter.addedBackground#1f3d2b
  • editorGutter.commentRangeForeground#5a3e85
  • editorGutter.deletedBackground#3d1f2b
  • editorGutter.modifiedBackground#2a1f0d
  • editorHoverWidget.background#06030d
  • editorHoverWidget.border#160d2f
  • editorHoverWidget.foreground#a78bfa
  • editorHoverWidget.statusBarBackground#160d2f
  • editorIndentGuide.activeBackground#160d2f
  • editorIndentGuide.background#160d2f
  • editorInfo.foreground#89b4fa
  • editorInlayHint.background#160d2f
  • editorInlayHint.foreground#a78bfa
  • editorInlayHint.parameterForeground#9355fe
  • editorInlayHint.typeForeground#7b3edb
  • editorLineHighlight.border#160d2f
  • editorLineNumber.activeForeground#a78bfa
  • editorLineNumber.foreground#250f5c
  • editorLink.activeForeground#7F70FF
  • editorLink.foreground#7F70FF
  • editorMarkerNavigation.background#06030d
  • editorMarkerNavigationError.background#f38ba8
  • editorMarkerNavigationInfo.background#89b4fa
  • editorMarkerNavigationWarning.background#f9e2af
  • editorOverviewRuler.errorForeground#f38ba8
  • editorOverviewRuler.infoForeground#89b4fa
  • editorOverviewRuler.warningForeground#f9e2af
  • editorSuggestWidget.background#06030d
  • editorSuggestWidget.border#160d2f
  • editorSuggestWidget.foreground#a78bfa
  • editorSuggestWidget.highlightForeground#a78bfa
  • editorSuggestWidget.selectedBackground#160d2f
  • editorSuggestWidget.selectedForeground#a78bfa
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#160d2f
  • editorWidget.background#06030d
  • editorWidget.border#160d2f
  • focusBorder#160d2f
  • gitDecoration.conflictingResourceForeground#7F70FF
  • gitDecoration.deletedResourceForeground#7F70FF
  • gitDecoration.ignoredResourceForeground#a78bfa
  • gitDecoration.modifiedResourceForeground#7F70FF
  • gitDecoration.submoduleResourceForeground#7F70FF
  • gitDecoration.untrackedResourceForeground#a78bfa
  • gitlens.gutterBackgroundColor#160d2f55
  • gitlens.gutterForegroundColor#a78bfa
  • gitlens.gutterUncommittedForegroundColor#a78bfa
  • gitlens.lineHighlightBackgroundColor#160d2f33
  • gitlens.lineHighlightOverviewRulerColor#160d2f
  • gitlens.trailingLineForegroundColor#5a3e85
  • icon.foreground#a78bfa
  • input.background#06030d
  • input.border#160d2f
  • input.foreground#a78bfa
  • input.placeholderForeground#a78bfa
  • inputOption.activeBorder#160d2f
  • inputValidation.errorBackground#2a0d1f
  • inputValidation.infoBackground#160d2f
  • inputValidation.warningBackground#2a1f0d
  • list.activeSelectionBackground#160d2f88
  • list.activeSelectionForeground#a78bfa
  • list.dropBackground#160d2f88
  • list.errorForeground#f38ba8
  • list.focusBackground#160d2f
  • list.focusForeground#a78bfa
  • list.highlightForeground#a78bfa
  • list.hoverBackground#160d2f
  • list.hoverForeground#a78bfa
  • list.inactiveSelectionBackground#160d2f88
  • list.inactiveSelectionForeground#a78bfa
  • list.warningForeground#f9e2af
  • listFilterWidget.background#06030d
  • listFilterWidget.noMatchesOutline#f38ba8
  • menu.background#06030d
  • menu.foreground#e6e1f0
  • menu.selectionBackground#160d2f
  • menu.selectionForeground#e6e1f0
  • menu.separatorBackground#160d2f
  • merge.border#160d2f
  • merge.commonContentBackground#160d2f33
  • merge.commonHeaderBackground#160d2f55
  • merge.currentContentBackground#1f3d2b22
  • merge.currentHeaderBackground#1f3d2b33
  • merge.incomingContentBackground#1f2a3d22
  • merge.incomingHeaderBackground#1f2a3d33
  • minimap.background#06030d
  • minimap.errorHighlight#f38ba8
  • minimap.selectionHighlight#160d2f88
  • minimap.warningHighlight#f9e2af
  • minimapSlider.activeBackground#160d2faa
  • minimapSlider.background#160d2f55
  • minimapSlider.hoverBackground#160d2f88
  • notificationCenter.border#160d2f
  • notificationCenterHeader.background#06030d
  • notificationCenterHeader.foreground#a78bfa
  • notifications.background#06030d
  • notifications.border#160d2f
  • notifications.foreground#e6e1f0
  • notificationsErrorIcon.foreground#f38ba8
  • notificationsInfoIcon.foreground#89b4fa
  • notificationsWarningIcon.foreground#f9e2af
  • notificationToast.border#160d2f
  • panel.background#06030d
  • panel.border#160d2f
  • panelInput.border#160d2f
  • panelTitle.activeBorder#7F70FF
  • panelTitle.activeForeground#a78bfa
  • panelTitle.inactiveForeground#a78bfa
  • peekView.border#160d2f
  • peekViewEditor.background#06030d
  • peekViewEditor.matchHighlightBackground#160d2f
  • peekViewResult.background#06030d
  • peekViewResult.fileForeground#a78bfa
  • peekViewResult.lineForeground#a78bfa
  • peekViewResult.selectionBackground#160d2f
  • peekViewTitle.background#06030d
  • peekViewTitleDescription.foreground#a78bfa
  • progressBar.background#7F70FF
  • quickInput.background#06030d
  • quickInput.foreground#a78bfa
  • quickInputTitle.background#06030d
  • quickInputTitle.foreground#a78bfa
  • sash.hoverBorder#160d2f
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#160d2faa
  • scrollbarSlider.background#160d2f55
  • scrollbarSlider.hoverBackground#160d2f88
  • settings.checkboxBackground#06030d
  • settings.dropdownBackground#06030d
  • settings.dropdownBorder#160d2f
  • settings.focusedRowBackground#160d2f33
  • settings.headerForeground#a78bfa
  • settings.modifiedItemIndicator#7F70FF
  • settings.numberInputBackground#06030d
  • settings.numberInputBorder#160d2f
  • settings.textInputBackground#06030d
  • settings.textInputBorder#160d2f
  • sideBar.background#06030d
  • sideBar.border#160d2f
  • sideBar.foreground#a78bfa
  • sideBarSectionHeader.background#06030d
  • sideBarSectionHeader.border#160d2f
  • sideBarSectionHeader.foreground#a78bfa
  • sideBarTitle.foreground#a78bfa
  • statusBar.background#06030d
  • statusBar.border#160d2f
  • statusBar.debuggingBackground#160d2f
  • statusBar.foreground#a78bfa
  • statusBar.noFolderBackground#06030d
  • statusBarItem.hoverBackground#160d2f
  • statusBarItem.remoteBackground#7F70FF
  • statusBarItem.remoteForeground#06030d
  • tab.activeBackground#06030d
  • tab.activeBorder#7F70FF
  • tab.activeBorderTop#7F70FF
  • tab.activeForeground#a78bfa
  • tab.border#160d2f
  • tab.hoverBackground#160d2f
  • tab.inactiveBackground#06030d
  • tab.inactiveForeground#a78bfa
  • tab.unfocusedActiveForeground#2d0c69
  • tab.unfocusedInactiveForeground#400e82
  • terminal.ansiBlack#06030d
  • terminal.ansiBlue#5A2EFF
  • terminal.ansiBrightBlack#7F70FF
  • terminal.ansiBrightBlue#5A2EFF
  • terminal.ansiBrightCyan#7F70FF
  • terminal.ansiBrightGreen#5A2EFF
  • terminal.ansiBrightMagenta#5A2EFF
  • terminal.ansiBrightRed#5A2EFF
  • terminal.ansiBrightWhite#5A2EFF
  • terminal.ansiBrightYellow#7F70FF
  • terminal.ansiCyan#7F70FF
  • terminal.ansiGreen#5A2EFF
  • terminal.ansiMagenta#5A2EFF
  • terminal.ansiRed#5A2EFF
  • terminal.ansiWhite#5A2EFF
  • terminal.ansiYellow#7F70FF
  • terminal.background#06030d
  • terminal.border#160d2f
  • terminal.dropBackground#160d2f88
  • terminal.foreground#5A2EFF
  • terminal.selectionBackground#7F70FF
  • terminal.tab.activeBorder#160d2f
  • terminalCursor.background#06030d
  • terminalCursor.foreground#7F70FF
  • textLink.activeForeground#7F70FF
  • textLink.foreground#7F70FF
  • textPreformat.foreground#7F70FF
  • titleBar.activeBackground#06030d
  • titleBar.activeForeground#e6e1f0
  • titleBar.border#160d2f
  • titleBar.inactiveBackground#06030d
  • titleBar.inactiveForeground#9a8ca6
  • tree.indentGuidesStroke#160d2f
  • walkThrough.embeddedEditorBackground#06030d
  • welcomePage.buttonBackground#160d2f
  • welcomePage.buttonHoverBackground#7F70FF
  • widget.background#06030d
  • widget.border#160d2f
  • widget.foreground#a78bfa
  • widget.shadow#00000000
  • window.activeBorder#160d2f
  • window.inactiveBorder#160d2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier, keyword.control, keyword.other#5A2EFF
constant.character.escape, string.escape, constant.other.placeholder, string.format.placeholder#563FE6
string, string.quoted.double, string.quoted.single, string.quoted.other, string.interpolated#6C57FF
entity.name.type, entity.name.type.enum, entity.name.type.class, entity.name.type.struct, entity.name.type.interface, entity.name.type.alias, entity.name.type.typedef, support.type#4B3ABFitalic
entity.name.function, support.function#7159FF
entity.name.type.struct, entity.name.type.typedef#4B3ABFitalic
variable, variable.other, variable.other.member#6450E6
variable.parameter#5746D9
number, constant.numeric, constant.language.boolean, constant.language#6048E6
comment, comment.block, comment.line, punctuation.definition.comment#4C3AD6italic
keyword.operator, punctuation.section.block, punctuation.definition.block#5A2EFF
entity.name.function.macro, support.function.macro#4D3FCB
entity.name.function.decorator, support.function.decorator#4B3ABF
variable.object.property, support.type.property-name, entity.other.attribute-name#6355E6
constant.language.enum, variable.other.enummember, entity.name.enum#4C3ED1
punctuation.definition.bracket, punctuation.section.brackets, meta.brace#5046E0
meta.template.expression, meta.generic#4C3ED1
Purple Mono by daynizm2000 - VS Code Theme