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#FFD6B5
  • activityBar.foreground#4C3A32
  • breadcrumb.background#FFE9DC
  • button.background#FF7F50
  • button.foreground#FFF1E0
  • debugToolBar.background#FFD6B5
  • dropdown.background#FFE9DC
  • dropdown.foreground#4C3A32
  • editor.background#FFF1E0
  • editor.findMatchBackground#FFA07A77
  • editor.findMatchHighlightBackground#FFA07A55
  • editor.findRangeHighlightBackground#FFD6B577
  • editor.foreground#4C3A32
  • editor.lineHighlightBackground#FFE4D1
  • editor.selectionBackground#FFD6B5
  • editor.selectionHighlightBackground#FFD6B577
  • editor.wordHighlightBackground#FFBC8D33
  • editor.wordHighlightStrongBackground#FFBC8D55
  • editorBracketHighlight.foreground1#E26A2C
  • editorBracketHighlight.foreground2#E89149
  • editorBracketHighlight.foreground3#D9605B
  • editorBracketHighlight.foreground4#C74854
  • editorBracketHighlight.foreground5#AD3C46
  • editorBracketHighlight.foreground6#FF8552
  • editorBracketMatch.background#FFD6B5
  • editorBracketMatch.border#FF7F50
  • editorCursor.foreground#FF7F50
  • editorError.foreground#FF4C4C
  • editorGroup.border#E1B199
  • editorGroupHeader.tabsBackground#FFE9DC
  • editorGroupHeader.tabsBorder#E1B199
  • editorGutter.background#FFF1E0
  • editorIndentGuide.background#FFD6B588
  • editorInfo.foreground#FFAE70
  • editorLineNumber.activeForeground#C4563F
  • editorLineNumber.foreground#E77B58
  • editorRuler.foreground#FFC5A2
  • editorStickyScroll.background#FFF1E0
  • editorWarning.foreground#FFA500
  • editorWhitespace.foreground#E7B59A
  • editorWidget.background#FFF1E0
  • input.background#FFF1E0
  • input.foreground#4C3A32
  • merge.currentHeaderBackground#FFE4D1
  • merge.incomingHeaderBackground#FFD6B5
  • panel.background#FFF1E0
  • panel.border#E1B199
  • panelTitle.activeBorder#FF7F50
  • panelTitle.activeForeground#4C3A32
  • panelTitle.inactiveForeground#B07A6B
  • peekViewEditor.background#FFE9DC
  • peekViewEditor.matchHighlightBackground#FFD6B577
  • peekViewResult.background#FFF1E0
  • peekViewResult.matchHighlightBackground#FFD6B577
  • peekViewTitle.background#FFE9DC
  • scrollbarSlider.activeBackground#E89C6DFF
  • scrollbarSlider.background#E89C6D99
  • scrollbarSlider.hoverBackground#E89C6DCC
  • sideBar.background#FFE9DC
  • sideBar.foreground#4C3A32
  • statusBar.background#FFD6B5
  • statusBar.foreground#4C3A32
  • tab.activeBackground#FFE4D1
  • tab.activeForeground#4C3A32
  • tab.border#FFD6B5
  • tab.inactiveBackground#FFE9DC
  • tab.inactiveForeground#B07A6B
  • tab.unfocusedActiveForeground#B07A6B
  • tab.unfocusedInactiveForeground#C9A896
  • titleBar.activeBackground#FFE9DC
  • titleBar.activeForeground#4C3A32
  • titleBar.inactiveBackground#FFE9DC
  • titleBar.inactiveForeground#C9A896

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class#D9605B
support.type.property-name#B2643C
constant.character#C87C55bold
source.diff#C74854
support.class#D9605B
support.type.property-name#B2643C
constant.character#C87C55bold
source.diff#C74854
meta.import#D9605B
meta.function#D9605B
support.variable#804D37
storage.type#E26A2C
entity.name.module#D9605B
punctuation.definition.string#D4603E
keyword.control.flow#C74854bold
comment#C47858italic
string#D4603E
constant.numeric#E89149
keyword#C74854bold
variable#804D37
entity.name.function#D9605B
storage#E26A2C
entity.name.type#FF7F50
punctuation#4C3A32
invalid#FFF1E0
constant.language#E77B58
meta.brace#B2643C
entity.name.tag#D9605B
support.function#D9605B
keyword.control#C74854
meta.function-call#D9605B
variable.parameter#B55D3C
meta.object-literal.key#B2643C
constant.language.boolean#E26A2C
markup.bold#B2643Cbold
markup.italic#C47858italic
markup.heading#D9605Bbold
markup.inline.raw#E77B58
constant.character.escape#C87C55bold
markup.inserted#E89149italic
markup.deleted#D4603Eitalic
markup.strikethrough#C74854strikethrough
markup.list#E26A2C
markup.underline#D9605Bunderline
entity.other.attribute-name#D9605B
comment#C47858italic
string#D4603E
constant.numeric#E89149
keyword#C74854bold
variable#804D37
entity.name.function#D9605B
storage#E26A2C
entity.name.type#FF7F50
punctuation#4C3A32
invalid#FFF1E0
constant.language#E77B58
meta.brace#B2643C
entity.name.tag#D9605B
support.function#D9605B
keyword.control#C74854
meta.function-call#D9605B
variable.parameter#B55D3C
meta.object-literal.key#B2643C
constant.language.boolean#E26A2C
markup.bold#B2643Cbold
markup.italic#C47858italic
markup.heading#D9605Bbold
markup.inline.raw#E77B58