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#87CEEB
  • activityBar.background#D3D3D3
  • activityBar.foreground#5E5E5E
  • activityBarBadge.background#D96A6A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D96A6A
  • badge.foreground#FFFFFF
  • button.background#87CEEB
  • button.foreground#FFFFFF
  • button.hoverBackground#6AB7FF
  • dropdown.background#FFFFFF
  • dropdown.border#CCCCCC
  • dropdown.foreground#333333
  • editor.background#FAF3E0
  • editor.findMatchBackground#FFE082
  • editor.findMatchHighlightBackground#FFF59D
  • editor.foreground#333333
  • editor.lineHighlightBackground#F2F2F2
  • editor.lineHighlightBorder#CCCCCC
  • editor.selectionBackground#B3D4FC
  • editor.selectionHighlightBackground#D6E9FF
  • editorBracketMatch.background#D6E9FF
  • editorBracketMatch.border#87CEEB
  • editorCursor.foreground#5E5E5E
  • editorGroupHeader.tabsBackground#EAEAEA
  • editorIndentGuide.activeBackground#87CEEB
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#333333
  • editorLineNumber.foreground#999999
  • editorWhitespace.foreground#CCCCCC
  • focusBorder#87CEEB
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#CCCCCC
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#87CEEB
  • list.activeSelectionBackground#B3D4FC
  • list.activeSelectionForeground#333333
  • list.focusBackground#D6E9FF
  • list.highlightForeground#87CEEB
  • list.hoverBackground#E0F0FF
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#707070
  • minimapSlider.background#B0B0B0
  • minimapSlider.hoverBackground#909090
  • panel.background#FAF3E0
  • panel.border#D3D3D3
  • panelTitle.activeBorder#87CEEB
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#CCCCCC
  • scrollbarSlider.activeBackground#707070
  • scrollbarSlider.background#B0B0B0
  • scrollbarSlider.hoverBackground#909090
  • sideBar.background#F5F5F5
  • sideBar.foreground#5E5E5E
  • sideBarSectionHeader.background#EAEAEA
  • sideBarSectionHeader.foreground#5E5E5E
  • sideBarTitle.foreground#333333
  • statusBar.background#87CEEB
  • statusBar.debuggingBackground#D96A6A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E0E0E0
  • statusBarItem.hoverBackground#B0D4F0
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#87CEEB
  • tab.activeForeground#333333
  • tab.border#D3D3D3
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#87CEEB
  • terminal.ansiBrightBlue#6AB7FF
  • terminal.ansiBrightCyan#00E5FF
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#FF80AB
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#7FDBFF
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#D96A6A
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#FFD54F
  • terminal.background#FAF3E0
  • terminal.foreground#333333
  • titleBar.activeBackground#E0E0E0
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#D0D0D0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#999999italic
string, string.quoted, string.template#8BC34A
keyword, storage.type, storage.modifier#5E5E5Ebold
keyword.operator, punctuation.accessor#5E5E5E
variable, variable.other#D59A5E
variable.parameter#D59A5Eitalic
entity.name.function, support.function#6A9FB5
meta.function-call#6A9FB5
entity.name.class, entity.name.type.class, support.class#A279FFbold
entity.name.type, support.type#C594C5
entity.name.type.interface#C594C5italic
constant.numeric#5C9AB0
constant, constant.language, constant.character#C594C5
constant.language.boolean#C594C5bold
variable.other.property, support.variable.property#D59A5E
meta.object-literal.key#6A9FB5
entity.name.tag, punctuation.definition.tag#C594C5
entity.other.attribute-name#D59A5Eitalic
punctuation, meta.brace#5E5E5E
string.regexp#E69F00
constant.character.escape#D96A6A
meta.decorator, punctuation.decorator#C594C5
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#5E5E5Ebold
markup.bold#5E5E5Ebold
markup.italic#5E5E5Eitalic
markup.underline.link#87CEEB
markup.inline.raw, markup.fenced_code#8BC34A
support.type.property-name.json#6A9FB5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5E5E5E
support.type.property-name.css#8BC34A
support.constant.property-value.css#C594C5
themesmith by CyberBoost - VS Code Theme