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.activeBorder#D97A2B55
  • activityBar.background#25282A
  • activityBar.border#34373A66
  • activityBar.foreground#E8E1D8
  • activityBar.inactiveForeground#B7AEA4FF
  • badge.background#D97A2B
  • badge.foreground#E8E1D8
  • button.background#D97A2B
  • button.foreground#E8E1D8
  • button.hoverBackground#D97A2B1F
  • button.secondaryBackground#3B342B
  • button.secondaryForeground#E8E1D8FF
  • button.secondaryHoverBackground#3B342B
  • descriptionForeground#B7AEA4FF
  • diffEditor.border#34373A66
  • diffEditor.insertedLineBackground#222E1DFF
  • diffEditor.insertedTextBackground#429F5D70
  • diffEditor.removedLineBackground#301B1BFF
  • diffEditor.removedTextBackground#742BD970
  • disabledForeground#B7AEA4FF
  • dropdown.background#25282A
  • dropdown.border#34373A66
  • dropdown.listBackground#25282A
  • editor.background#1C1E1F
  • editor.findMatchBackground#3B342BFF
  • editor.findMatchHighlightBackground#3B342BFF
  • editor.findRangeHighlightBackground#3B342BFF
  • editor.foreground#E8E1D8FF
  • editor.inactiveSelectionBackground#B7AEA444
  • editor.lineHighlightBackground#3B342B55
  • editor.selectionBackground#D97A2B33
  • editor.selectionHighlightBackground#B7AEA444
  • editor.wordHighlightBackground#504364FF
  • editor.wordHighlightStrongBackground#3B342BFF
  • editorBracketHighlight.foreground1#D97A2B
  • editorBracketHighlight.foreground2#B98C52
  • editorBracketHighlight.foreground3#3B342B
  • editorBracketHighlight.foreground4#34373A
  • editorBracketHighlight.foreground5#B7AEA4
  • editorBracketHighlight.foreground6#E8E1D8
  • editorBracketMatch.background#17FF0055
  • editorBracketMatch.border#D97A2B55
  • editorBracketPairGuide.activeBackground1#D97A2B
  • editorBracketPairGuide.activeBackground2#B98C52
  • editorBracketPairGuide.activeBackground3#3B342B
  • editorBracketPairGuide.activeBackground4#34373A
  • editorBracketPairGuide.activeBackground5#B7AEA4
  • editorBracketPairGuide.activeBackground6#E8E1D8
  • editorBracketPairGuide.background1#323230FF
  • editorBracketPairGuide.background2#323230FF
  • editorBracketPairGuide.background3#323230FF
  • editorBracketPairGuide.background4#323230FF
  • editorBracketPairGuide.background5#323230FF
  • editorBracketPairGuide.background6#323230FF
  • editorCursor.foreground#E8E1D8
  • editorError.foreground#E67373FF
  • editorGroup.border#3B342BFF
  • editorGroup.emptyBackground#1C1E1F
  • editorGroupHeader.tabsBackground#25282A
  • editorGutter.addedBackground#429F5D75
  • editorGutter.background#1C1E1F
  • editorGutter.deletedBackground#BD000073
  • editorGutter.modifiedBackground#CCB63FFF
  • editorHoverWidget.background#25282A
  • editorHoverWidget.border#34373A66
  • editorHoverWidget.highlightForeground#D97A2B
  • editorIndentGuide.activeBackground1#D97A2BFF
  • editorIndentGuide.background1#323230FF
  • editorInfo.foreground#73ECE5FF
  • editorLineNumber.activeForeground#E8E1D8
  • editorLineNumber.foreground#B7AEA4
  • editorMarkerNavigation.background#25282A
  • editorRuler.foreground#454544FF
  • editorSuggestWidget.background#25282A
  • editorSuggestWidget.border#34373A66
  • editorSuggestWidget.highlightForeground#D97A2B
  • editorSuggestWidget.selectedBackground#3B342B
  • editorWarning.foreground#D97A2B
  • editorWhitespace.foreground#4A4A49FF
  • editorWidget.background#25282A
  • editorWidget.border#34373A66
  • errorForeground#E67373FF
  • focusBorder#D97A2B55
  • foreground#E8E1D8FF
  • gitDecoration.addedResourceForeground#429F5D75
  • gitDecoration.conflictingResourceForeground#742BD9FF
  • gitDecoration.deletedResourceForeground#BD000073
  • gitDecoration.ignoredResourceForeground#EDA92B78
  • gitDecoration.modifiedResourceForeground#CCB63FFF
  • gitDecoration.renamedResourceForeground#FFB86CFF
  • gitDecoration.untrackedResourceForeground#429F5D75
  • input.background#25282A
  • input.border#34373A66
  • input.foreground#E8E1D8FF
  • input.placeholderForeground#B7AEA4
  • inputOption.activeBackground#B7AEA444
  • inputOption.activeBorder#D97A2B55
  • inputValidation.errorBackground#25282AFF
  • inputValidation.errorBorder#E67373FF
  • inputValidation.infoBackground#25282AFF
  • inputValidation.infoBorder#73ECE5FF
  • inputValidation.warningBackground#D97A2B22
  • inputValidation.warningBorder#D97A2B44
  • inputValidation.warningForeground#E8E1D8
  • list.activeSelectionBackground#3B342B
  • list.activeSelectionForeground#E8E1D8
  • list.dropBackground#504364FF
  • list.focusAndSelectionOutline#D97A2B55
  • list.focusOutline#D97A2B55
  • list.highlightForeground#D97A2B
  • list.hoverBackground#3B342B
  • list.hoverForeground#E8E1D8FF
  • list.inactiveSelectionBackground#B7AEA444
  • list.inactiveSelectionForeground#E8E1D8FF
  • minimapSlider.activeBackground#3B342B
  • minimapSlider.background#3B342B55
  • minimapSlider.hoverBackground#3B342BAA
  • notifications.background#25282A
  • notifications.border#34373A66
  • notifications.foreground#E8E1D8FF
  • panel.background#21222DFF
  • panel.border#34373A66
  • panelInput.border#34373A66
  • panelTitle.activeBorder#D97A2B55
  • panelTitle.activeForeground#E8E1D8
  • panelTitle.inactiveForeground#B7AEA4FF
  • peekView.border#D97A2B55
  • peekViewEditor.background#1C1E1F
  • peekViewEditor.matchHighlightBackground#3B342BFF
  • peekViewResult.background#25282A
  • peekViewResult.matchHighlightBackground#3B342BFF
  • peekViewTitle.background#25282A
  • peekViewTitleDescription.foreground#B7AEA4FF
  • peekViewTitleLabel.foreground#E8E1D8
  • pickerGroup.border#D97A2B55
  • pickerGroup.foreground#D97A2B
  • progressBar.background#D97A2B
  • quickInput.background#25282A
  • quickInput.foreground#E8E1D8FF
  • quickInputList.focusBackground#3B342B
  • scrollbarSlider.activeBackground#3B342B
  • scrollbarSlider.background#3B342B55
  • scrollbarSlider.hoverBackground#3B342BAA
  • selection.background#D97A2B33
  • sideBar.background#25282A
  • sideBar.border#34373A66
  • sideBar.foreground#E8E1D8FF
  • sideBarSectionHeader.background#25282A
  • sideBarSectionHeader.border#34373A66
  • sideBarSectionHeader.foreground#E8E1D8FF
  • sideBarTitle.foreground#E8E1D8
  • statusBar.background#1C1E1F
  • statusBar.border#34373A66
  • statusBar.foreground#E8E1D8FF
  • statusBarItem.hoverBackground#3B342B
  • statusBarItem.prominentBackground#3B342B
  • statusBarItem.prominentHoverBackground#3B342B
  • tab.activeBackground#1C1E1F
  • tab.activeBorderTop#D97A2B55
  • tab.activeForeground#E8E1D8
  • tab.border#34373A66
  • tab.hoverBackground#3B342B
  • tab.inactiveBackground#25282A
  • tab.inactiveForeground#B7AEA4FF
  • tab.unfocusedActiveBackground#1C1E1F
  • tab.unfocusedActiveForeground#B7AEA4FF
  • tab.unfocusedInactiveBackground#25282A
  • tab.unfocusedInactiveForeground#B7AEA4FF
  • terminal.ansiBlack#25282AFF
  • terminal.ansiBlue#D97A2BFF
  • terminal.ansiBrightBlack#B7AEA4FF
  • terminal.ansiBrightBlue#D97A2BFF
  • terminal.ansiBrightCyan#B98C52FF
  • terminal.ansiBrightGreen#69FF94FF
  • terminal.ansiBrightMagenta#FF92DFFF
  • terminal.ansiBrightRed#FF6E6EFF
  • terminal.ansiBrightWhite#FFFFFFFF
  • terminal.ansiBrightYellow#FFFFA5FF
  • terminal.ansiCyan#B98C52FF
  • terminal.ansiGreen#B98C52FF
  • terminal.ansiMagenta#D97A2BFF
  • terminal.ansiRed#D97A2BFF
  • terminal.ansiWhite#E8E1D8FF
  • terminal.ansiYellow#B98C52FF
  • terminal.background#1C1E1F
  • terminal.border#34373A66
  • terminal.foreground#E8E1D8FF
  • terminal.selectionBackground#D97A2B33
  • terminalCursor.foreground#E8E1D8
  • textLink.activeForeground#E8E1D8
  • textLink.foreground#8BE9FDFF
  • titleBar.activeBackground#25282ACF
  • titleBar.activeForeground#E8E1D8
  • titleBar.border#34373A66
  • titleBar.inactiveBackground#1C1E1FFF
  • titleBar.inactiveForeground#B7AEA4FF
  • tree.indentGuidesStroke#323230FF
  • window.activeBorder#D97A2B55
  • window.inactiveBorder#34373A66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272A4FF—
