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#101114
  • activityBar.foreground#d7dae6e7
  • activityBarBadge.background#fe5e78
  • activityBarBadge.foreground#1C1E26
  • badge.background#242631
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#13141a
  • button.background#181922
  • debugToolBar.background#14151b
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#1a1b24
  • dropdown.listBackground#0c0909
  • editor.background#14151b
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#2E303EB3
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#14151b
  • editorCursor.foreground#fe5e78
  • editorError.foreground#fe5e78
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#242631
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#9b9b9b
  • editorLineNumber.foreground#99999952
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#fe5e78
  • editorWarning.foreground#f8d64c
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#fe5e78
  • extensionButton.prominentBackground#fe5e78
  • extensionButton.prominentHoverBackground#fe5e78
  • focusBorder#fe5e78
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#00ffa2ab
  • gitDecoration.deletedResourceForeground#ff002b
  • gitDecoration.ignoredResourceForeground#7a7a7a8a
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#181a20
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#f43e5c88
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#393b5080
  • list.errorForeground#fe5e78E6
  • list.focusBackground#26273380
  • list.focusForeground#D5D8DA
  • list.highlightForeground#fe5e78
  • list.hoverBackground#1e1f2980
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#1e202980
  • list.inactiveSelectionBackground#1e1f294d
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#ffe683d8
  • menubar.selectionBackground#e95678e6
  • menubar.selectionForeground#ffffff
  • panelTitle.activeBorder#fe5e78
  • peekView.border#1A1C23
  • peekViewEditor.background#17181f
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#fe5e78
  • progressBar.background#fe5e78
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#3c3e5580
  • scrollbarSlider.background#2d2f441a
  • scrollbarSlider.hoverBackground#383a4e4d
  • selection.background#42455c80
  • sideBar.background#121318
  • sideBar.dropBackground#606275
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#131418
  • sideBarSectionHeader.foreground#ffffffb3
  • statusBar.background#0e0f13
  • statusBar.debuggingBackground#fe5e78
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#afafaf
  • statusBar.noFolderBackground#191b22
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#121212
  • tab.activeBorder#fe5e78
  • tab.border#1c1e26b7
  • tab.inactiveBackground#16181f
  • terminal.ansiBlue#1f9ef3
  • terminal.ansiBrightBlue#49c5ff
  • terminal.ansiBrightCyan#6eeeff
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#ffde4d
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#00e293
  • terminal.ansiMagenta#f83299
  • terminal.ansiRed#ff144b
  • terminal.ansiYellow#ffbb3c
  • terminal.foreground#e0e0e0
  • terminal.selectionBackground#5a5d7a4d
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#9798aaa6
  • textLink.activeForeground#fe5e78
  • textLink.foreground#fe5e78
  • titleBar.activeBackground#13151b
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#09090c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#757575dcitalic
variable#f17a7a
constant#fc735ae6italic
constant.character.escape#20c2d1
entity.name#ffd486e6
entity.name.function#20c2d1
entity.name.tag#e95678
entity.name.type, storage.type.cs#ffd486e6
entity.other.attribute-name#F09483E6italic
entity.other.inherited-class#ffd486e6
entity.other.attribute-name.id#20c2d1
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#fd4a68
variable.other.constant#ffc862f3
keyword#B877DBE6italic
keyword.operator#eeeeee
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#B877DBE6
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#e95678
markup.bold#B877DBE6bold
markup.italic#20c2d1italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#B877DBE6italic
string.quoted, string.template#9ad479
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#20c2d1
support.variable#FAC29AE6
support.type.property-name, meta.object-literal.key#e95678
support.type.property-name.css#cccccc
variable.language#FAC29AE6italic
variable.parameteritalic
string.template meta.embedded#cccccc
punctuation.definition.tag#E95678B3
punctuation.separator#cccccc
punctuation.definition.template-expression#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6
meta.function-call.generic.python#22daeb
Freak Dark by Adnan Zareef - VS Code Theme