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#1A1B21
  • activityBar.border#FFFFFF00
  • activityBar.foreground#DEE0E5
  • activityBar.inactiveForeground#64656A
  • activityBarBadge.background#E8755E
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E8755E
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#DEE0E5
  • breadcrumb.focusForeground#DEE0E5
  • breadcrumb.foreground#969AA0
  • breadcrumbPicker.background#28292F
  • button.background#D0705A
  • button.foreground#FFFFFF
  • button.hoverBackground#DC8070
  • button.secondaryBackground#37383F
  • button.secondaryForeground#DEE0E5
  • debugIcon.breakpointForeground#E8755E
  • diffEditor.diagonalFill#2C2D33
  • diffEditor.insertedLineBackground#8B9E7828
  • diffEditor.insertedTextBackground#8B9E7840
  • diffEditor.removedLineBackground#E8755E28
  • diffEditor.removedTextBackground#E8755E40
  • dropdown.background#2C2D33
  • dropdown.border#FFFFFF00
  • dropdown.foreground#DEE0E5
  • editor.background#1A1B24
  • editor.findMatchBackground#E8755E50
  • editor.findMatchHighlightBackground#E8755E25
  • editor.focusedStackFrameHighlightBackground#8B9E7820
  • editor.foldBackground#E8755E08
  • editor.foreground#DEE0E5
  • editor.inactiveSelectionBackground#E8755E15
  • editor.inlineValuesBackground#E8755E10
  • editor.inlineValuesForeground#969AA0
  • editor.lineHighlightBackground#E8755E0A
  • editor.selectionBackground#E8755E30
  • editor.stackFrameHighlightBackground#D4A76A20
  • editor.wordHighlightBackground#FFFFFF12
  • editor.wordHighlightStrongBackground#FFFFFF18
  • editorBracketHighlight.foreground1#E8755E
  • editorBracketHighlight.foreground2#DEE0E5
  • editorBracketHighlight.foreground3#969AA0
  • editorBracketHighlight.foreground4#E8755E
  • editorBracketHighlight.foreground5#DEE0E5
  • editorBracketHighlight.foreground6#969AA0
  • editorBracketHighlight.unexpectedBracket.foreground#E8755E
  • editorBracketMatch.background#FFFFFF15
  • editorBracketMatch.border#FFFFFF00
  • editorBracketPairGuide.activeBackground1#E8755E60
  • editorBracketPairGuide.activeBackground2#D5D6DB60
  • editorBracketPairGuide.activeBackground3#86878C60
  • editorBracketPairGuide.background1#E8755E30
  • editorBracketPairGuide.background2#D5D6DB30
  • editorBracketPairGuide.background3#86878C30
  • editorCodeLens.foreground#54555A
  • editorCursor.foreground#E8755E
  • editorError.foreground#E8755E
  • editorGhostText.border#FFFFFF00
  • editorGhostText.foreground#54555A
  • editorGroup.border#FFFFFF00
  • editorGroupHeader.tabsBackground#1A1B24
  • editorGutter.addedBackground#8B9E78
  • editorGutter.deletedBackground#E8755E
  • editorGutter.foldingControlForeground#64656A
  • editorGutter.modifiedBackground#D4A76A
  • editorIndentGuide.activeBackground#37383F
  • editorIndentGuide.background#282930
  • editorInfo.foreground#6EADB0
  • editorInlayHint.background#FFFFFF00
  • editorInlayHint.foreground#64656A
  • editorInlayHint.parameterBackground#FFFFFF00
  • editorInlayHint.parameterForeground#64656A
  • editorInlayHint.typeBackground#FFFFFF00
  • editorInlayHint.typeForeground#64656A
  • editorLineNumber.activeForeground#E8755E
  • editorLineNumber.foreground#47484F
  • editorOverviewRuler.border#FFFFFF00
  • editorRuler.foreground#2C2D33
  • editorSuggestWidget.background#28292F
  • editorSuggestWidget.border#FFFFFF00
  • editorSuggestWidget.selectedBackground#323339
  • editorUnnecessaryCode.opacity#000000AA
  • editorWarning.foreground#D4A76A
  • editorWidget.background#28292F
  • editorWidget.border#FFFFFF00
  • focusBorder#E8755E80
  • foreground#DEE0E5
  • gitDecoration.conflictingResourceForeground#D4A76A
  • gitDecoration.deletedResourceForeground#E8755E
  • gitDecoration.ignoredResourceForeground#54555A
  • gitDecoration.modifiedResourceForeground#D4A76A
  • gitDecoration.untrackedResourceForeground#8B9E78
  • input.background#2C2D33
  • input.border#FFFFFF00
  • input.foreground#DEE0E5
  • input.placeholderForeground#64656A
  • inputOption.activeBorder#E8755E
  • list.activeSelectionBackground#303137
  • list.activeSelectionForeground#DEE0E5
  • list.focusHighlightForeground#E8755E
  • list.highlightForeground#E8755E
  • list.hoverBackground#28292F
  • list.inactiveSelectionBackground#2B2C32
  • merge.currentContentBackground#8B9E7820
  • merge.currentHeaderBackground#8B9E7840
  • merge.incomingContentBackground#6EADB020
  • merge.incomingHeaderBackground#6EADB040
  • minimap.errorHighlight#E8755E
  • minimap.findMatchHighlight#E8755E50
  • minimap.selectionHighlight#E8755E60
  • minimap.warningHighlight#D4A76A
  • notificationCenter.border#FFFFFF00
  • notifications.background#28292F
  • notifications.border#FFFFFF00
  • notifications.foreground#DEE0E5
  • notificationsErrorIcon.foreground#E8755E
  • notificationsInfoIcon.foreground#6EADB0
  • notificationsWarningIcon.foreground#D4A76A
  • panel.background#1A1B24
  • panel.border#FFFFFF00
  • panelTitle.activeBorder#E8755E
  • panelTitle.activeForeground#DEE0E5
  • panelTitle.inactiveForeground#64656A
  • peekView.border#E8755E
  • peekViewEditor.background#1A1B24
  • peekViewResult.background#1A1B24
  • peekViewTitle.background#1A1B24
  • peekViewTitleDescription.foreground#969AA0
  • peekViewTitleLabel.foreground#DEE0E5
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#FFFFFF30
  • scrollbarSlider.background#FFFFFF10
  • scrollbarSlider.hoverBackground#FFFFFF20
  • selection.background#E8755E30
  • settings.headerForeground#DEE0E5
  • settings.modifiedItemIndicator#E8755E
  • sideBar.background#1A1B24
  • sideBar.border#FFFFFF00
  • sideBar.foreground#96979C
  • sideBarSectionHeader.background#FFFFFF00
  • sideBarSectionHeader.foreground#96979C
  • sideBarTitle.foreground#DEE0E5
  • statusBar.background#1A1B21
  • statusBar.border#FFFFFF00
  • statusBar.debuggingBackground#E8755E
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#96979C
  • statusBar.noFolderBackground#1A1B24
  • tab.activeBackground#1A1B24
  • tab.activeBorderTop#E8755E
  • tab.activeForeground#DEE0E5
  • tab.border#FFFFFF00
  • tab.inactiveBackground#1A1B24
  • tab.inactiveForeground#64656A
  • terminal.ansiBlack#1A1B24
  • terminal.ansiBlue#6EADB0
  • terminal.ansiBrightBlack#64656A
  • terminal.ansiBrightBlue#88C4C6
  • terminal.ansiBrightCyan#88C4C6
  • terminal.ansiBrightGreen#A0B48E
  • terminal.ansiBrightMagenta#C498BC
  • terminal.ansiBrightRed#F08B76
  • terminal.ansiBrightWhite#E0E0E0
  • terminal.ansiBrightYellow#E0BD84
  • terminal.ansiCyan#6EADB0
  • terminal.ansiGreen#8B9E78
  • terminal.ansiMagenta#B07EA8
  • terminal.ansiRed#E8755E
  • terminal.ansiWhite#DEE0E5
  • terminal.ansiYellow#D4A76A
  • terminal.background#1A1B24
  • terminal.foreground#DEE0E5
  • terminal.selectionBackground#E8755E30
  • terminalCommandDecoration.defaultBackground#64656A
  • terminalCommandDecoration.errorBackground#E8755E
  • terminalCommandDecoration.successBackground#8B9E78
  • terminalCursor.foreground#E8755E
  • titleBar.activeBackground#1A1B21
  • titleBar.activeForeground#96979C
  • titleBar.border#FFFFFF00
  • titleBar.inactiveBackground#1A1B21
  • titleBar.inactiveForeground#64656A
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64656Aitalic
keyword, keyword.control, storage.type, storage.modifier, keyword.other.using, keyword.other.directive#B88A80
keyword.operator, keyword.operator.expression#969AA0
string, string.quoted, string.template#B8B9BE
constant.character.escape#DC7C68bold
constant.numeric#B8B9BE
constant.language#B8B9BE
variable.language#DC7C68bold
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias#D0806E
entity.name.function#DC7C68bold
support.function, meta.function-call#DEE0E5
variable, variable.other, variable.parameter, support.variable#DEE0E5
variable.other.property, support.other.property, variable.other.object.property#DEE0E5
punctuation, meta.brace, meta.bracket#969AA0
entity.name.tag#DC7C68bold
entity.other.attribute-name#B8B9BE
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#B88A80
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#B88A80
support.constant.property-value.css, support.constant.color.css#B8B9BE
keyword.other.unit.css, keyword.other.unit.scss#B8B9BE
string.regexp#B8B9BE
markup.heading, entity.name.section.markdown#DC7C68bold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link#B8B9BE
markup.inline.raw, markup.fenced_code#B8B9BE
support.type.property-name.json#B88A80
entity.name.tag.yaml#B88A80