Skip to main content
CodingTheme

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.activeBorder#005cc5
  • activityBar.background#1b1f23
  • activityBar.dropBorder#e1e4e8
  • activityBar.foreground#e1e4e8
  • activityBar.inactiveForeground#586069
  • activityBarBadge.background#005cc5
  • activityBarBadge.foreground#1b1f23
  • badge.background#005cc5
  • badge.foreground#1b1f23
  • breadcrumb.focusForeground#005cc5
  • breadcrumbPicker.background#24292e
  • button.background#22863a
  • button.foreground#1b1f23
  • button.hoverBackground#176f2c
  • button.secondaryBackground#005cc5
  • button.secondaryForeground#1b1f23
  • button.secondaryHoverBackground#044289
  • charts.blue#005cc5
  • charts.foreground#e1e4e8
  • charts.green#22863a
  • charts.lines#005cc5
  • charts.orange#e36209
  • charts.purple#5a32a3
  • charts.red#cb2431
  • charts.yellow#f9c513
  • checkbox.background#2f363d
  • checkbox.border#444d56
  • debugConsole.errorForeground#cb2431
  • debugConsole.infoForeground#5a32a3
  • debugConsole.sourceForeground#005cc5
  • debugConsole.warningForeground#f9c513
  • debugConsoleInputIcon.foreground#005cc5
  • debugExceptionWidget.border#24292e
  • debugIcon.breakpointDisabledForeground#f6f8fa
  • debugIcon.breakpointForeground#cb2431
  • debugIcon.continueForeground#5a32a3
  • debugIcon.disconnectForeground#cb2431
  • debugIcon.pauseForeground#5a32a3
  • debugIcon.restartForeground#5a32a3
  • debugIcon.startForeground#5a32a3
  • debugIcon.stepBackForeground#5a32a3
  • debugIcon.stepIntoForeground#5a32a3
  • debugIcon.stepOutForeground#5a32a3
  • debugIcon.stepOverForeground#5a32a3
  • debugIcon.stopForeground#cb2431
  • descriptionForeground#6a737d
  • diffEditor.border#2f363d
  • diffEditor.deletedTextBackground#cb24314d
  • diffEditor.insertedTextBackground#22863a4d
  • dropdown.background#2f363d
  • dropdown.border#444d56
  • dropdown.foreground#e1e4e8
  • dropdown.listBackground#1b1f23
  • editor.background#1b1f23
  • editor.findMatchBackground#f9c51380
  • editor.findMatchHighlightBackground#f9c51380
  • editor.findRangeHighlightBackground#58606933
  • editor.focusedStackFrameHighlightBackground#5a32a380
  • editor.foldBackground#24292e
  • editor.foreground#f6f8fa
  • editor.hoverHighlightBackground#005cc580
  • editor.inactiveSelectionBackground#005cc533
  • editor.lineHighlightBackground#24292e
  • editor.selectionBackground#005cc54d
  • editor.selectionHighlightBackground#005cc533
  • editor.stackFrameHighlightBackground#5a32a380
  • editorBracketMatch.background#005cc51a
  • editorBracketMatch.border#005cc51a
  • editorCodeLens.foreground#586069
  • editorCursor.foreground#005cc5
  • editorError.foreground#cb2431
  • editorGroup.border#2f363d
  • editorGroup.dropBackground#005cc533
  • editorGroupHeader.border#1b1f23
  • editorGroupHeader.noTabsBackground#1b1f23
  • editorGroupHeader.tabsBackground#1b1f23
  • editorGroupHeader.tabsBorder#1b1f23
  • editorGutter.addedBackground#22863a
  • editorGutter.deletedBackground#cb2431
  • editorGutter.modifiedBackground#005cc5
  • editorHint.foreground#005cc5
  • editorHoverWidget.border#24292e
  • editorHoverWidget.statusBarBackground#2f363d
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#2f363d
  • editorInfo.foreground#005cc5
  • editorLightBulb.foreground#f9c513
  • editorLightBulbAutoFix.foreground#f9c513
  • editorLineNumber.activeForeground#f6f8fa
  • editorLineNumber.foreground#444d56
  • editorLink.activeForeground#005cc5
  • editorOverviewRuler.addedForeground#005cc5
  • editorOverviewRuler.background#1b1f23
  • editorOverviewRuler.border#1b1f23
  • editorOverviewRuler.deletedForeground#cb2431
  • editorOverviewRuler.findMatchForeground#1b1f23
  • editorOverviewRuler.infoForeground#005cc5
  • editorOverviewRuler.modifiedForeground#005cc5
  • editorOverviewRuler.warningForeground#f9c513
  • editorSuggestWidget.border#24292e
  • editorSuggestWidget.foreground#f6f8fa
  • editorSuggestWidget.highlightForeground#005cc5
  • editorSuggestWidget.selectedBackground#05264c
  • editorUnnecessaryCode.opacity#f6f8fa80
  • editorWarning.foreground#f9c513
  • editorWhitespace.foreground#444d56
  • editorWidget.background#24292e
  • editorWidget.border:#24292e
  • editorWidget.resizeBorder#005cc5
  • errorForeground#cb2431
  • focusBorder#1b1f23
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#28a745
  • gitDecoration.conflictingResourceForeground#e36209
  • gitDecoration.deletedResourceForeground#cb2431
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#005cc5
  • gitDecoration.stageDeletedResourceForeground#cb2431
  • gitDecoration.stageModifiedResourceForeground#005cc5
  • gitDecoration.submoduleResourceForeground#959da5
  • gitDecoration.untrackedResourceForeground#28a745
  • icon.foreground#005cc5
  • imagePreview.border#2f363d
  • input.background#2f363d
  • input.border#444d56
  • input.foreground#e1e4e8
  • input.placeholderForeground#586069
  • inputOption.activeBackground#032f62
  • inputOption.activeForeground#e1e4e8
  • inputValidation.errorBackground#9e1c23
  • inputValidation.errorBorder#9e1c23
  • inputValidation.infoBackground#032f62
  • inputValidation.infoBorder#032f62
  • inputValidation.warningBackground#b08800
  • inputValidation.warningBorder#b08800
  • list.activeSelectionBackground#1b1f23
  • list.activeSelectionForeground#005cc5
  • list.deemphasizedForeground#f9c513
  • list.dropBackground#005cc533
  • list.errorForeground#cb2431
  • list.filterMatchBackground#f9c513
  • list.filterMatchBorder#f9c513
  • list.focusBackground#05264c
  • list.focusForeground#e1e4e8
  • list.highlightForeground#e1e4e8
  • list.hoverBackground#1b1f23
  • list.hoverForeground#f6f8fa
  • list.inactiveFocusBackground#1b1f23
  • list.inactiveSelectionBackground#1b1f23
  • list.inactiveSelectionForeground#005cc5
  • list.invalidItemForeground#cb2431
  • list.warningForeground#f9c513
  • listFilterWidget.background#f9c513
  • listFilterWidget.noMatchesOutline#f9c513
  • merge.currentContentBackground#22863a66
  • merge.currentHeaderBackground#22863ae6
  • merge.incomingContentBackground#005cc566
  • merge.incomingHeaderBackground#005cc5e6
  • minimap.background#1b1f23
  • minimap.errorHighlight#cb2431
  • minimap.findMatchHighlight#f9c513
  • minimap.selectionHighlight#005cc5
  • minimap.warningHighlight#f9c513
  • minimapGutter.addedBackground#22863a
  • minimapGutter.deletedBackground#cb2431
  • minimapGutter.modifiedBackground#005cc5
  • minimapSlider.activeBackground#58606966
  • minimapSlider.background#58606966
  • minimapSlider.hoverBackground#58606966
  • notificationsErrorIcon.foreground#cb2431
  • notificationsInfoIcon.foreground#005cc5
  • notificationsWarningIcon.foreground#f9c513
  • panelTitle.activeBorder#005cc5
  • peekView.border#2f363d
  • peekViewEditor.background#1b1f23
  • peekViewEditor.matchHighlightBackground#f9c51380
  • peekViewResult.background#1b1f23
  • peekViewResult.lineForeground#1b1f23
  • peekViewResult.selectionBackground#1b1f23
  • peekViewResult.selectionForeground#005cc5
  • peekViewTitle.background#24292e
  • peekViewTitleDescription.foreground#586069
  • problemsErrorIcon.foreground#d73a49
  • problemsInfoIcon.foreground#005cc5
  • problemsWarningIcon.foreground#f9c513
  • progressBar.background#005cc5
  • scrollbar.shadow#1b1f23
  • scrollbarSlider.activeBackground#5860694d
  • scrollbarSlider.background#58606966
  • scrollbarSlider.hoverBackground#5860694d
  • sideBar.background#1b1f23
  • sideBar.dropBackground#005cc533
  • sideBar.foreground#586069
  • sideBarSectionHeader.background#1b1f23
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#1b1f23
  • statusBar.debuggingBackground#5a32a3
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#e1e4e8
  • tab.activeBackground#1b1f23
  • tab.activeBorder#005cc5
  • tab.activeForeground#e1e4e8
  • tab.border#1b1f23
  • tab.hoverForeground#e1e4e8
  • tab.inactiveBackground#1b1f23
  • tab.inactiveForeground#586069
  • tab.unfocusedHoverForeground#e1e4e8
  • terminal.ansiBlack#1b1f23
  • terminal.ansiBlue#005cc5
  • terminal.ansiBrightBlack#1b1f23
  • terminal.ansiBrightBlue#005cc5
  • terminal.ansiBrightCyan#005cc5
  • terminal.ansiBrightGreen#22863a
  • terminal.ansiBrightMagenta#5a32a3
  • terminal.ansiBrightRed#cb2431
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#f9c513
  • terminal.ansiCyan#005cc5
  • terminal.ansiGreen#22863a
  • terminal.ansiMagenta#5a32a3
  • terminal.ansiRed#cb2431
  • terminal.ansiWhite#fff
  • terminal.ansiYellow#f9c513
  • terminal.background#1b1f23
  • terminal.foreground#f6f8fa
  • terminal.selectionBackground#005cc54d
  • textBlockQuote.background#1b1f23
  • textBlockQuote.border#2f363d
  • textCodeBlock.background#24292e
  • textLink.activeForeground#005cc5
  • textLink.foreground#005cc5
  • textPreformat.foreground#586069
  • textSeparator.foreground#24292e
  • titleBar.activeBackground#1b1f23
  • titleBar.activeForeground#e1e4e8
  • tree.indentGuidesStroke#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#959da5
constant, entity.name.constant, variable.other.constant, variable.language#2188ff
entity, entity.name#b392f0
variable.parameter.function#f6f8fa
entity.name.tag#34d058
keyword#ea4a5a
storage, storage.type#ea4a5a
storage.modifier.package, storage.modifier.import, storage.type.java#f6f8fa
string, punctuation.definition.string, string punctuation.section.embedded source#79b8ff
support#b392f0
meta.property-name#005cc5
variable#ffab70
variable.other#f6f8fa
invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented#ea4a5aitalic
carriage-return#f6f8faitalic underline
message.error#ea4a5a
string source#f6f8fa
string variable#79b8ff
source.regexp, string.regexp, string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0366d6
string.regexp constant.character.escape#2188ffbold
support.constant#79b8ff
support.variable#79b8ff
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#2188ffbold
markup.quote#34d058
markup.italic#f6f8faitalic
markup.bold#f6f8fabold
markup.raw#2188ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#e36209
markup.ignored, markup.untracked#f6f8fa
meta.diff.range#5a32a3bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
constant.other.reference.link, string.other.link#2188ffunderline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...