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—