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#0A3D62
  • activityBar.background#F0F0F0
  • activityBar.foreground#0A3D62
  • activityBarBadge.background#D1495B
  • activityBarBadge.foreground#FAFAFA
  • badge.background#D1495B
  • badge.foreground#FAFAFA
  • button.background#0A3D62
  • button.foreground#FAFAFA
  • button.hoverBackground#0A3D62AA
  • dropdown.background#F5F5F5
  • dropdown.border#0A3D62
  • dropdown.foreground#2E2E2E
  • editor.background#FAFAFA
  • editor.findMatchBackground#0A3D6244
  • editor.findMatchHighlightBackground#0A3D4422
  • editor.foreground#2E2E2E
  • editor.lineHighlightBackground#0A3D6220
  • editor.lineHighlightBorder#0A3D6280
  • editor.selectionBackground#D1495B55
  • editor.selectionHighlightBackground#D1495B33
  • editorBracketMatch.background#0A3D6333
  • editorBracketMatch.border#0A3D62
  • editorCursor.foreground#0A3D62
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#0A3D62
  • editorIndentGuide.background#B0B0B0
  • editorLineNumber.activeForeground#0A3D62
  • editorLineNumber.foreground#B0B0B0
  • editorWhitespace.foreground#B0B0B0
  • focusBorder#0A3D62
  • gitDecoration.conflictingResourceForeground#E0A800
  • gitDecoration.deletedResourceForeground#D1495B
  • gitDecoration.modifiedResourceForeground#0A3D62
  • gitDecoration.untrackedResourceForeground#009688
  • input.background#F5F5F5
  • input.border#0A3D62
  • input.foreground#2E2E2E
  • input.placeholderForeground#B0B0B0
  • inputOption.activeBorder#0A3D62
  • list.activeSelectionBackground#0A3D6244
  • list.activeSelectionForeground#FAFAFA
  • list.focusBackground#0A3D6244
  • list.highlightForeground#D1495B
  • list.hoverBackground#0A3D6233
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#0A3D6266
  • minimapSlider.background#0A3D6222
  • minimapSlider.hoverBackground#0A3D6244
  • panel.background#FAFAFA
  • panel.border#0A3D62
  • panelTitle.activeBorder#0A3D62
  • panelTitle.activeForeground#2E2E2E
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#B0B0B0CC
  • scrollbarSlider.background#B0B0B066
  • scrollbarSlider.hoverBackground#B0B0B099
  • sideBar.background#F5F5F5
  • sideBar.foreground#2E2E2E
  • sideBarSectionHeader.background#F0F0F0
  • sideBarSectionHeader.foreground#0A3D62
  • sideBarTitle.foreground#2E2E2E
  • statusBar.background#F0F0F0
  • statusBar.debuggingBackground#D1495B
  • statusBar.foreground#2E2E2E
  • statusBar.noFolderBackground#FAFAFA
  • statusBarItem.hoverBackground#0A3D6233
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#0A3D62
  • tab.activeForeground#0A3D62
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0A3D62
  • terminal.ansiBrightBlue#3A73B9
  • terminal.ansiBrightCyan#00C3C3
  • terminal.ansiBrightGreen#27C896
  • terminal.ansiBrightMagenta#B96DB8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FDD835
  • terminal.ansiCyan#00A6A6
  • terminal.ansiGreen#009688
  • terminal.ansiMagenta#7B2CBF
  • terminal.ansiRed#D1495B
  • terminal.ansiYellow#E0A800
  • terminal.background#FAFAFA
  • terminal.foreground#2E2E2E
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#2E2E2E
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#00A6A6
keyword, storage.type, storage.modifier#0A3D62bold
keyword.operator, punctuation.accessor#7B2CBF
variable, variable.other#2E2E2E
variable.parameter#D1495Bitalic
entity.name.function, support.function#009688
meta.function-call#27C896
entity.name.class, entity.name.type.class, support.class#D1495Bbold
entity.name.type, support.type#009688
entity.name.type.interface#009688italic
constant.numeric#E0A800
constant, constant.language, constant.character#E0A800
constant.language.boolean#D1495Bbold
variable.other.property, support.variable.property#0A3D62
meta.object-literal.key#0A3D62
entity.name.tag, punctuation.definition.tag#7B2CBF
entity.other.attribute-name#D1495Bitalic
punctuation, meta.brace#7A7A7A
string.regexp#E0A800
constant.character.escape#7B2CBF
meta.decorator, punctuation.decorator#D1495B
invalid, invalid.illegal#D1495Bstrikethrough
markup.heading, entity.name.section#0A3D62bold
markup.bold#D1495Bbold
markup.italic#009688italic
markup.underline.link#00A6A6
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#0A3D62
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D1495B
support.type.property-name.css#009688
support.constant.property-value.css#00A6A6