comment.block.documentation, comment.documentation#FF79C6FF—
string#F1FA8CFF—
constant.character.escape, constant.other.placeholder#FF79C6FF—
string.regexp#FF5555FF—
constant.other.symbol, constant.other.key#FF79C6FF—
constant.other.symbol#BD93F9FF—
constant.numeric#BD93F9FF—
constant.language.boolean#FF79C6FF—
constant, support.constant#BD93F9FF—
keyword, storage.type, storage.modifier#FF79C6FF—
keyword.operator, punctuation.separator.key-value#FF79C6FF—
entity.name.function, support.function, variable.function#50FA7BFF—
entity.name.function.constructor, entity.name.type.class, support.class#FF79C6FF—
variable.other.property, meta.object-literal.key, support.type.property-name#8BE9FDFF—
entity.other.attribute-name, support.type.property-name.css#49D970FF—
entity.name.type, support.type, support.class#8BE9FDFF—
entity.name.type.interface, support.type.interface#8BE9FDFFitalic
entity.other.inherited-class#8BE9FDFFitalic
entity.name.type.enum, support.type.enum#BD93F9FF—
variable.other.enummember, entity.name.constant.enum#BD93F9FF—
variable#F8F8F2FF—
variable.other.object, variable.other.property#F8F8F2FF—
variable.parameter#FFB86CFFitalic
variable.language, support.variable, keyword.other.this, keyword.other.self#BD93F9FFitalic
entity.name.tag#FF79C6FF—
entity.name.label#F8F8F2FF—
meta.preprocessor, keyword.control.directive#6272A4FF—
meta.embedded, source.embedded#F8F8F2FF—
punctuation#FF79C6FF—
punctuation.bracket#F8F8F2FF—
punctuation.separator, punctuation.terminator#FF79C6FF—
punctuation.definition.list.begin, markup.list punctuation.definition.list.begin#8BE9FDFF—
punctuation.definition.template-expression, punctuation.accessor#FF79C6FF—
entity.name.section, markup.heading#BD93F9FF—
markup.italic#F1FA8CFFitalic
markup.bold#FFB86CFFbold
string.other.link.title, markup.underline.link#FF79C6FF—
markup.underline.link, markup.link#8BE9FDFF—
markup.inline.raw, markup.raw.inline, markup.raw.block#50FA7BFF—