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.background#0E0F13
  • activityBar.foreground#E95678E6
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#06060C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • banner.foreground#E95678E6
  • banner.iconForeground#E95678E6
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • button.secondaryBackground#E95678E6
  • debugToolBar.background#0b0c0f
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#1b1c25
  • dropdown.listBackground#2E303E
  • editor.background#0b0c0f
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.foreground#E95378
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#2E303EB3
  • editor.selectionForeground#E95378
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#E95378
  • editorCursor.background#0b0c0f
  • editorCursor.foreground#E95378
  • editorError.foreground#F43E5C
  • editorGroup.border#22252e
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#0b0c0f
  • editorGutter.addedBackground#FAB795
  • editorGutter.deletedBackground#F43E5C
  • editorGutter.modifiedBackground#3FC4DE
  • editorIndentGuide.activeBackground1#2E303E
  • editorIndentGuide.background1#2E303E80
  • editorLineNumber.activeForeground#d5d8dacb
  • editorLineNumber.foreground#d5d8da33
  • editorOverviewRuler.addedForeground#21BFC280
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#ffb00080
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#E95378
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#27D797B3
  • editorWidget.background#1b1c25
  • editorWidget.border#1b1c25
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#22252e
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#FAB795
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#3FC4DE
  • gitDecoration.renamedResourceForeground#FAB795
  • gitDecoration.stageDeletedResourceForeground#F43E5C
  • gitDecoration.stageModifiedResourceForeground#21BFC280
  • gitDecoration.untrackedResourceForeground#E95678E6
  • icon.foreground#E95678E6
  • input.background#2E303E
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.focusOutline#D5D8DA
  • list.highlightForeground#E95378
  • list.hoverBackground#6c6f9349
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#29D398
  • menu.selectionBackground#6c6f9349
  • menu.selectionBorder#6c6f9349
  • notifications.background#14151B
  • panelTitle.activeBorder#E95378
  • panelTitle.activeForeground#E95378
  • peekView.border#1A1C23
  • peekViewEditor.background#1b1c25
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#1b1c25
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#1b1c25
  • pickerGroup.foreground#E95378E6
  • progressBar.background#E95378
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#0E0F13
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#0E0F13
  • sideBarSectionHeader.foreground#D5D8DA
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0b0c0f
  • statusBar.debuggingBackground#E95378
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#d5d8dacb
  • statusBar.noFolderBackground#0b0c0f
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#0b0c0f
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlack#29D398
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#29D398
  • terminal.ansiBrightWhite#29D398
  • terminal.ansiBrightYellow#FAB795
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#E95678
  • terminal.selectionBackground#6C6F934D
  • terminalCommandDecoration.errorBackground#F43E5C
  • terminalCommandDecoration.successBackground#29D398
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#E95678
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • titleBar.activeBackground#0b0c0f
  • titleBar.inactiveBackground#0b0c0f
  • walkThrough.embeddedEditorBackground#1b1c25
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d5d8da33italic
constant#FAB795
constant.character.escape#3FC4DE
entity.name#E9C9A7E6
entity.name.function#3FC4DE
entity.name.tag#3FC4DE
entity.name.type, storage.type.cs#E9C9A7E6
entity.other.attribute-name#F09483E6italic
entity.other.inherited-class#FAB795E6
entity.other.attribute-name.id#3FC4DE
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
entity.name.variable, variable#3FC4DE
keyword#29D398italic
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#29D398
keyword.other.unit#F09483E6
markup.quote#FAB795B3italic
markup.heading, entity.name.section#3FC4DE
markup.bold#29D398bold
markup.italic#29D398italic
markup.inline.raw, markup.fenced_code.block#F09483E6
markup.underline.link#FAB795E6
storage#29D398italic
string.quoted, string.template#FAB795E6
string.regexp#E95678E6
string.other.link#E95678E6
support#3FC4DE
support.function#29D398
support.variable#E95678E6
support.type.property-name, meta.object-literal.key#E95678E6
support.type.property-name.css#BBBBBB
variable.language#E95678E6italic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#E95678E6
punctuation.separator#BBBBBB
punctuation.definition.template-expression#29D398
punctuation.section.embedded#29D398
punctuation.definition.list#3FC4DE

Shiki preview

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

Loading...

Wallace Corporation by Howard C. - VS Code Theme