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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#5a58de
  • activityBar.background#181818
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#5a58de
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#5a58de
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#5c59ee
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#8c99ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#1f1f1f
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d4122
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#5a58de
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#5a58de
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#989898
  • inputOption.activeBackground#524ff082
  • inputOption.activeBorder#524ff0
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#5a58de
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#5a58de
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#5a58de
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#181818
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#5a58de
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#5a58de
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#5a58de
  • statusBarItem.hoverBackground#f1f1f133
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#5a58de
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#5a58de
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#1f1f1f
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#5a58de
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#7f7df5
  • textLink.foreground#7f7df5
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#5a58de
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.double.json, string.quoted.single.json#CBA6F7
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#A6BDF7
support.type.property-name.json#9AD4F7
constant.numeric.json, constant.language.json#89DCEB
constant.language.boolean.json, constant.language.null.json#A6BDF7
storage.type.primitive.cpp, storage.type.built-in.primitive.cpp#A6BDF7
keyword.type.primitive.cpp#A6BDF7
punctuation.section.block.begin.bracket.curly.function.definition.cpp, punctuation.section.block.end.bracket.curly.function.definition.cpp, punctuation.section.block.begin.bracket.curly.cpp, punctuation.section.block.end.bracket.curly.cpp, punctuation.section.parameters.begin.bracket.round.cpp, punctuation.section.parameters.end.bracket.round.cpp, punctuation.section.parens.begin.bracket.round.cpp, punctuation.section.parens.end.bracket.round.cpp#A6BDF7
string.quoted.other.lt-gt.include.cpp#CBA6F7
comment.line.double-slash.cpp#96b1d6
comment.block.cpp#96b1d6
entity.name.type.cpp#9AD4F7
keyword.control.if.cpp#A6BDF7
keyword.control.else.cpp#A6BDF7
keyword.control.while.cpp#A6BDF7
constant.numeric.cpp#bfd0fd
constant.numeric.decimal.cpp#bfd0fd
keyword.control.directive.include.cpp#bfd0fd
keyword.control.cs#A6BDF7
storage.type.cs#9AD4F7
entity.name.type.class.cs#9AD4F7
variable.parameter.cs#CBA6F7
string.quoted.double.cs#CBA6F7
comment.line.double-slash.cs#96b1d6
constant.numeric.cs#89DCEB
entity.name.function.cs#B4E0FF
punctuation.terminator.statement.cs#ffffff
Dark Modern Lavender by Elytra17 - VS Code Theme