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#A2D729
  • activityBar.background#F5F5F5
  • activityBar.foreground#212121
  • activityBarBadge.background#A2D729
  • activityBarBadge.foreground#FFFFFF
  • badge.background#A2D729
  • badge.foreground#FFFFFF
  • button.background#A2D729
  • button.foreground#FFFFFF
  • button.hoverBackground#8CCF24
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFD54F
  • editor.findMatchHighlightBackground#FFF8E1
  • editor.foreground#212121
  • editor.lineHighlightBackground#FAFAFA
  • editor.lineHighlightBorder#E0E0E0
  • editor.selectionBackground#D0E9FF
  • editor.selectionHighlightBackground#E3F2FD
  • editorBracketMatch.background#FFEB3B
  • editorBracketMatch.border#FBC02D
  • editorCursor.foreground#212121
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#A2D729
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#A2D729
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#A2D729
  • list.activeSelectionBackground#D0E9FF
  • list.activeSelectionForeground#212121
  • list.focusBackground#B3D4FC
  • list.highlightForeground#A2D729
  • list.hoverBackground#E3F2FD
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#757575
  • minimapSlider.background#BDBDBD
  • minimapSlider.hoverBackground#9E9E9E
  • panel.background#F5F5F5
  • panel.border#E0E0E0
  • panelTitle.activeBorder#A2D729
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#BDBDBD66
  • scrollbarSlider.hoverBackground#9E9E9E
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#F5F5F5
  • statusBar.debuggingBackground#FF5F57
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#D0E9FF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#A2D729
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#007AFF
  • terminal.ansiBrightBlue#5AAEFF
  • terminal.ansiBrightCyan#72D2F7
  • terminal.ansiBrightGreen#48DB79
  • terminal.ansiBrightMagenta#C68CFA
  • terminal.ansiBrightRed#FF7A68
  • terminal.ansiBrightYellow#FFDD55
  • terminal.ansiCyan#5AC8FA
  • terminal.ansiGreen#34C759
  • terminal.ansiMagenta#AF52DE
  • terminal.ansiRed#FF3B30
  • terminal.ansiYellow#FFCC00
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#F5F5F5
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#34C759
keyword, storage.type, storage.modifier#007AFFbold
keyword.operator, punctuation.accessor#AF52DE
variable, variable.other#212121
variable.parameter#9E9E9Eitalic
entity.name.function, support.function#FF9500
meta.function-call#FF9500
entity.name.class, entity.name.type.class, support.class#AF52DEbold
entity.name.type, support.type#5AC8FA
entity.name.type.interface#5AC8FAitalic
constant.numeric#FF3B30
constant, constant.language, constant.character#AF52DE
constant.language.boolean#FF3B30bold
variable.other.property, support.variable.property#34C759
meta.object-literal.key#007AFF
entity.name.tag, punctuation.definition.tag#FF3B30
entity.other.attribute-name#AF52DEitalic
punctuation, meta.brace#212121
string.regexp#FF9500
constant.character.escape#FFCC00
meta.decorator, punctuation.decorator#AF52DE
invalid, invalid.illegal#FF3B30strikethrough
markup.heading, entity.name.section#007AFFbold
markup.bold#212121bold
markup.italic#212121italic
markup.underline.link#007AFF
markup.inline.raw, markup.fenced_code#9E9E9E
support.type.property-name.json#5AC8FA
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#AF52DE
support.type.property-name.css#34C759
support.constant.property-value.css#FF9500
themesmith by CyberBoost - VS Code Theme