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#F4F4F0
  • activityBar.foreground#1F1F1F
  • activityBar.inactiveForeground#A1A1A1
  • activityBarBadge.background#A6C231
  • activityBarBadge.foreground#FAF9F7
  • breadcrumb.activeSelectionForeground#1F1F1F
  • breadcrumb.background#FAF9F7
  • breadcrumb.focusForeground#1F1F1F
  • breadcrumb.foreground#AAAFAA
  • breadcrumb.separatorForeground#AAAAAA
  • button.background#E4C000
  • button.border#D4B100
  • button.foreground#1F1F1F
  • debugToolBar.background#FAF9F7
  • dropdown.background#FFFDF6
  • dropdown.border#DADADA
  • dropdown.foreground#1F1F1F
  • editor.background#FAF9F7
  • editor.findMatchBackground#A8D4FF
  • editor.findMatchHighlightBackground#CDE4FF88
  • editor.findRangeHighlightBackground#F1FAF799
  • editor.foreground#1F1F1F
  • editor.lineHighlightBackground#F0EFEA
  • editor.selectionBackground#DCE5B4
  • editor.selectionForeground#1F1F1F
  • editor.selectionHighlightBackground#E7EDC7
  • editor.wordHighlightBackground#FFF5D5
  • editor.wordHighlightStrongBackground#FCEFB8
  • editorBracketHighlight.foreground1#9EBD00
  • editorBracketHighlight.foreground2#E4C000
  • editorBracketHighlight.foreground3#FFAA00
  • editorBracketHighlight.foreground4#FF7091
  • editorBracketHighlight.foreground5#8DC07E
  • editorBracketHighlight.foreground6#CBA6F7
  • editorBracketMatch.background#FFEBB5
  • editorBracketMatch.border#D4C200
  • editorCodeLens.foreground#AAA
  • editorCursor.foreground#A99F00
  • editorError.foreground#FF6B6B
  • editorGroup.border#E0E0E0
  • editorGroup.dropBackground#FFF9E088
  • editorGroup.dropIntoPromptBackground#FFFDF6
  • editorGroup.dropIntoPromptForeground#1F1F1F
  • editorGroupHeader.tabsBackground#FAF9F7
  • editorGroupHeader.tabsBorder#E0E0E0
  • editorGutter.background#FAF9F7
  • editorGutter.modifiedBackground#D4A3D9
  • editorHoverWidget.background#FFFFFB
  • editorHoverWidget.border#DADADA
  • editorHoverWidget.foreground#1F1F1F
  • editorHoverWidget.highlightForeground#A6C231
  • editorIndentGuide.background#F4F1E7
  • editorInfo.foreground#5CB7FF
  • editorInlayHint.background#FFF5D5
  • editorInlayHint.foreground#777777
  • editorLightBulb.foreground#FFD700
  • editorLightBulbAutoFix.foreground#A6C231
  • editorLineNumber.activeForeground#1F1F1F
  • editorLineNumber.foreground#A1A1A1
  • editorLink.activeForeground#5CB7FF
  • editorOverviewRuler.border#E0E0E0
  • editorOverviewRuler.bracketMatchForeground#A6C23188
  • editorOverviewRuler.errorForeground#FF6B6B88
  • editorOverviewRuler.findMatchForeground#CDE4FF88
  • editorOverviewRuler.infoForeground#5CB7FF88
  • editorOverviewRuler.warningForeground#FFD96688
  • editorOverviewRuler.wordHighlightForeground#FFF5D588
  • editorOverviewRuler.wordHighlightStrongForeground#FCEFB888
  • editorRuler.foreground#E0E0E0
  • editorStickyScroll.background#FAF9F7
  • editorStickyScrollHover.background#F0F0F0
  • editorSuggestWidget.background#FFFEEE
  • editorSuggestWidget.foreground#1F1F1F
  • editorSuggestWidget.highlightForeground#7AC99D
  • editorSuggestWidget.selectedBackground#DDE7C7
  • editorSymbolHighlightBackground#FFF8DC88
  • editorUnicodeHighlight.background#FFDFDF88
  • editorUnicodeHighlight.border#FF6B6B
  • editorWarning.foreground#FFCC00
  • editorWhitespace.background#FAF9F7
  • editorWhitespace.foreground#E4E4E4
  • editorWidget.background#FFFFFB
  • editorWidget.foreground#1F1F1F
  • focusBorder#C4DE55
  • input.background#FFFDF6
  • input.border#DADADA
  • input.foreground#1F1F1F
  • input.placeholderForeground#A1A1A1
  • inputOption.activeBackground#F6F9E7
  • inputOption.activeBorder#A6C231
  • inputOption.activeForeground#1F1F1F
  • list.activeSelectionBackground#E6F4C6
  • list.activeSelectionForeground#1F1F1F
  • list.hoverBackground#FFF9E0
  • list.hoverForeground#1F1F1F
  • list.inactiveSelectionBackground#F4F9E7
  • list.inactiveSelectionForeground#1F1F1F
  • merge.currentHeaderBackground#FFE4D1
  • merge.incomingHeaderBackground#FFD6B5
  • minimap.background#FAF9F7
  • minimap.errorHighlight#FF6B6B66
  • minimap.findMatchHighlight#CDE4FF88
  • minimap.selectionHighlight#F6F2D7
  • minimap.warningHighlight#FFD96666
  • notification.background#FFFDF6
  • notification.foreground#1F1F1F
  • panel.background#FAF9F7
  • panel.border#E0E0E0
  • panelTitle.activeBorder#C4DE55
  • panelTitle.activeForeground#A6C231
  • panelTitle.hoverForeground#1F1F1F
  • panelTitle.inactiveForeground#A1A1A1
  • peekViewEditor.background#FFFDF6
  • peekViewResult.background#F4F9F4
  • peekViewTitle.background#F9F9F9
  • scrollbarSlider.activeBackground#D4C200
  • scrollbarSlider.background#C4C4C488
  • scrollbarSlider.hoverBackground#D0D0D0AA
  • settings.headerForeground#FFD700
  • settings.modifiedItemIndicator#FFCC00
  • sideBar.background#F7F7F5
  • sideBar.border#E0E0E0
  • sideBar.foreground#1F1F1F
  • sideBarSectionHeader.foreground#A6C231
  • sideBarTitle.foreground#1F1F1F
  • statusBar.background#F0EFEA
  • statusBar.debuggingBackground#FF6B6B
  • statusBar.debuggingForeground#FAF9F7
  • statusBar.foreground#1F1F1F
  • statusBar.noFolderBackground#F4F4F0
  • tab.activeBackground#FAF9F7
  • tab.activeForeground#1F1F1F
  • tab.border#E0E0E0
  • tab.hoverBackground#FFF9E0
  • tab.inactiveBackground#F4F4F0
  • tab.inactiveForeground#A1A1A1
  • tab.unfocusedActiveForeground#719F22
  • tab.unfocusedHoverBackground#F4F9E7
  • tab.unfocusedInactiveForeground#CCCCCC
  • terminal.ansiBlack#CCCCCC
  • terminal.ansiBlue#5CB7FF
  • terminal.ansiBrightBlack#E0E0E0
  • terminal.ansiBrightBlue#8CCFFF
  • terminal.ansiBrightCyan#8EF0F0
  • terminal.ansiBrightGreen#B8F58C
  • terminal.ansiBrightMagenta#EDAAFF
  • terminal.ansiBrightRed#FF5F5F
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#FFF899
  • terminal.ansiCyan#5DD3D3
  • terminal.ansiGreen#9CD645
  • terminal.ansiMagenta#E086D3
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#1F1F1F
  • terminal.ansiYellow#FFD700
  • terminal.background#FAF9F7
  • terminal.foreground#1F1F1F
  • terminalCursor.foreground#A99F00
  • titleBar.activeBackground#F4F4F0
  • titleBar.activeForeground#1F1F1F
  • titleBar.border#E0E0E0
  • titleBar.inactiveBackground#F4F4F0
  • titleBar.inactiveForeground#A1A1A1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class#D9605B
