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#4CAF50
  • activityBar.background#1A1A1F
  • activityBar.foreground#A9B7C6
  • activityBarBadge.background#FF8800
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8800
  • badge.foreground#FFFFFF
  • button.background#4CAF50
  • button.foreground#FFFFFF
  • button.hoverBackground#66BB6A
  • dropdown.background#212730
  • dropdown.border#4CAF50
  • dropdown.foreground#E0E0E0
  • editor.background#0F0F13
  • editor.findMatchBackground#FF8800
  • editor.findMatchHighlightBackground#FFB74D
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2C2C34
  • editor.lineHighlightBorder#4CAF50
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#3A3D41
  • editorBracketMatch.background#264F78
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#FF8800
  • editorGroupHeader.tabsBackground#151519
  • editorIndentGuide.activeBackground#4CAF50
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#5A5A5A
  • focusBorder#FF8800
  • gitDecoration.conflictingResourceForeground#E53935
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#FF8800
  • gitDecoration.untrackedResourceForeground#81C784
  • input.background#212730
  • input.border#4CAF50
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FF8800
  • list.activeSelectionBackground#4CAF50
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3A3A3F
  • list.highlightForeground#FF8800
  • list.hoverBackground#2C2C34
  • minimap.background#151519
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#555555
  • minimapSlider.hoverBackground#777777
  • panel.background#151519
  • panel.border#333333
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#7F7F7F
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999
  • scrollbarSlider.background#555555
  • scrollbarSlider.hoverBackground#777777
  • sideBar.background#151519
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#151519
  • sideBarSectionHeader.foreground#A9B7C6
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#212730
  • statusBar.debuggingBackground#B71C1C
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#383838
  • statusBarItem.hoverBackground#4CAF50
  • tab.activeBackground#1E1E24
  • tab.activeBorder#4CAF50
  • tab.activeForeground#FFFFFF
  • tab.border#333333
  • tab.inactiveBackground#151519
  • tab.inactiveForeground#7F7F7F
  • terminal.ansiBlue#4FC3F7
  • terminal.ansiBrightBlue#81D4FA
  • terminal.ansiBrightCyan#B2EBF2
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#F8BBD0
  • terminal.ansiBrightRed#EF9A9A
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#80DEEA
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#E1BEE7
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#FFD54F
  • terminal.background#0F0F13
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1E1E24
  • titleBar.activeForeground#E8E8E8
  • titleBar.inactiveBackground#151519
  • titleBar.inactiveForeground#7F7F7F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#FF8800
keyword, storage.type, storage.modifier#4CAF50bold
keyword.operator, punctuation.accessor#81C784
variable, variable.other#B0BEC5
variable.parameter#FFB74Ditalic
entity.name.function, support.function#81D4FA
meta.function-call#80DEEA
entity.name.class, entity.name.type.class, support.class#9575CDbold
entity.name.type, support.type#B39DDB
entity.name.type.interface#FFB74Ditalic
constant.numeric#FFD54F
constant, constant.language, constant.character#E1BEE7
constant.language.boolean#4CAF50bold
variable.other.property, support.variable.property#4FC3F7
meta.object-literal.key#4FC3F7
entity.name.tag, punctuation.definition.tag#E57373
entity.other.attribute-name#81C784italic
punctuation, meta.brace#E0E0E0
string.regexp#FFB74D
constant.character.escape#FF8800
meta.decorator, punctuation.decorator#9575CD
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#4CAF50bold
markup.bold#4CAF50bold
markup.italic#81C784italic
markup.underline.link#80DEEA
markup.inline.raw, markup.fenced_code#FF8800
support.type.property-name.json#4FC3F7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#81D4FA
support.type.property-name.css#4FC3F7
support.constant.property-value.css#FFB74D