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#FF6F00
  • activityBar.background#F5F5F5
  • activityBar.foreground#FF6F00
  • activityBarBadge.background#FF6F00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F00
  • badge.foreground#FFFFFF
  • button.background#FF6F00
  • button.foreground#FFFFFF
  • button.hoverBackground#B23F00
  • dropdown.background#F5F5F5
  • dropdown.border#CCCCCC
  • dropdown.foreground#2D2D2D
  • editor.background#FFFDF5
  • editor.findMatchBackground#FF6F0044
  • editor.findMatchHighlightBackground#FF6F0022
  • editor.foreground#2D2D2D
  • editor.lineHighlightBackground#FFECB3
  • editor.lineHighlightBorder#FFB300
  • editor.selectionBackground#00E5FF40
  • editor.selectionHighlightBackground#00E5FF20
  • editorBracketMatch.background#FFECB3
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FF6F00
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#B0B0B0
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#FF6F00
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#FF6F00
  • gitDecoration.conflictingResourceForeground#FFF59D
  • gitDecoration.deletedResourceForeground#D50000
  • gitDecoration.modifiedResourceForeground#00E5FF
  • gitDecoration.untrackedResourceForeground#00C853
  • input.background#F5F5F5
  • input.border#CCCCCC
  • input.foreground#2D2D2D
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#FF6F00
  • list.activeSelectionBackground#E0F7FA
  • list.activeSelectionForeground#2D2D2D
  • list.focusBackground#E0F7FA
  • list.highlightForeground#FF6F00
  • list.hoverBackground#E0F7FA66
  • minimap.background#FFFDF5
  • minimapSlider.activeBackground#FF6F0066
  • minimapSlider.background#FF6F0022
  • minimapSlider.hoverBackground#FF6F0044
  • panel.background#FFFDF5
  • panel.border#CCCCCC
  • panelTitle.activeBorder#FF6F00
  • panelTitle.activeForeground#FF6F00
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#CCCCCCCC
  • scrollbarSlider.background#CCCCCC44
  • scrollbarSlider.hoverBackground#CCCCCC88
  • sideBar.background#FAFAFA
  • sideBar.foreground#2D2D2D
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#FF6F00
  • sideBarTitle.foreground#FF6F00
  • statusBar.background#E0F7FA
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#2D2D2D
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#B3E5FC
  • tab.activeBackground#E8F5E9
  • tab.activeBorder#FF6F00
  • tab.activeForeground#2D2D2D
  • tab.border#CCCCCC
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#448AFF
  • terminal.ansiBrightBlue#82B1FF
  • terminal.ansiBrightCyan#80D8FF
  • terminal.ansiBrightGreen#69F0AE
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFF59D
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#00C853
  • terminal.ansiMagenta#D500F9
  • terminal.ansiRed#D50000
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FFFDF5
  • terminal.foreground#2D2D2D
  • titleBar.activeBackground#EEEEEE
  • titleBar.activeForeground#2D2D2D
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E8Eitalic
string, string.quoted, string.template#00C853—
keyword, storage.type, storage.modifier#FF6F00bold
keyword.operator, punctuation.accessor#00E5FF—
variable, variable.other#2D2D2D—
variable.parameter#00E5FFitalic
entity.name.function, support.function#448AFF—
meta.function-call#00E5FF—
entity.name.class, entity.name.type.class, support.class#D500F9bold
entity.name.type, support.type#D500F9—
entity.name.type.interface#D500F9italic
constant.numeric#FFEB3B—
constant, constant.language, constant.character#FFEB3B—
constant.language.boolean#D50000bold
variable.other.property, support.variable.property#00E5FF—
meta.object-literal.key#448AFF—
entity.name.tag, punctuation.definition.tag#FF6F00—
entity.other.attribute-name#D500F9italic
punctuation, meta.brace#2D2D2D—
string.regexp#D50000—
constant.character.escape#D500F9—
meta.decorator, punctuation.decorator#FFF59D—
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#FF6F00bold
markup.bold#FFEB3Bbold
markup.italic#D500F9italic
markup.underline.link#00E5FF—
markup.inline.raw, markup.fenced_code#00C853—
support.type.property-name.json#FF6F00—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D500F9—
support.type.property-name.css#448AFF—
support.constant.property-value.css#00E5FF—