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#0066CC
  • activityBar.background#E8F0FE
  • activityBar.foreground#0066CC
  • activityBarBadge.background#0066CC
  • activityBarBadge.foreground#FAFAFA
  • badge.background#0066CC
  • badge.foreground#FAFAFA
  • button.background#0066CC
  • button.foreground#FAFAFA
  • button.hoverBackground#0052A3
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#2D2D2D
  • editor.background#FAFAFA
  • editor.findMatchBackground#0066CC44
  • editor.findMatchHighlightBackground#0066CC22
  • editor.foreground#2D2D2D
  • editor.lineHighlightBackground#DCE8FF20
  • editor.lineHighlightBorder#DCE8FF80
  • editor.selectionBackground#5A9BFF40
  • editor.selectionHighlightBackground#5A9BFF33
  • editorBracketMatch.background#0066CC33
  • editorBracketMatch.border#0066CC
  • editorCursor.foreground#0066CC
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#CCCCCC88
  • editorIndentGuide.background#CCCCCC44
  • editorLineNumber.activeForeground#0066CC
  • editorLineNumber.foreground#A0A0A0
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#0066CC
  • gitDecoration.conflictingResourceForeground#FDD835
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#0066CC
  • gitDecoration.untrackedResourceForeground#009688
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#2D2D2D
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#0066CC
  • list.activeSelectionBackground#E8F0FE
  • list.activeSelectionForeground#0066CC
  • list.focusBackground#E8F0FE
  • list.highlightForeground#0066CC
  • list.hoverBackground#E8F0FE66
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#0066CC66
  • minimapSlider.background#0066CC22
  • minimapSlider.hoverBackground#0066CC44
  • panel.background#FAFAFA
  • panel.border#CCCCCC
  • panelTitle.activeBorder#0066CC
  • panelTitle.activeForeground#0066CC
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#0066CC88
  • scrollbarSlider.background#BDBDBD44
  • scrollbarSlider.hoverBackground#BDBDBD88
  • sideBar.background#F0F4FA
  • sideBar.foreground#2D2D2D
  • sideBarSectionHeader.background#E0E7F2
  • sideBarSectionHeader.foreground#2D2D2D
  • sideBarTitle.foreground#0066CC
  • statusBar.background#0066CC
  • statusBar.debuggingBackground#009688
  • statusBar.foreground#FAFAFA
  • statusBar.noFolderBackground#E8F0FE
  • statusBarItem.hoverBackground#5A9BFF33
  • tab.activeBackground#E8F0FE
  • tab.activeBorder#0066CC
  • tab.activeForeground#0066CC
  • tab.border#CCCCCC
  • tab.inactiveBackground#FAFAFA
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#5A9BFF
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#4DB6AC
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#009688
  • terminal.ansiGreen#009688
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAFA
  • terminal.foreground#2D2D2D
  • titleBar.activeBackground#E8F0FE
  • titleBar.activeForeground#2D2D2D
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#0066CCbold
keyword.operator, punctuation.accessor#5A9BFF
variable, variable.other#2D2D2D
variable.parameter#5A9BFFitalic
entity.name.function, support.function#0066CC
meta.function-call#5A9BFF
entity.name.class, entity.name.type.class, support.class#009688bold
entity.name.type, support.type#009688
entity.name.type.interface#5A9BFFitalic
constant.numeric#D84315
constant, constant.language, constant.character#E53935
constant.language.boolean#D84315bold
variable.other.property, support.variable.property#0066CC
meta.object-literal.key#0066CC
entity.name.tag, punctuation.definition.tag#0066CC
entity.other.attribute-name#E53935italic
punctuation, meta.brace#5A9BFF
string.regexp#E53935
constant.character.escape#E53935
meta.decorator, punctuation.decorator#FDD835
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#0066CCbold
markup.bold#E53935bold
markup.italic#E53935italic
markup.underline.link#5A9BFF
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#0066CC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FDD835
support.type.property-name.css#0066CC
support.constant.property-value.css#5A9BFF
themesmith by CyberBoost - VS Code Theme