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#3A7CA5
  • activityBar.background#F0F4F8
  • activityBar.foreground#3A7CA5
  • activityBarBadge.background#3A7CA5
  • activityBarBadge.foreground#FAFAFA
  • badge.background#3A7CA5
  • badge.foreground#FAFAFA
  • button.background#3A7CA5
  • button.foreground#FAFAFA
  • button.hoverBackground#2A6590
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#80B3FF44
  • editor.findMatchHighlightBackground#80B3FF22
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#E3F2FD
  • editor.lineHighlightBorder#C5E1F5
  • editor.selectionBackground#C5E1F5
  • editor.selectionHighlightBackground#C5E1F580
  • editorBracketMatch.background#80B3FF22
  • editorBracketMatch.border#3A7CA5
  • editorCursor.foreground#3A7CA5
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#607D8B66
  • editorIndentGuide.background#B0BEC533
  • editorLineNumber.activeForeground#3A7CA5
  • editorLineNumber.foreground#90A4AE
  • editorWhitespace.foreground#B0BEC5
  • focusBorder#3A7CA5
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#3A7CA5
  • gitDecoration.untrackedResourceForeground#009688
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#2E2E2E
  • input.placeholderForeground#90A4AE
  • inputOption.activeBorder#3A7CA5
  • list.activeSelectionBackground#C5E1F5
  • list.activeSelectionForeground#3A7CA5
  • list.focusBackground#C5E1F5
  • list.highlightForeground#3A7CA5
  • list.hoverBackground#C5E1F566
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#3A7CA566
  • minimapSlider.background#B0BEC522
  • minimapSlider.hoverBackground#B0BEC544
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#3A7CA5
  • panelTitle.activeForeground#3A7CA5
  • panelTitle.inactiveForeground#90A4AE
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3A7CA588
  • scrollbarSlider.background#B0BEC544
  • scrollbarSlider.hoverBackground#B0BEC588
  • sideBar.background#F5FAFB
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F0F4F8
  • sideBarSectionHeader.foreground#3A7CA5
  • sideBarTitle.foreground#3A7CA5
  • statusBar.background#E3F2FD
  • statusBar.debuggingBackground#4CAF50
  • statusBar.foreground#3A7CA5
  • statusBar.noFolderBackground#F0F4F8
  • statusBarItem.hoverBackground#C5E1F5
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#3A7CA5
  • tab.activeForeground#3A7CA5
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5FAFB
  • tab.inactiveForeground#90A4AE
  • terminal.ansiBlue#3A7CA5
  • terminal.ansiBrightBlue#3A7CA5
  • terminal.ansiBrightCyan#009688
  • terminal.ansiBrightGreen#009688
  • terminal.ansiBrightMagenta#9C27B0
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FBC02D
  • terminal.ansiCyan#009688
  • terminal.ansiGreen#009688
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FBC02D
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#F0F4F8
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#90A4AE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#3A9F8F
keyword, storage.type, storage.modifier#3A7CA5bold
keyword.operator, punctuation.accessor#607D8B
variable, variable.other#2E2E2E
variable.parameter#3A9F8Fitalic
entity.name.function, support.function#3A9F8F
meta.function-call#3A9F8F
entity.name.class, entity.name.type.class, support.class#3A7CA5bold
entity.name.type, support.type#3A7CA5
entity.name.type.interface#3A9F8Fitalic
constant.numeric#3A9F8F
constant, constant.language, constant.character#3A9F8F
constant.language.boolean#3A7CA5bold
variable.other.property, support.variable.property#3A9F8F
meta.object-literal.key#3A9F8F
entity.name.tag, punctuation.definition.tag#3A7CA5
entity.other.attribute-name#607D8Bitalic
punctuation, meta.brace#607D8B
string.regexp#3A9F8F
constant.character.escape#3A7CA5
meta.decorator, punctuation.decorator#3A7CA5
invalid, invalid.illegal#E53935strikethrough
markup.heading, entity.name.section#3A7CA5bold
markup.bold#3A7CA5bold
markup.italic#607D8Bitalic
markup.underline.link#3A7CA5
markup.inline.raw, markup.fenced_code#3A9F8F
support.type.property-name.json#3A7CA5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#3A7CA5
support.type.property-name.css#607D8B
support.constant.property-value.css#3A9F8F
themesmith by CyberBoost - VS Code Theme