Skip to main content
Coding Theme

Color themes

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#FF6A00
  • activityBar.foreground#FF6A00
  • activityBar.inactiveForeground#FFF8DC
  • activityBarBadge.background#000
  • activityBarBadge.foreground#FFF8DC
  • badge.background#000000
  • badge.foreground#FF6A00
  • breadcrumb.foreground#FFF8DC
  • button.background#000000
  • button.border#FF6A00
  • button.foreground#FFF8DC
  • button.hoverBackground#000000
  • checkbox.border#FF6A00
  • contrastActiveBorder#000000
  • contrastBorder#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#FF6A00
  • debugToolBar.background#000000
  • debugToolBar.border#FF6A00
  • diffEditor.insertedTextBackground#97d80000
  • diffEditor.insertedTextBorder#97d800af
  • diffEditor.removedTextBackground#ff5c5c00
  • diffEditor.removedTextBorder#ff1f1fa6
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#FFF8DC
  • editor.background#000000
  • editor.findMatchBackground#fff8dc41
  • editor.findMatchBorder#FFF8DC6e
  • editor.findMatchForeground#FFF8DC
  • editor.findMatchHighlightBackground#bebebe50
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#fff8dc3a
  • editor.lineHighlightBorder#ff6a0033
  • editor.selectionBackground#fff8dc3a
  • editor.selectionForeground#e5f5c000
  • editorGroup.border#FF6A00
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#FF6A00
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorHint.foreground#FF6A00
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#FF6A00
  • editorIndentGuide.activeBackground1#FF6A00
  • editorLineNumber.activeForeground#FF6A00
  • editorLineNumber.foreground#FFF8DC
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#FF6A00
  • editorSuggestWidget.foreground#FFF8DC
  • editorSuggestWidget.highlightForeground#FFF8DC
  • editorSuggestWidget.selectedBackground#FF6A0080
  • editorWidget.background#000000
  • editorWidget.border#000000
  • extensionButton.separator#000
  • focusBorder#FF6A00
  • foreground#fFF8DC
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#eeeeee79
  • icon.foreground#fFF8DC
  • input.background#000000
  • input.border#FF6A00
  • input.foreground#FFF8DC
  • input.placeholderForeground#FFF8DC
  • list.activeSelectionBackground#FF6A0080
  • list.hoverBackground#FF6A004b
  • list.inactiveFocusOutline#FFF8DC
  • list.inactiveSelectionBackground#FF6A0080
  • menu.background#000000
  • menu.border#FF6A00
  • merge.border#FF6A00
  • notificationCenter.border#FF6A00
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#FFF8DC
  • notifications.background#000000
  • notifications.border#FF6A00
  • notifications.foreground#FFF8DC
  • panel.background#000000
  • panel.border#FF6A00
  • panel.dropBorder#FF6A00
  • panelSection.border#FF6A00
  • panelTitle.activeForeground#FF6A00
  • panelTitle.inactiveForeground#FFF8DC
  • peekView.border#FF6A00
  • peekViewTitle.background#000000
  • peekViewTitleLabel.foreground#FFF8DC
  • quickInput.background#000000
  • quickInputList.focusBackground#FF6A004b
  • scmGraph.historyItemHoverLabelForeground#000000
  • scmGraph.historyItemRefColor#66ffa6
  • scmGraph.historyItemRemoteRefColor#FFBF00
  • scrollbarSlider.background#ff6a0052
  • sideBar.background#000
  • sideBar.border#FF6A00
  • sideBar.foreground#FFF8DC
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#FF6A008a
  • sideBarSectionHeader.foreground#FFF8DC
  • sideBarTitle.foreground#FFF8DC
  • statusBar.background#000000
  • statusBar.border#FF6A00
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#FFF8DC
  • statusBar.foreground#FFF8DC
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#FFF8DC
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#000000
  • tab.activeBorder#FF6A00
  • tab.activeForeground#FFF8DC
  • tab.activeModifiedBorder#FF6A00
  • tab.border#FF6A00
  • tab.hoverBackground#FFF8DC36
  • tab.hoverBorder#FFF8DC
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#FFF8DC
  • tab.inactiveModifiedBorder#FFF8DC
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#FF6A00
  • tab.unfocusedActiveForeground#FFF8DC
  • tab.unfocusedHoverBackground#FFF8DC36
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#FFF8DC
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#66ffa6
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#66ffa6
  • terminal.ansiBrightCyan#4c00ff
  • terminal.ansiBrightGreen#66ffa6
  • terminal.ansiBrightMagenta#ff71ff
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#FFF8DC
  • terminal.ansiBrightYellow#FF6A00
  • terminal.ansiCyan#4c00ff
  • terminal.ansiGreen#66ffa6
  • terminal.ansiMagenta#ff71ff
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#FFF8DC
  • terminal.ansiYellow#FF6A00
  • terminal.border#FF6A00
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFF8DC
  • titleBar.border#FF6A00
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#FFF8DC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#eeeeee92
string#eeeeee92
constant.numeric#eeeeee92
constant.language#eeeeee92
constant.character, constant.other#eeeeee92
variable#fFF8DC
keyword#FF6A00bold
storage#FF6A00bold
storage.type#66ffa6italic
entity.name.class#FFBF00underline
entity.other.inherited-class#FFBF00italic underline
entity.name.function#FFBF00
variable.parameter#cbb5ffitalic
entity.name.tag#FF6A00bold
entity.other.attribute-name#cbb5ff
support.function#66ffa6
support.constant#66ffa6
support.type, support.class#66ffa6italic
support.other.variable
invalid#F8F8F0bold
invalid.deprecated#F8F8F0
meta.structure.dictionary.json, string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#FF6A00
markup.inserted#FFBF00
markup.changed#eeeeee92
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#eeeeee92
variable.language#FFBF00
heading.1.markdown#FFBF00bold
punctuation.definition.heading.markdown#FFBF00
entity.name.section.markdown#FFBF00
punctuation.definition.list.begin.markdown#eeeeee92
meta.image.inline.markdown#eeeeee92
markup.bold.markdown#FFF8DCbold
markup.italic.markdown#FFF8DCitalic
markup.inline.raw.string.markdown#66ffa6
meta.separator.markdown#8f8f8f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#eeeeee92
variable.other.object, punctuation.accessor, meta.brace.round, variable.other.readwrite, punctuation.separator.comma#FFF8DC