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#0A0A0B
  • activityBar.foreground#EEEDEA
  • activityBar.inactiveForeground#7E7D82
  • activityBarBadge.background#F4F3EF
  • activityBarBadge.foreground#111113
  • badge.background#29292E
  • badge.foreground#EEEDEA
  • breadcrumb.focusForeground#EEEDEA
  • breadcrumb.foreground#7E7D82
  • button.background#F4F3EF
  • button.foreground#111113
  • button.hoverBackground#B4B2AC
  • diffEditor.insertedTextBackground#7E8D8022
  • diffEditor.removedTextBackground#D0583722
  • dropdown.background#1B1B1E
  • dropdown.border#29292E
  • dropdown.foreground#EEEDEA
  • editor.background#111113
  • editor.findMatchBackground#B4B2AC55
  • editor.findMatchHighlightBackground#B4B2AC33
  • editor.foreground#EEEDEA
  • editor.inactiveSelectionBackground#1B1B1E
  • editor.lineHighlightBackground#1B1B1E80
  • editor.selectionBackground#29292E
  • editorBracketHighlight.foreground1#C9C7C2
  • editorBracketHighlight.foreground2#B4B2AC
  • editorBracketHighlight.foreground3#E4F1FF
  • editorBracketHighlight.foreground4#C9C7C2
  • editorBracketHighlight.foreground5#B4B2AC
  • editorBracketHighlight.foreground6#E4F1FF
  • editorBracketHighlight.unexpectedBracket.foreground#D05837
  • editorBracketMatch.border#E4F1FF
  • editorCursor.foreground#EEEDEA
  • editorError.foreground#D05837
  • editorGroupHeader.tabsBackground#0A0A0B
  • editorGutter.addedBackground#7E8D80
  • editorGutter.deletedBackground#D05837
  • editorGutter.modifiedBackground#B4B2AC
  • editorHint.foreground#E4F1FF
  • editorHoverWidget.background#1B1B1E
  • editorHoverWidget.border#29292E
  • editorIndentGuide.activeBackground1#29292E
  • editorIndentGuide.background1#1B1B1E
  • editorInfo.foreground#7E99B4
  • editorLineNumber.activeForeground#B4B2AC
  • editorLineNumber.foreground#7E7D82
  • editorWarning.foreground#B4B2AC
  • editorWhitespace.foreground#29292E
  • editorWidget.background#1B1B1E
  • editorWidget.border#29292E
  • focusBorder#29292E
  • gitDecoration.addedResourceForeground#7E8D80
  • gitDecoration.deletedResourceForeground#D05837
  • gitDecoration.ignoredResourceForeground#7E7D82
  • gitDecoration.modifiedResourceForeground#B4B2AC
  • gitDecoration.untrackedResourceForeground#98968F
  • input.background#0A0A0B
  • input.border#29292E
  • input.foreground#EEEDEA
  • input.placeholderForeground#7E7D82
  • list.activeSelectionBackground#29292E
  • list.activeSelectionForeground#EEEDEA
  • list.highlightForeground#B4B2AC
  • list.hoverBackground#1B1B1E
  • list.inactiveSelectionBackground#1B1B1E
  • menu.background#1B1B1E
  • menu.foreground#EEEDEA
  • menu.selectionBackground#29292E
  • notifications.background#1B1B1E
  • notifications.foreground#EEEDEA
  • panel.background#111113
  • panel.border#29292E
  • panelTitle.activeBorder#F4F3EF
  • panelTitle.activeForeground#EEEDEA
  • peekView.border#29292E
  • peekViewEditor.background#0A0A0B
  • peekViewResult.background#0A0A0B
  • quickInput.background#1B1B1E
  • quickInputList.focusBackground#29292E
  • scrollbarSlider.background#1B1B1EAA
  • scrollbarSlider.hoverBackground#29292EAA
  • selection.background#29292E
  • sideBar.background#0A0A0B
  • sideBar.foreground#C9C7C2
  • sideBarSectionHeader.background#0A0A0B
  • sideBarTitle.foreground#EEEDEA
  • statusBar.background#0A0A0B
  • statusBar.debuggingBackground#D05837
  • statusBar.debuggingForeground#111113
  • statusBar.foreground#C9C7C2
  • statusBar.noFolderBackground#0A0A0B
  • tab.activeBackground#111113
  • tab.activeBorderTop#F4F3EF
  • tab.activeForeground#EEEDEA
  • tab.inactiveBackground#0A0A0B
  • tab.inactiveForeground#7E7D82
  • terminal.ansiBlack#1B1B1E
  • terminal.ansiBlue#7E99B4
  • terminal.ansiBrightBlack#7E7D82
  • terminal.ansiBrightBlue#7E99B4
  • terminal.ansiBrightCyan#E4F1FF
  • terminal.ansiBrightGreen#7E8D80
  • terminal.ansiBrightMagenta#A188CC
  • terminal.ansiBrightRed#D05837
  • terminal.ansiBrightWhite#EEEDEA
  • terminal.ansiBrightYellow#C4AE62
  • terminal.ansiCyan#E4F1FF
  • terminal.ansiGreen#7E8D80
  • terminal.ansiMagenta#A188CC
  • terminal.ansiRed#D05837
  • terminal.ansiWhite#C9C7C2
  • terminal.ansiYellow#C4AE62
  • terminal.background#111113
  • terminal.foreground#EEEDEA
  • titleBar.activeBackground#0A0A0B
  • titleBar.activeForeground#C9C7C2
  • titleBar.inactiveBackground#0A0A0B
  • titleBar.inactiveForeground#7E7D82
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7E7D82italic
string, string.quoted, punctuation.definition.string#98968F
constant.character.escape, string.regexp#E4F1FF
constant.numeric#B4B2AC
constant.language, constant.other, variable.other.constant#B4B2ACbold
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression#F4F3EFbold
keyword.operator#C9C7C2
entity.name.function, support.function, meta.function-call entity.name.function#7E99B4
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace#A188CC
support.type.primitive, keyword.type#A188CCitalic
variable, meta.definition.variable, variable.other.readwrite#EEEDEA
variable.parameter#C9C7C2italic
variable.other.property, meta.object-literal.key, support.type.property-name#EEEDEA
entity.name.tag#F4F3EFbold
entity.other.attribute-name#C9C7C2italic
punctuation, meta.brace#C9C7C2
keyword.control.exception, keyword.control.trycatch#D05837
variable.language#E4F1FFitalic
invalid, invalid.illegal#D05837
markup.heading, entity.name.section#F4F3EFbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#98968F
markup.underline.link#7E99B4
markup.inserted#7E8D80
markup.deleted#D05837
markup.changed#B4B2AC