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#000
  • activityBar.border#d4d4d475
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#d4d4d475
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#d4d4d4
  • badge.background#000000
  • badge.foreground#d4d4d4
  • breadcrumb.foreground#d4d4d4
  • button.background#000000
  • button.foreground#ffffff
  • button.hoverBackground#000000
  • checkbox.border#d4d4d475
  • contrastActiveBorder#00000000
  • contrastBorder#d4d4d475
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#d4d4d4
  • debugToolBar.background#000000
  • debugToolBar.border#d4d4d4
  • diffEditor.insertedTextBackground#34d39955
  • diffEditor.insertedTextBorder#34d39955
  • diffEditor.removedTextBackground#f43f5e88
  • diffEditor.removedTextBorder#34d39955
  • dropdown.background#000000
  • dropdown.border#d4d4d475
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#6688cc
  • editor.findMatchBorder#d4d4d475
  • editor.findMatchHighlightBackground#73737344
  • editor.foreground#ffffff
  • editor.lineHighlightBorder#d4d4d475
  • editor.selectionBackground#6688cc
  • editor.selectionForeground#000c18
  • editorGroup.border#d4d4d475
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#60a5fa
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#d4d4d475
  • editorIndentGuide.activeBackground1#737373
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#d4d4d4
  • editorLink.activeForeground#60a5fa
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#f43f5e
  • editorMarkerNavigationWarning.background#34d399
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#d4d4d4
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#60a5fa
  • editorSuggestWidget.selectedBackground#d4d4d475
  • editorWidget.background#000000
  • editorWidget.border#000000
  • focusBorder#d4d4d475
  • foreground#ffffff
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#d4d4d475
  • input.foreground#ffffff
  • input.placeholderForeground#d4d4d475
  • list.activeSelectionBackground#d4d4d475
  • list.hoverBackground#d4d4d475
  • list.inactiveFocusOutline#d4d4d4
  • list.inactiveSelectionBackground#d4d4d415
  • menu.background#000000
  • menu.border#d4d4d475
  • merge.border#d4d4d475
  • notificationCenter.border#d4d4d4
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#000000
  • notifications.border#d4d4d475
  • notifications.foreground#ffffff
  • panel.background#000000
  • panel.border#d4d4d475
  • panel.dropBorder#d4d4d4
  • panelSection.border#d4d4d475
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#d4d4d475
  • peekView.border#d4d4d475
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#000000
  • sideBar.background#000000
  • sideBar.border#d4d4d475
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#d4d4d475
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#000000
  • statusBar.border#d4d4d475
  • statusBar.debuggingBackground#60a5fa15
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#d4d4d4
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#d4d4d4
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#ffffff
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#d4d4d475
  • tab.border#d4d4d475
  • tab.hoverBackground#d4d4d425
  • tab.hoverBorder#d4d4d475
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff
  • tab.inactiveModifiedBorder#d4d4d475
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#d4d4d4
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedHoverBackground#d4d4d425
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0087ff
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#0087ff
  • terminal.ansiBrightCyan#875fff
  • terminal.ansiBrightGreen#00af87
  • terminal.ansiBrightMagenta#fb923c
  • terminal.ansiBrightRed#ff005f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#875fff
  • terminal.ansiGreen#00af87
  • terminal.ansiMagenta#fb923c
  • terminal.ansiRed#ff005f
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd700
  • terminal.border#d4d4d475
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#d4d4d4
  • titleBar.border#d4d4d475
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment#fb923c
string#fde047
constant.numeric#c084fc
constant.language#c084fc
constant.character, constant.other#c084fc
variable
keyword#f43f5ebold
storage#f43f5ebold
storage.type#60a5faitalic
entity.name.class#34d399underline
entity.other.inherited-class#34d399italic underline
entity.name.function#34d399
variable.parameteritalic
entity.name.tag#f43f5ebold
entity.other.attribute-name#34d399
support.function#60a5fa
support.constant#60a5fa
support.type, support.class#60a5faitalic
support.other.variable
invalid#d4d4d4bold
invalid.deprecated#d4d4d4
meta.structure.dictionary.json, string.quoted.double.json#d4d4d4
meta.diff, meta.diff.header#737373
markup.deleted#f43f5e
markup.inserted#34d399
markup.changed#fde047
constant.numeric.line-number.find-in-files - match#c084fca0
entity.name.filename.find-in-files#fde047
variable.language#34d399
heading.1.markdown#34d399bold
punctuation.definition.heading.markdown#34d399
entity.name.section.markdown#34d399
punctuation.definition.list.begin.markdown#c084fc
meta.image.inline.markdown#fde047
markup.bold.markdown#ffffffbold
markup.italic.markdown#ffffffitalic
markup.inline.raw.string.markdown#60a5fa
meta.separator.markdown#d4d4d4
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#c084fc
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#ffffff
vitrioleuse by vitrioleuse - VS Code Theme