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#0c1116
  • activityBar.border#1c2128
  • activityBar.foreground#7dc7f7
  • activityBar.inactiveForeground#7dc7f766
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#ffffff
  • badge.background#1f6feb
  • badge.foreground#ffffff
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • editor.background#0d1117
  • editor.foreground#c9d1d9
  • editor.hoverHighlightBackground#388bfd26
  • editor.inactiveSelectionBackground#264f78
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#1f6feb40
  • editor.wordHighlightBackground#48525a
  • editor.wordHighlightStrongBackground#1f6feb40
  • editorBracketMatch.background#3fb95040
  • editorBracketMatch.border#3fb950
  • editorCursor.foreground#79c0ff
  • editorError.foreground#f85149
  • editorGroup.border#30363d
  • editorGroupHeader.tabsBackground#010409
  • editorGutter.addedBackground#3fb950
  • editorGutter.background#0d1117
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#d2a8ff
  • editorHoverWidget.background#161b22
  • editorHoverWidget.border#30363d
  • editorIndentGuide.activeBackground#f0f6fc
  • editorIndentGuide.background#21262d
  • editorLineNumber.activeForeground#f0f6fc
  • editorLineNumber.foreground#6e7681
  • editorLink.activeForeground#58a6ff
  • editorMarkerNavigation.background#161b22
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#21262d
  • editorSuggestWidget.background#161b22
  • editorSuggestWidget.border#30363d
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.highlightForeground#58a6ff
  • editorSuggestWidget.selectedBackground#21262d
  • editorWarning.foreground#d29922
  • editorWhitespace.foreground#484f58
  • editorWidget.background#161b22
  • editorWidget.border#30363d
  • editorWidget.resizeBorder#58a6ff
  • extensionButton.prominentBackground#238636
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2ea043
  • focusBorder#1f6feb
  • foreground#c9d1d9
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#6e7681
  • gitDecoration.untrackedResourceForeground#3fb950
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#7d8590
  • inputOption.activeBackground#1f6feb26
  • inputOption.activeBorder#1f6feb
  • inputValidation.errorBackground#0d1117
  • inputValidation.errorBorder#f85149
  • inputValidation.infoBackground#0d1117
  • inputValidation.infoBorder#1f6feb
  • inputValidation.warningBackground#0d1117
  • inputValidation.warningBorder#d29922
  • list.activeSelectionBackground#21262d
  • list.activeSelectionForeground#c9d1d9
  • list.dropBackground#262c36
  • list.focusBackground#1f6feb26
  • list.focusForeground#c9d1d9
  • list.highlightForeground#58a6ff
  • list.hoverBackground#161b22
  • list.hoverForeground#c9d1d9
  • list.inactiveSelectionBackground#21262d66
  • list.inactiveSelectionForeground#c9d1d9
  • menu.background#161b22
  • menu.border#30363d
  • menu.foreground#c9d1d9
  • menu.selectionBackground#1f6feb26
  • menu.selectionForeground#c9d1d9
  • menu.separatorBackground#30363d
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#c9d1d9
  • panel.background#0d1117
  • panel.border#30363d
  • panel.dropBorder#58a6ff
  • panelTitle.activeBorder#fd7e14
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • peekView.border#1f6feb
  • peekViewEditor.background#0d111780
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#161b22
  • peekViewResult.fileForeground#c9d1d9
  • peekViewResult.lineForeground#8b949e
  • peekViewResult.matchHighlightBackground#bb800966
  • peekViewResult.selectionBackground#21262d
  • peekViewResult.selectionForeground#c9d1d9
  • peekViewTitle.background#161b22
  • peekViewTitleDescription.foreground#8b949e
  • peekViewTitleLabel.foreground#c9d1d9
  • progressBar.background#1f6feb
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#6e768166
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768144
  • selection.background#1f6feb40
  • settings.headerForeground#c9d1d9
  • settings.modifiedItemIndicator#d29922
  • sideBar.background#010409
  • sideBar.border#30363d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#161b22
  • sideBarSectionHeader.border#30363d
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#24292f
  • statusBar.border#30363d
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#24292f
  • statusBar.noFolderForeground#c9d1d9
  • statusBarItem.activeBackground#c9d1d91a
  • statusBarItem.hoverBackground#c9d1d91a
  • statusBarItem.prominentBackground#6639ba
  • statusBarItem.prominentHoverBackground#7c3aed
  • tab.activeBackground#0d1117
  • tab.activeBorder#0d1117
  • tab.activeBorderTop#fd7e14
  • tab.activeForeground#c9d1d9
  • tab.activeModifiedBorder#bb800966
  • tab.border#30363d
  • tab.hoverBackground#0d1117
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#010409
  • tab.inactiveForeground#8b949e
  • tab.inactiveModifiedBorder#bb800966
  • tab.unfocusedActiveBorder#0d1117
  • tab.unfocusedActiveBorderTop#fd7e1480
  • tab.unfocusedActiveForeground#c9d1d980
  • tab.unfocusedActiveModifiedBorder#bb80096
  • tab.unfocusedHoverBackground#0d111780
  • tab.unfocusedHoverForeground#c9d1d980
  • tab.unfocusedInactiveBackground#01040980
  • tab.unfocusedInactiveForeground#8b949e80
  • tab.unfocusedInactiveModifiedBorder#bb800940
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#3fb950
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • titleBar.activeBackground#24292f
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#24292f80
  • titleBar.inactiveForeground#c9d1d980
  • tree.indentGuidesStroke#21262d
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
constant, entity.name.constant, variable.other.constant, variable.language#79c0ff
entity, entity.name#d2a8ff
variable.parameter.function#c9d1d9
entity.name.tag#7ee787
keyword#ff7b72
storage, storage.type#ff7b72
storage.modifier.package, storage.modifier.import, storage.type.java#c9d1d9
string, punctuation.definition.string, string punctuation.section.embedded source#a5d6ff
support#79c0ff
meta.property-name#79c0ff
variable#ffa657
variable.other#c9d1d9
invalid.broken#ffa198italic
invalid.deprecated#ffa198italic
invalid.illegal#ffa198italic
invalid.unimplemented#ffa198italic
carriage-return#f0f6fcitalic underline
message.error#ffa198
string variable#a5d6ff
source.regexp, string.regexp#7ee787
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a5d6ff
string.regexp constant.character.escape#7ee787bold
support.constant#79c0ff
support.variable#79c0ff
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#ffa657
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#c9d1d9
markup.italic#c9d1d9italic
markup.bold#c9d1d9bold
markup.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ffa198
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7ee787
markup.changed, punctuation.definition.changed#ffdf5d