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#0F0F0A
  • activityBar.foreground#FF69B4
  • activityBar.inactiveForeground#EEEEEE
  • activityBarBadge.background#FF69B4
  • activityBarBadge.foreground#0F0F0A
  • badge.background#FF69B4
  • badge.foreground#0F0F0A
  • button.background#7E57C2D9
  • button.foreground#FFFFFF
  • button.hoverBackground#9367D8
  • button.secondaryBackground#2A2A1F
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#3A3A2A
  • debugToolBar.background#0F0F0A
  • diffEditor.insertedTextBackground#F2A0C044
  • diffEditor.removedTextBackground#F4A8C444
  • dropdown.background#0F0F0A
  • dropdown.border#4A4A4044
  • editor.background#0F0F0A
  • editor.findMatchBackground#FF69B480
  • editor.findMatchHighlightBackground#FF69B440
  • editor.foreground#FFFFFF
  • editor.gutterBackground#0F0F0A
  • editor.lineHighlightBackground#171710
  • editor.selectionBackground#272720
  • editor.wordHighlightBackground#FF69B480
  • editor.wordHighlightStrongBackground#FF69B499
  • editorActiveLineNumber.foreground#FF69B4
  • editorBracketMatch.background#F2A0C0AA
  • editorBracketMatch.border#FF69B4
  • editorCursor.foreground#FF69B4
  • editorGroup.border#4A4A4044
  • editorGroupHeader.tabsBackground#0F0F0A
  • editorGroupHeader.tabsBorder#4A4A4044
  • editorGutter.addedBackground#F2A0C0CC
  • editorGutter.deletedBackground#F4A8C4
  • editorGutter.modifiedBackground#A0E0D0
  • editorHoverWidget.background#0F0F0A
  • editorHoverWidget.border#4A4A4044
  • editorIndentGuide.activeBackground#FF69B4
  • editorIndentGuide.background#4A4A4066
  • editorLineNumber.foreground#E0E0D0
  • editorLink.activeForeground#F0E0B0
  • editorOverviewRuler.addedForeground#F2A0C0CC
  • editorOverviewRuler.border#0F0F0A
  • editorOverviewRuler.bracketMatchForeground#F2A0C0AA
  • editorOverviewRuler.commonContentForeground#F0C090
  • editorOverviewRuler.currentContentForeground#A0E0D0
  • editorOverviewRuler.deletedForeground#F4A8C4
  • editorOverviewRuler.errorForeground#F09090
  • editorOverviewRuler.findMatchForeground#FF69B480
  • editorOverviewRuler.incomingContentForeground#A0E0D0
  • editorOverviewRuler.modifiedForeground#A0E0D0
  • editorOverviewRuler.rangeHighlightForeground#FF69B480
  • editorOverviewRuler.selectionHighlightForeground#FF69B480
  • editorOverviewRuler.warningForeground#D0C0A0
  • editorOverviewRuler.wordHighlightForeground#FF69B480
  • editorOverviewRuler.wordHighlightStrongForeground#FF69B499
  • editorRuler.foreground#4A4A4066
  • editorSuggestWidget.background#0F0F0A
  • editorSuggestWidget.border#4A4A4044
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FF69B4
  • editorSuggestWidget.selectedBackground#272720
  • editorWhitespace.foreground#4A4A4066
  • editorWidget.background#0F0F0A
  • editorWidget.border#4A4A4044
  • focusBorder#FF69B4
  • foreground#FFFFFF
  • gitDecoration.conflictingResourceForeground#F0C090
  • gitDecoration.deletedResourceForeground#F4A8C4
  • gitDecoration.ignoredResourceForeground#A0C0E0
  • gitDecoration.modifiedResourceForeground#A0E0D0
  • gitDecoration.untrackedResourceForeground#F2A0C0CC
  • input.background#0F0F0A
  • input.border#4A4A4044
  • input.foreground#FFFFFF
  • input.placeholderForeground#D0D0C0
  • inputOption.activeBorder#FF69B4
  • list.activeSelectionBackground#272720
  • list.activeSelectionForeground#FF69B4
  • list.errorForeground#F09090
  • list.focusBackground#272720
  • list.highlightForeground#FF69B4
  • list.hoverBackground#202018
  • list.inactiveSelectionBackground#272720
  • list.warningForeground#D0C0A0
  • panel.background#0F0F0A
  • panel.border#4A4A4044
  • panelTitle.activeBorder#FF69B4
  • panelTitle.activeForeground#FF69B4
  • panelTitle.inactiveForeground#EEEEEE
  • peekView.border#FF69B4
  • peekViewEditor.background#2A2A1F
  • peekViewEditor.matchHighlightBackground#FF69B480
  • peekViewResult.background#2A2A1F
  • peekViewResult.fileForeground#FFFFFF
  • peekViewResult.lineForeground#EEEEEE
  • peekViewResult.matchHighlightBackground#FF69B480
  • peekViewResult.selectionBackground#272720
  • peekViewResult.selectionForeground#FF69B4
  • peekViewTitle.background#2A2A1F
  • peekViewTitleDescription.foreground#EEEEEE
  • peekViewTitleLabel.foreground#FF69B4
  • progressBar.background#FF69B4
  • scrollbar.shadow#0F0F0A
  • scrollbarSlider.activeBackground#FF69B4
  • scrollbarSlider.background#FF69B444
  • scrollbarSlider.hoverBackground#FF69B488
  • selection.background#272720
  • sideBar.background#0F0F0A
  • sideBar.border#4A4A4044
  • sideBar.foreground#EEEEEE
  • sideBarSectionHeader.background#171710
  • sideBarSectionHeader.foreground#FF69B4
  • sideBarTitle.foreground#FF69B4
  • statusBar.background#0F0F0A
  • statusBar.debuggingBackground#0F0F0A
  • statusBar.debuggingForeground#FF69B4
  • statusBar.foreground#EEEEEE
  • statusBar.noFolderBackground#0F0F0A
  • statusBarItem.hoverBackground#202018
  • statusBarItem.remoteBackground#FF69B4
  • statusBarItem.remoteForeground#0F0F0A
  • tab.activeBackground#0F0F0A
  • tab.activeForeground#FF69B4
  • tab.border#4A4A4044
  • tab.hoverBackground#202018
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#171710
  • tab.inactiveForeground#EEEEEE
  • terminal.ansiBlack#0F0F0A
  • terminal.ansiBlue#80A0C0
  • terminal.ansiBrightBlack#EEEEEE
  • terminal.ansiBrightBlue#80A0C0
  • terminal.ansiBrightCyan#80C0C0
  • terminal.ansiBrightGreen#80C0A0
  • terminal.ansiBrightMagenta#C080C0
  • terminal.ansiBrightRed#FF69B4
  • terminal.ansiBrightWhite#E0E0E0
  • terminal.ansiBrightYellow#C0C080
  • terminal.ansiCyan#80C0C0
  • terminal.ansiGreen#80C0A0
  • terminal.ansiMagenta#C080C0
  • terminal.ansiRed#FF69B4
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#C0C080
  • terminal.background#0F0F0A
  • terminal.foreground#FFFFFF
  • terminalCursor.foreground#FF69B4
  • textLink.activeForeground#F0E0B0
  • textLink.foreground#A0C0F0
  • titleBar.activeBackground#0F0F0A
  • titleBar.activeForeground#FF69B4
  • titleBar.inactiveBackground#0F0F0A
  • titleBar.inactiveForeground#EEEEEE
  • tree.indentGuidesStroke#4A4A4066
  • widget.shadow#0F0F0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C0C0C0italic
string, punctuation.definition.string#B0D0E0
keyword#E9ACFF
constant#F9A8D4
entity.name.type#F2C0D7
variable#F0C0A0
punctuation.accessor#FFFFFF
entity.name.function#A0E0C0
support.function#F9A8D4
keyword.other.special-method#A0D0F0
storage.modifier#E9ACFF
keyword.control#E9ACFF
storage.type.class#F2C0D7
support.class#F2C0D7
entity.name.tag#F0D0C0
support.type.property-name#FDE0ED
keyword.operator.logical#D9D0B0
punctuation.definition.tag#A0E0D0
entity.other.attribute-name#A0C0F0
entity.name.tag.doctype, meta.tag.sgml.doctype#F672AC
punctuation.definition.parameters#F2C0D7
meta.brace#E0E0E0
keyword.operator#D9D0B0

Shiki preview

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

Loading...

Barbenheimer by Jayvic San Antonio - VS Code Theme