support.type.property-name#B2643C
constant.character#C87C55bold
source.diff#C74854
meta.function-call, entity.name.function, support.function#D9605B
meta.import#D9605B
entity.name.module#E26A2C
keyword.control.flow#C74854bold
comment, punctuation.definition.comment#98A1A9italic
string, constant.other.symbol#347C2C
constant.numeric#8C3D99bold
constant.language.boolean, constant.language#006699bold
keyword, storage.type, storage.modifier#D45C00bold
keyword.operator#AA1E1E
variable, identifier, variable.language#1A1A1A
entity.name.function, support.function, meta.function-call#205C3B
variable.parameter#AF6100
entity.name.type, support.type, entity.name.class#1D5E85
support.constant, constant.other#B07000
punctuation, punctuation.definition.parameters#6A6A6A
invalid, invalid.illegal#FFFFFF
markup.heading#A05A2Cbold
markup.list#7A4DAB
markup.bold#000000bold
markup.italic, markup.quote#4364ADitalic
meta.object-literal.key#9A5800
entity.name.tag#C52B2B
support.class.component#843BBE
support.type.property-name#AD5E00
meta.jsx.children#407F57
meta.tag.attributes, entity.other.attribute-name.jsx#1E639C
variable.other.readwrite.js, variable.other.readwrite.ts#1A1A1A
storage.type.function.arrow#327A9E
meta.brace.round, meta.brace.square, meta.brace.curly#D45C00
meta.function#205C3B
entity.name.module.js, entity.name.module.ts#C29200
support.variable#8C6BB1
meta.import, meta.import.ts, meta.import.js#005580
keyword.control.flow#AA1E1Ebold
meta.decorator, meta.decorator punctuation, entity.name.function.decorator#E6AC00
entity.other.attribute-name#CE7A00
meta.enum#1E793D
meta.type.annotation, meta.type#7039B0
keyword.other.unit#A06600
meta.return-type#1E639C
markup.inline.raw#D45C00italic
markup.underline#D45C00underline
markup.strikethrough#C52B2Bstrikethrough
constant.character.escape#1E639Cbold
support.type.property-name.json#C29200