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.background#262626
  • activityBar.border#2A2A2A
  • activityBar.foreground#6A6A69
  • activityBar.inactiveForeground#5A5A59
  • activityBarBadge.background#010101
  • activityBarBadge.foreground#E0E0E0
  • button.background#0854D0
  • button.border#252425
  • button.hoverBackground#1f6ae2
  • button.secondaryBackground#3d3d3d
  • button.secondaryHoverBackground#4c4c4c
  • dropdown.background#1E1D1E
  • dropdown.border#303030
  • dropdown.foreground#B2B2B2
  • editor.background#131313
  • editor.findMatchBackground#194dbd
  • editor.findMatchHighlightBackground#705f00
  • editor.foreground#E8E4CF
  • editor.lineHighlightBackground#272727
  • editor.selectedForeground#FFFFFF
  • editor.selectionBackground#004a9e
  • editor.wordHighlightBackground#444547
  • editorBracketMatch.background#1E1D1E
  • editorBracketMatch.border#303030
  • editorCursor.foreground#CACCCA
  • editorGroup.border#393939
  • editorGroupHeader.border#393939
  • editorGroupHeader.tabsBackground#1B1B1B
  • editorGroupHeader.tabsBorder#444444
  • editorHoverWidget.background#363636
  • editorHoverWidget.border#3A3A3A
  • editorHoverWidget.selectedBackground#464646
  • editorIndentGuide.background#303030
  • editorLineNumber.background#2C2C2C
  • editorLineNumber.foreground#8F8F8F
  • editorSuggestWidget.background#363636
  • editorSuggestWidget.border#3A3A3A
  • editorSuggestWidget.highlightForeground#ffff00
  • editorSuggestWidget.selectedBackground#6a6a6a
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWidget.background#272727
  • editorWidget.border#272727
  • focusBorder#3A3A3AFF
  • input.background#1E1D1E
  • input.border#303030
  • input.foreground#DDDDDD
  • inputOption.activeBackground#303030
  • list.activeSelectionBackground#353436
  • list.activeSelectionForeground#E3E4E4
  • list.hoverBackground#252426
  • list.hoverForeground#B2B2B2
  • list.inactiveSelectionBackground#353436
  • list.inactiveSelectionForeground#B2B2B2
  • notification.background#54a3ff
  • panel.background#1E1D1E
  • panel.border#3A3A3A
  • panelInput.border#303030
  • panelTitle.activeBorder#3A3A3A
  • panelTitle.activeForeground#B2B2B2
  • problemsWarningIcon.foreground#f26d0d
  • scrollbar.shadow#1e1f2099
  • scrollbarSlider.activeBackground#2C2D2D
  • scrollbarSlider.background#2C2D2D
  • scrollbarSlider.hoverBackground#2C2D2D
  • selection.background#004a9e
  • sideBar.background#1c1c1c
  • sideBar.border#3A3A3A
  • sideBar.foreground#B2B2B2
  • sideBarSectionHeader.background#302F30
  • sideBarSectionHeader.border#363636
  • sideBarSectionHeader.foreground#898989
  • sidebarTitle.background#302F30
  • sideBarTitle.foreground#898989
  • statusBar.background#262626
  • statusBar.border#4A494A
  • statusBar.debuggingBackground#262626
  • statusBar.debuggingForeground#B2B2B2
  • statusBar.foreground#B2B2B2
  • statusBar.noFolderBackground#262626
  • statusBar.noFolderForeground#B2B2B2
  • tab.activeBackground#101010
  • tab.activeBorder#101010
  • tab.activeBorderTop#101010
  • tab.activeForeground#FFFFFF
  • tab.border#3F3F3F
  • tab.inactiveBackground#242424
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#282BFF
  • terminal.ansiBrightBlue#272BFF
  • terminal.ansiBrightCyan#301CAE
  • terminal.ansiBrightGreen#449444
  • terminal.ansiBrightMagenta#BA3DCA
  • terminal.ansiBrightRed#D9564E
  • terminal.ansiBrightWhite#eeeeee
  • terminal.ansiCyan#0B0098
  • terminal.ansiGreen#277F2B
  • terminal.ansiMagenta#AE30C2
  • terminal.ansiRed#C71211
  • terminal.ansiWhite#131313
  • titleBar.activeBackground#292929
  • titleBar.border#3A393A
  • titleBar.inactiveBackground#333333
  • widget.border#3a3a3a
  • widget.shadow#191919

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#CACCCA
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#4C9BE9underline
comment, markup.fenced_code, markup.inline#9E9E9E
string#76BA53
constant.character.escape#b8b8b8
constant.other.placeholder#449cd3
variable.other.class, meta.property-name, meta.property-value, support, support.function.kernel#CACCCA
variable.other.constant, constant.language, constant.other.color#705f00
keyword, storage.modifier, storage.type, variable.language.this, punctuation.definition.template-expression, constant.numeric, entity.other.attribute-name#AE9513
meta.tag.structure, entity.name.tag, meta.attribute#9a9576
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression#AE9513
entity.name.type.class, entity.other.inherited-class, source.css, entity.name.tag.css, entity.other.attribute-name.class.css, punctuation.definition.entity.css, meta.attribute-selector.scss, entity.other.attribute-name.attribute.scss#AC98AD
variable.language.self, variable.other.readwrite.instance, meta.definition.variable.scss#E1D797
entity.name.type, entity.other.inherited-class, variable.other.object.property, meta.instance.constructor#D73737
meta.embedded, punctuation.definition.template-expression, punctuation.section.embedded, support.constant.property-value, support.variable.property.dom, support.type.property-name.json, punctuation.separator.key-value#CACCCA
meta.function-call, variable.parameter.function#CACCCA
support.function, entity.name.function#c0b298
variable.other.constant, variable.language.this#7D7A68
constant.other.symbol#7D7A68
string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#5FA938
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

macOS Classic - Coding Theme