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