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.activeBorder#ffffff00
  • activityBar.activeFocusBorder#ffffff00
  • activityBar.background#0E1116
  • activityBar.border#ffffff15
  • activityBar.foreground#ffffffcc
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#0078d4e6
  • button.secondaryBackground#ffffff0f
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#0E1116
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41f8
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#b0b0b071
  • editor.selectionHighlightBackground#ffffff28
  • editorBracketMatch.background#ffffff28
  • editorBracketMatch.border#00000000
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#ffffff00
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#ffffff28
  • editorIndentGuide.background1#ffffff00
  • editorInlayHint.background#8b949e1b
  • editorInlayHint.typeBackground#8b949e1b
  • editorLineNumber.activeForeground#8F969F
  • editorLineNumber.foreground#8F969F
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#ffffff28
  • editorWidget.background#222222
  • editorWidget.border#ffffff00
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • gitDecoration.modifiedResourceForeground#6ab49b
  • icon.foreground#cccccc
  • input.background#ffffff22
  • input.border#ffffff00
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff77
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusForeground#ffffffb6
  • list.inactiveSelectionBackground#ffffff2e
  • list.inactiveSelectionForeground#ffffffe0
  • menu.background#0E1116
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#ffffff15
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb80096f
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb80096f
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#1f1f1f
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#ffffff70
  • scrollbarSlider.background#ffffff46
  • scrollbarSlider.hoverBackground#6e768145
  • selection.background#ffffff44
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#0E1116
  • sideBar.border#ffffff15
  • sideBar.foreground#ffffffbb
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#0E1116
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffffab
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#ffffff82
  • statusBar.noFolderBackground#0E1116
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff22
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#ffffffda
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#ffffff98
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#ffffffca
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40a6ff
  • textLink.foreground#40a6ff
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#0E1116
  • titleBar.activeForeground#ffffffaf
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#ffffffa4
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#9198A1
string.quoted.docstring, comment.block.documentation#A5D6FF
#CBAAF9
keyword.control, storage.type, storage.modifier, keyword.other, keyword.import#FF7B72
string, string.quoted, string.template, string.regexp#A5D6FF
support.type.property-name#7EE787
meta.decorator, punctuation.decorator, meta.function.decorator, entity.name.function, support.function, meta.function-call, meta.method-call, support.type#D2A8FF
entity.name.type.class, entity.name.class, entity.other.inherited-class#FFA657
variable, variable.other, variable.parameter, variable.language, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.arguments, meta.parameters, meta.block, source, source.python, punctuation.separator.period, punctuation.separator.arguments#F0F6FC
constant.numeric, constant.language, constant.character.escape, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, variable.other.property, meta.function.decorator#79C0FF
GitHub Dark Web Theme by Sputchik - VS Code Theme