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#FFB300
  • activityBar.background#C8E6C9
  • activityBar.foreground#2E7D32
  • activityBarBadge.background#FFB300
  • activityBarBadge.foreground#E8F5E9
  • badge.background#FFB300
  • badge.foreground#E8F5E9
  • button.background#FF5722
  • button.foreground#FFFFFF
  • button.hoverBackground#EF5350
  • dropdown.background#C8E6C9
  • dropdown.border#FFB300
  • dropdown.foreground#2E7D32
  • editor.background#E8F5E9
  • editor.findMatchBackground#FFCA2840
  • editor.findMatchHighlightBackground#FFCA2820
  • editor.foreground#2E7D32
  • editor.lineHighlightBackground#E8F5E980
  • editor.lineHighlightBorder#FFB30080
  • editor.selectionBackground#FFB30040
  • editor.selectionHighlightBackground#FFB30020
  • editorBracketMatch.background#FFB30033
  • editorBracketMatch.border#FFB300
  • editorCursor.foreground#FF5722
  • editorGroupHeader.tabsBackground#E8F5E9
  • editorIndentGuide.activeBackground#9E9E9E80
  • editorIndentGuide.background#9E9E9E40
  • editorLineNumber.activeForeground#FF5722
  • editorLineNumber.foreground#6D6D6D
  • editorWhitespace.foreground#9E9E9E80
  • focusBorder#FFB300
  • gitDecoration.conflictingResourceForeground#EF5350
  • gitDecoration.deletedResourceForeground#C62828
  • gitDecoration.modifiedResourceForeground#FFB300
  • gitDecoration.untrackedResourceForeground#2E7D32
  • input.background#C8E6C9
  • input.border#FFB300
  • input.foreground#2E7D32
  • input.placeholderForeground#6D6D6D
  • inputOption.activeBorder#FFB300
  • list.activeSelectionBackground#FFB30033
  • list.activeSelectionForeground#2E7D32
  • list.focusBackground#FFB30033
  • list.highlightForeground#FF5722
  • list.hoverBackground#FFB30022
  • minimap.background#E8F5E9
  • minimapSlider.activeBackground#FFB30066
  • minimapSlider.background#FFB30022
  • minimapSlider.hoverBackground#FFB30044
  • panel.background#E8F5E9
  • panel.border#A5D6A7
  • panelTitle.activeBorder#FFB300
  • panelTitle.activeForeground#2E7D32
  • panelTitle.inactiveForeground#6D6D6D
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#9E9E9EAA
  • scrollbarSlider.background#9E9E9E44
  • scrollbarSlider.hoverBackground#9E9E9E88
  • sideBar.background#C8E6C9
  • sideBar.foreground#2E7D32
  • sideBarSectionHeader.background#C8E6C9
  • sideBarSectionHeader.foreground#FFB300
  • sideBarTitle.foreground#2E7D32
  • statusBar.background#FFB300
  • statusBar.debuggingBackground#FFCA28
  • statusBar.foreground#1A1A1A
  • statusBar.noFolderBackground#FFB300
  • statusBarItem.hoverBackground#FFCA28
  • tab.activeBackground#E8F5E9
  • tab.activeBorder#FFB300
  • tab.activeForeground#2E7D32
  • tab.border#E8F5E9
  • tab.inactiveBackground#C8E6C9
  • tab.inactiveForeground#6D6D6D
  • terminal.ansiBlue#1565C0
  • terminal.ansiBrightBlue#4FC3F7
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#2E7D32
  • terminal.ansiMagenta#D81B60
  • terminal.ansiRed#C62828
  • terminal.ansiYellow#FFB300
  • terminal.background#E8F5E9
  • terminal.foreground#2E7D32
  • titleBar.activeBackground#C8E6C9
  • titleBar.activeForeground#2E7D32
  • titleBar.inactiveBackground#E8F5E9
  • titleBar.inactiveForeground#6D6D6D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#66BB6A
keyword, storage.type, storage.modifier#FFB300bold
keyword.operator, punctuation.accessor#FF5722
variable, variable.other#2E7D32
variable.parameter#FF5722italic
entity.name.function, support.function#42A5F5
meta.function-call#FF7043
entity.name.class, entity.name.type.class, support.class#FFB300bold
entity.name.type, support.type#26A69A
entity.name.type.interface#FF5722italic
constant.numeric#D84315
constant, constant.language, constant.character#FFB300
constant.language.boolean#FF5722bold
variable.other.property, support.variable.property#2E7D32
meta.object-literal.key#42A5F5
entity.name.tag, punctuation.definition.tag#FFB300
entity.other.attribute-name#FF5722italic
punctuation, meta.brace#6D6D6D
string.regexp#FF7043
constant.character.escape#FF5722
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#C62828strikethrough
markup.heading, entity.name.section#FFB300bold
markup.bold#FFB300bold
markup.italic#FF5722italic
markup.underline.link#42A5F5
markup.inline.raw, markup.fenced_code#66BB6A
support.type.property-name.json#FF5722
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFB300
support.type.property-name.css#42A5F5
support.constant.property-value.css#FF7043
themesmith by CyberBoost - VS Code Theme