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.activeBackground#1C364A
  • activityBar.activeBorder#6D8FB7
  • activityBar.background#122330
  • activityBar.border#223340
  • activityBar.foreground#B5B3AD
  • activityBarBadge.background#489D8F
  • activityBarBadge.foreground#122330
  • badge.background#489D8F
  • badge.foreground#122330
  • breadcrumb.background#122330
  • breadcrumb.focusForeground#B5B3AD
  • breadcrumb.foreground#62717D
  • button.background#489D8F
  • button.foreground#122330
  • button.hoverBackground#3a8a7d
  • debugToolBar.background#122330
  • debugToolBar.border#223340
  • descriptionForeground#62717D
  • diffEditor.border#223340
  • diffEditor.insertedTextBackground#489D8F20
  • diffEditor.removedTextBackground#AA464C20
  • dropdown.background#122330
  • dropdown.border#223340
  • dropdown.foreground#B5B3AD
  • editor.background#152837
  • editor.findMatchBackground#23435D
  • editor.findMatchBorder#6D8FB7
  • editor.findMatchHighlightBackground#23435D80
  • editor.foreground#B5B3AD
  • editor.hoverHighlightBackground#264862
  • editor.lineHighlightBackground#1C364A
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1E394E
  • editor.selectionForeground#B5B3AD
  • editor.wordHighlightBackground#223340
  • editor.wordHighlightStrongBackground#62717D
  • editorError.foreground#AA464C
  • editorGroup.border#223340
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#122330
  • editorGroupHeader.tabsBackground#1C364A
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.background#122330
  • editorHoverWidget.background#122330
  • editorHoverWidget.border#223340
  • editorInfo.foreground#6D8FB7
  • editorLineNumber.activeForeground#B5B3AD
  • editorLineNumber.foreground#62717D
  • editorSuggestWidget.background#122330
  • editorSuggestWidget.border#223340
  • editorSuggestWidget.selectedBackground#1C364A
  • editorWarning.foreground#D59E7B
  • editorWidget.background#122330
  • editorWidget.border#223340
  • editorWidget.resizeBorder#223340
  • focusBorder#6D8FB7
  • gitDecoration.addedResourceForeground#489D8F
  • gitDecoration.conflictingResourceForeground#D47D7D
  • gitDecoration.deletedResourceForeground#AA464C
  • gitDecoration.ignoredResourceForeground#62717D
  • gitDecoration.modifiedResourceForeground#D59E7B
  • gitDecoration.untrackedResourceForeground#489D8F
  • input.background#1C364A
  • input.border#223340
  • input.foreground#B5B3AD
  • input.placeholderForeground#62717D
  • inputOption.activeBackground#264862
  • inputOption.activeBorder#6D8FB7
  • inputOption.activeForeground#B5B3AD
  • list.activeSelectionBackground#1C364A
  • list.activeSelectionForeground#B5B3AD
  • list.focusBackground#1C364A
  • list.focusForeground#A6D0D9
  • list.focusHighlightForeground#A6D0D9
  • list.hoverBackground#1C364A
  • list.inactiveSelectionBackground#1C364A
  • list.inactiveSelectionForeground#B5B3AD
  • menu.background#122330
  • menu.border#223340
  • menu.foreground#B5B3AD
  • menu.selectionBackground#1C364A
  • menu.selectionForeground#B5B3AD
  • menu.separatorBackground#223340
  • notifications.background#122330
  • notifications.border#223340
  • notifications.foreground#B5B3AD
  • panel.background#122330
  • panel.border#223340
  • peekView.border#6D8FB7
  • peekViewEditor.background#152837
  • peekViewEditor.matchHighlightBackground#23435D
  • peekViewEditorGutter.background#152837
  • peekViewResult.background#122330
  • peekViewResult.fileForeground#B5B3AD
  • peekViewResult.selectionBackground#1C364A
  • peekViewResult.selectionForeground#B5B3AD
  • peekViewTitle.background#122330
  • peekViewTitleDescription.foreground#62717D
  • peekViewTitleLabel.foreground#A6D0D9
  • pickerGroup.border#223340
  • profileBadge.background#489D8F
  • progressBar.background#6D8FB7
  • quickInput.background#122330
  • quickInput.foreground#B5B3AD
  • quickInputList.focusBackground#1C364A
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#62717D
  • scrollbarSlider.background#62717D5A
  • scrollbarSlider.hoverBackground#62717DA5
  • selection.background#122330
  • sideBar.background#122330
  • sideBar.border#223340
  • sideBar.foreground#B5B3AD
  • sideBarSectionHeader.background#1C364A
  • sideBarSectionHeader.border#223340
  • sideBarTitle.foreground#B5B3AD
  • statusBar.background#152837
  • statusBar.border#223340
  • statusBar.debuggingBackground#1C364ACB
  • statusBar.foreground#B5B3AD
  • statusBar.noFolderBackground#122330
  • statusBarItem.remoteBackground#489D8F
  • statusBarItem.remoteForeground#122330
  • tab.activeBackground#152837
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#B5B3AD
  • tab.border#36424c
  • tab.hoverForeground#A6D0D9
  • tab.inactiveBackground#1C364A
  • tab.inactiveForeground#62717D
  • tab.unfocusedInactiveForeground#62717D
  • terminal.ansiBlack#606C76CD
  • terminal.ansiBlue#6D8FB7CD
  • terminal.ansiBrightBlack#606C76
  • terminal.ansiBrightBlue#6D8FB7
  • terminal.ansiBrightCyan#A6D0D9
  • terminal.ansiBrightGreen#489D8F
  • terminal.ansiBrightMagenta#C072AD
  • terminal.ansiBrightRed#AA464C
  • terminal.ansiBrightWhite#E1E1DE
  • terminal.ansiBrightYellow#D59E7B
  • terminal.ansiCyan#A6D0D9CD
  • terminal.ansiGreen#489D8FCB
  • terminal.ansiMagenta#A296C0
  • terminal.ansiRed#AA464CCD
  • terminal.ansiWhite#E1E1DECC
  • terminal.ansiYellow#D59E7BCC
  • terminal.background#122330
  • terminal.border#223340
  • terminal.foreground#B5B3AD
  • terminalCursor.foreground#B5B3AD
  • titleBar.activeBackground#122330
  • titleBar.activeForeground#B5B3AD
  • titleBar.border#36424c
  • titleBar.inactiveBackground#122330
  • titleBar.inactiveForeground#62717D
  • tree.indentGuidesStroke#223340
  • widget.border#223340
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#62717Ditalic
string, string.quoted, string.template#489D8F—
constant.numeric#A6D0D9—
keyword, keyword.control, keyword.operator.new, keyword.other#D47D7D—
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.import, keyword.control.from, keyword.control.export#D47D7D—
storage.type, storage.modifier#D47D7D—
entity.name.function, meta.function-call, variable.function, support.function#6D8FB7—
entity.name.type, entity.name.class, support.type, support.class, storage.type.class#D59E7B—
entity.name.tag, support.class.component#D59E7B—
entity.other.attribute-name, meta.tag.attributes#C072AD—
variable.other.property, support.type.property-name, meta.object-literal.key#C072AD—
variable, variable.other.readwrite, variable.other#B5B3AD—
variable.parameter#B5B3AD—
constant, constant.language, constant.other, variable.other.constant#A296C0—
entity.name.type.class, meta.function.constructor#A296C0—
keyword.operator, punctuation.accessor#A296C0—
punctuation.definition.block, punctuation.section, meta.brace#B5B3AD—
entity.name.namespace, entity.name.module#A296C0—
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#D59E7B—
source.css support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#C072AD—
support.constant.property-value.css, support.constant.property-value.scss#B5B3AD—
constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css#A6D0D9—
entity.other.attribute-name.class.css#D59E7B—
entity.other.attribute-name.id.css#6D8FB7—
support.type.property-name.json#C072AD—
markup.heading, markup.heading entity.name, punctuation.definition.heading.markdown#D47D7Dbold
markup.bold#D59E7Bbold
markup.italic#A296C0italic
markup.inline.raw, markup.raw.block#489D8F—
string.other.link.title.markdown#6D8FB7—
markup.underline.link#A6D0D9underline
invalid, invalid.illegal#AA464C—
*url*, *link*, *uri*—underline