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#1E2128
  • activityBar.border#272930
  • activityBar.foreground#AEC3CE
  • activityBar.inactiveForeground#6F7074
  • activityBarBadge.background#40697C
  • activityBarBadge.foreground#AEC3CE
  • badge.background#40697C
  • badge.foreground#C4D8E4
  • breadcrumb.activeSelectionForeground#C4D8E4
  • breadcrumb.focusForeground#AEC3CE
  • breadcrumb.foreground#6F7074
  • breadcrumbPicker.background#1E2128
  • button.background#40697C
  • button.foreground#D8ECF4
  • button.hoverBackground#5A8AA0
  • button.secondaryBackground#404450
  • button.secondaryForeground#AEC3CE
  • descriptionForeground#8898A8
  • diffEditor.insertedTextBackground#6A9EAA20
  • diffEditor.removedTextBackground#8A6A7A20
  • disabledForeground#6F7074
  • dropdown.background#1E2128
  • dropdown.border#404450
  • dropdown.foreground#AEC3CE
  • editor.background#272930
  • editor.findMatchBackground#7AA5B866
  • editor.findMatchHighlightBackground#7AA5B833
  • editor.foreground#AEC3CE
  • editor.lineHighlightBackground#2C2F38
  • editor.rangeHighlightBackground#40697C22
  • editor.selectionBackground#40697C55
  • editor.selectionHighlightBackground#40697C33
  • editor.wordHighlightBackground#7AA5B822
  • editor.wordHighlightStrongBackground#7AA5B844
  • editorBracketMatch.background#7AA5B833
  • editorBracketMatch.border#7AA5B8
  • editorCursor.foreground#AEC3CE
  • editorError.foreground#9A7A88
  • editorGroupHeader.tabsBackground#1E2128
  • editorGroupHeader.tabsBorder#1E2128
  • editorGutter.addedBackground#6A9EAA
  • editorGutter.background#232630
  • editorGutter.deletedBackground#8A6A7A
  • editorGutter.modifiedBackground#7AA5B8
  • editorHint.foreground#AEC3CE
  • editorHoverWidget.background#1E2128
  • editorHoverWidget.border#404450
  • editorIndentGuide.activeBackground#40697C88
  • editorIndentGuide.background#2C2F3899
  • editorInfo.foreground#7AA5B8
  • editorLineNumber.activeForeground#7AA5B8
  • editorLineNumber.foreground#404450
  • editorOverviewRuler.border#272930
  • editorRuler.foreground#2C2F38
  • editorSuggestWidget.background#1E2128
  • editorSuggestWidget.border#404450
  • editorSuggestWidget.foreground#AEC3CE
  • editorSuggestWidget.highlightForeground#C4D8E4
  • editorSuggestWidget.selectedBackground#2C2F38
  • editorWarning.foreground#8AABB8
  • editorWhitespace.foreground#2C2F38
  • editorWidget.background#1E2128
  • editorWidget.border#40697C
  • errorForeground#9A7A88
  • focusBorder#7AA5B8
  • foreground#AEC3CE
  • gitDecoration.addedResourceForeground#6A9EAA
  • gitDecoration.conflictingResourceForeground#9A8EAA
  • gitDecoration.deletedResourceForeground#9A7A88
  • gitDecoration.ignoredResourceForeground#6F7074
  • gitDecoration.modifiedResourceForeground#7AA5B8
  • gitDecoration.untrackedResourceForeground#7AAAA0
  • icon.foreground#7AA5B8
  • input.background#1E2128
  • input.border#404450
  • input.foreground#AEC3CE
  • input.placeholderForeground#6F7074
  • inputOption.activeBackground#2C2F38
  • inputOption.activeBorder#7AA5B8
  • inputOption.activeForeground#C4D8E4
  • list.activeSelectionBackground#2C2F38
  • list.activeSelectionForeground#C4D8E4
  • list.focusBackground#2C2F38
  • list.highlightForeground#C4D8E4
  • list.hoverBackground#2A2D36
  • list.hoverForeground#AEC3CE
  • list.inactiveSelectionBackground#272930
  • list.inactiveSelectionForeground#AEC3CE
  • menu.background#1E2128
  • menu.border#404450
  • menu.foreground#AEC3CE
  • menu.selectionBackground#2C2F38
  • menu.selectionForeground#C4D8E4
  • menu.separatorBackground#404450
  • menubar.selectionBackground#272930
  • menubar.selectionForeground#AEC3CE
  • notifications.background#1E2128
  • notifications.border#404450
  • notifications.foreground#AEC3CE
  • panel.background#1E2128
  • panel.border#272930
  • panelTitle.activeBorder#7AA5B8
  • panelTitle.activeForeground#AEC3CE
  • panelTitle.inactiveForeground#6F7074
  • scrollbarSlider.activeBackground#40697CAA
  • scrollbarSlider.background#2C2F3866
  • scrollbarSlider.hoverBackground#40404A88
  • selection.background#40697C44
  • settings.headerForeground#C4D8E4
  • settings.modifiedItemIndicator#7AA5B8
  • sideBar.background#22252E
  • sideBar.border#272930
  • sideBar.foreground#98B0BC
  • sideBarSectionHeader.background#272930
  • sideBarSectionHeader.border#1E2128
  • sideBarSectionHeader.foreground#AEC3CE
  • sideBarTitle.foreground#AEC3CE
  • statusBar.background#40697C
  • statusBar.border#2A4E5E
  • statusBar.debuggingBackground#2A4E5E
  • statusBar.debuggingForeground#C4D8E4
  • statusBar.foreground#D8ECF4
  • statusBar.noFolderBackground#1E2128
  • statusBarItem.hoverBackground#2A4E5E
  • statusBarItem.remoteBackground#7AA5B8
  • statusBarItem.remoteForeground#1E2128
  • tab.activeBackground#272930
  • tab.activeBorder#7AA5B8
  • tab.activeForeground#C4D8E4
  • tab.border#1E2128
  • tab.hoverBackground#2C2F38
  • tab.hoverForeground#AEC3CE
  • tab.inactiveBackground#1E2128
  • tab.inactiveForeground#6F7074
  • terminal.ansiBlack#1E2128
  • terminal.ansiBlue#40697C
  • terminal.ansiBrightBlack#6F7074
  • terminal.ansiBrightBlue#7AA5B8
  • terminal.ansiBrightCyan#6A9EAA
  • terminal.ansiBrightGreen#7AAAA0
  • terminal.ansiBrightMagenta#9A8EAA
  • terminal.ansiBrightRed#9A7A88
  • terminal.ansiBrightWhite#C4D8E4
  • terminal.ansiBrightYellow#A8B8C0
  • terminal.ansiCyan#5A8E9A
  • terminal.ansiGreen#5A8878
  • terminal.ansiMagenta#7A6E8A
  • terminal.ansiRed#7A5A68
  • terminal.ansiWhite#AEC3CE
  • terminal.ansiYellow#8898A4
  • terminal.background#1E2128
  • terminal.foreground#AEC3CE
  • terminal.selectionBackground#40697C55
  • terminalCursor.background#1E2128
  • terminalCursor.foreground#AEC3CE
  • titleBar.activeBackground#1E2128
  • titleBar.activeForeground#AEC3CE
  • titleBar.border#272930
  • titleBar.inactiveBackground#1A1D24
  • titleBar.inactiveForeground#6F7074
  • widget.shadow#1E212899

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F7074italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new#7AA5B8
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#7AA5B8italic
keyword.operator#8898A8
string, string.quoted, string.template#C4D8E4
constant.character.escape, string.regexp#D4E8F0
constant.numeric#8AABB8
constant.language#6A9EAAbold
variable.other.constant#C4D8E4
entity.name.function, support.function, meta.function-call entity.name.function#6A9EAAbold
variable.parameter#98B0BCitalic
entity.name.class, entity.name.type, entity.other.inherited-class, support.class#9ABCCCbold
entity.name.type.interface#9ABCCCitalic
variable, variable.other#AEC3CE
variable.other.property, support.variable.property, meta.object-literal.key#98B0BC
entity.name.tag#7AA5B8
entity.other.attribute-name#AEC3CE
entity.other.attribute-name.class, entity.other.attribute-name.id#8AABB8
support.type.property-name#6A9EAA
support.constant.property-value#C4D8E4
keyword.other.unit#8AABB8
punctuation, punctuation.definition#788898
variable.language.this, variable.language.self#7AA5B8italic
meta.decorator, entity.name.function.decorator#8AABB8italic
support.type.property-name.json#6A9EAA
markup.heading#C4D8E4bold
markup.bold#C4D8E4bold
markup.italic#AEC3CEitalic
markup.inline.raw#6A9EAA
markup.underline.link#7AA5B8underline
invalid#9A7A88strikethrough