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#162126
  • activityBar.border#162126
  • activityBar.foreground#A9BAC1
  • activityBar.inactiveForeground#7C9098
  • badge.background#57B4D4
  • badge.foreground#10181B
  • button.background#57B4D4
  • button.foreground#10181B
  • button.hoverBackground#72C4DF
  • descriptionForeground#A9BAC1
  • diffEditor.insertedTextBackground#59B89D22
  • diffEditor.removedTextBackground#FF8A7322
  • dropdown.background#1B2830
  • dropdown.border#26363E
  • dropdown.foreground#E4EEF1
  • dropdown.listBackground#1B2830
  • editor.background#10181B
  • editor.foreground#E4EEF1
  • editor.hover.background#1B2830
  • editor.hover.border#26363E
  • editor.hover.foreground#E4EEF1
  • editor.hover.statusBarBackground#162126
  • editor.lineHighlightBackground#162126
  • editor.selectionBackground#57B4D433
  • editor.selectionHighlightBackground#59B89D22
  • editor.wordHighlightBackground#57B4D422
  • editor.wordHighlightStrongBackground#57B4D433
  • editorBracketHighlight.foreground1#E07088
  • editorBracketHighlight.foreground2#68B8FF
  • editorBracketHighlight.foreground3#E0C278
  • editorBracketHighlight.foreground4#92D8A4
  • editorBracketHighlight.foreground5#E0A26E
  • editorBracketHighlight.foreground6#58D0D6
  • editorBracketMatch.background#57B4D422
  • editorBracketMatch.border#57B4D4
  • editorCursor.foreground#57B4D4
  • editorGroupHeader.tabsBackground#162126
  • editorGroupHeader.tabsBorder#16212600
  • editorGutter.addedBackground#59B89D
  • editorGutter.deletedBackground#FF8A73
  • editorGutter.modifiedBackground#57B4D4
  • editorHoverWidget.background#1B2830
  • editorHoverWidget.border#26363E
  • editorHoverWidget.foreground#E4EEF1
  • editorHoverWidget.statusBarBackground#162126
  • editorIndentGuide.activeBackground#38505A
  • editorIndentGuide.background#26363E
  • editorWhitespace.foreground#26363E
  • editorWidget.background#1B2830
  • editorWidget.border#26363E
  • errorForeground#FF8A73
  • focusBorder#57B4D480
  • foreground#E4EEF1
  • gitDecoration.conflictingResourceForeground#FF8A73
  • gitDecoration.ignoredResourceForeground#7C9098
  • gitDecoration.modifiedResourceForeground#57B4D4
  • gitDecoration.untrackedResourceForeground#59B89D
  • icon.foreground#A9BAC1
  • input.background#1B2830
  • input.border#1B283000
  • input.foreground#E4EEF1
  • input.placeholderForeground#7C9098
  • inputOption.activeBackground#57B4D422
  • list.activeSelectionBackground#57B4D41A
  • list.activeSelectionForeground#E4EEF1
  • list.focusBackground#57B4D41A
  • list.hoverBackground#57B4D410
  • list.inactiveSelectionBackground#57B4D41A
  • menu.background#1B2830
  • menu.foreground#E4EEF1
  • menu.selectionBackground#57B4D422
  • menu.separatorBackground#26363E
  • menubar.selectionBackground#26363E
  • notificationCenter.background#1B2830
  • notificationCenter.border#26363E
  • notificationCenterHeader.background#162126
  • notificationCenterHeader.foreground#E4EEF1
  • notificationLink.foreground#77C5E5
  • notifications.background#1B2830
  • notifications.foreground#E4EEF1
  • notificationsErrorIcon.foreground#FF8A73
  • notificationsInfoIcon.foreground#57B4D4
  • notificationsWarningIcon.foreground#E1B166
  • notificationToast.background#1B2830
  • notificationToast.border#26363E
  • panel.background#162126
  • panel.border#162126
  • panelTitle.activeForeground#E4EEF1
  • panelTitle.inactiveForeground#A9BAC1
  • peekView.border#57B4D4
  • peekViewEditor.background#10181B
  • peekViewResult.background#162126
  • peekViewResult.selectionBackground#57B4D422
  • peekViewTitle.background#162126
  • peekViewTitleDescription.foreground#A9BAC1
  • peekViewTitleLabel.foreground#E4EEF1
  • pickerGroup.border#162126
  • pickerGroup.foreground#7C9098
  • quickInput.background#1B2830
  • quickInput.foreground#E4EEF1
  • quickInputList.focusBackground#57B4D422
  • quickInputList.focusForeground#E4EEF1
  • quickInputTitle.background#162126
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#6B828E
  • scrollbarSlider.background#45576280
  • scrollbarSlider.hoverBackground#586D79B0
  • selection.background#57B4D433
  • sideBar.background#162126
  • sideBar.border#162126
  • sideBar.foreground#A9BAC1
  • sideBarSectionHeader.background#162126
  • sideBarSectionHeader.border#162126
  • sideBarSectionHeader.foreground#E4EEF1
  • statusBar.background#162126
  • statusBar.border#162126
  • statusBar.foreground#A9BAC1
  • tab.activeBackground#10181B
  • tab.activeBorder#57B4D4
  • tab.activeForeground#E4EEF1
  • tab.border#16212600
  • tab.inactiveBackground#162126
  • tab.inactiveForeground#7C9098
  • tab.unfocusedActiveBorder#57B4D480
  • terminal.ansiBlack#0B1215
  • terminal.ansiBlue#77C5E5
  • terminal.ansiCyan#74D6E0
  • terminal.ansiGreen#59B89D
  • terminal.ansiMagenta#B19EFF
  • terminal.ansiRed#FF8A73
  • terminal.ansiWhite#E4EEF1
  • terminal.ansiYellow#E1B166
  • terminal.background#10181B
  • terminal.foreground#E4EEF1
  • terminal.selectionBackground#57B4D433
  • textCodeBlock.background#1B2830
  • textLink.foreground#77C5E5
  • textSeparator.foreground#26363E
  • titleBar.activeBackground#162126
  • titleBar.activeForeground#E4EEF1
  • titleBar.border#162126
  • titleBar.inactiveBackground#162126
  • titleBar.inactiveForeground#7C9098
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C7480italic
string, punctuation.definition.string#92D8A4
constant.numeric, constant.language, constant.character, constant.other#E0A26E
keyword, storage.type, storage.modifier#E07088
keyword.operator#7C8E98
entity.name.function, support.function, meta.function-call#68B8FF
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#E0C278
variable, meta.definition.variable, support.variable, entity.name.variable#B8CCD6
variable.parameter#B8CCD6italic
variable.other.property, support.type.property-name#58D0D6
punctuation#7C8E98
meta.object-literal.key#58D0D6
entity.name.tag, punctuation.definition.tag#E07088
entity.other.attribute-name#E0C278
string.regexp#E0A26E
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#E07088
support.type.property-name.css#58D0D6
support.constant.property-value.css, keyword.other.unit.css#E0A26E
entity.other.attribute-name.html.vue#E07088
support.class.component.html.vue#E0C278
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#E0A26E
markup.heading.markdown#68B8FF
markup.underline.link.markdown, string.other.link.title.markdown#92D8A4
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#7C8E98
invalid#FF8A73
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#92D8A4
support.function.builtin.python#68B8FFitalic
support.function.magic.python#68B8FFitalic
support.type.python#E0C278
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#E07088italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#E0A26E
support.variable.magic.python#58D0D6
support.class.exception.python#E0C278
meta.fstring.python variable, constant.character.format.placeholder.other.python#B8CCD6