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#21242b
  • activityBar.border#202328
  • activityBar.foreground#bbc2cf
  • activityBar.inactiveForeground#5B6268
  • activityBarBadge.background#51afef
  • activityBarBadge.foreground#282c34
  • breadcrumb.activeSelectionForeground#51afef
  • breadcrumb.background#282c34
  • breadcrumb.focusForeground#bbc2cf
  • breadcrumb.foreground#5B6268
  • breadcrumbPicker.background#21242b
  • commandCenter.activeBackground#202328
  • commandCenter.activeForeground#51afef
  • commandCenter.background#21242b
  • commandCenter.border#202328
  • commandCenter.foreground#bbc2cf
  • debugToolBar.background#21242b
  • debugToolBar.border#202328
  • diffEditor.insertedTextBackground#98be6520
  • diffEditor.removedTextBackground#ff6c6b20
  • editor.background#282c34
  • editor.findMatchBackground#2257A0
  • editor.findMatchHighlightBackground#202328
  • editor.foreground#bbc2cf
  • editor.hoverHighlightBackground#21242b
  • editor.lineHighlightBackground#21242b
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#21242b
  • editor.selectionBackground#2257A0
  • editor.selectionHighlightBackground#23272e
  • editor.wordHighlightBackground#202328
  • editor.wordHighlightStrongBackground#3f444a
  • editorBracketMatch.background#202328
  • editorBracketMatch.border#5B6268
  • editorCodeLens.foreground#5B6268
  • editorCursor.background#282c34
  • editorCursor.foreground#bbc2cf
  • editorError.foreground#ff6c6b
  • editorGutter.addedBackground#98be65
  • editorGutter.background#282c34
  • editorGutter.deletedBackground#ff6c6b
  • editorGutter.modifiedBackground#da8548
  • editorHint.foreground#4db5bd
  • editorIndentGuide.activeBackground#3f444a
  • editorIndentGuide.background#202328
  • editorInfo.foreground#51afef
  • editorLineNumber.activeForeground#bbc2cf
  • editorLineNumber.foreground#3f444a
  • editorOverviewRuler.addedForeground#98be65
  • editorOverviewRuler.border#202328
  • editorOverviewRuler.deletedForeground#ff6c6b
  • editorOverviewRuler.errorForeground#ff6c6b
  • editorOverviewRuler.findMatchForeground#51afef
  • editorOverviewRuler.infoForeground#51afef
  • editorOverviewRuler.modifiedForeground#da8548
  • editorOverviewRuler.warningForeground#ECBE7B
  • editorRuler.foreground#202328
  • editorWarning.foreground#ECBE7B
  • editorWhitespace.foreground#202328
  • editorWidget.background#21242b
  • editorWidget.border#202328
  • editorWidget.foreground#bbc2cf
  • editorWidget.resizeBorder#51afef
  • extensionButton.prominentBackground#98be65
  • extensionButton.prominentForeground#282c34
  • extensionButton.prominentHoverBackground#98be65dd
  • gitDecoration.addedResourceForeground#98be65
  • gitDecoration.conflictingResourceForeground#a9a1e1
  • gitDecoration.deletedResourceForeground#ff6c6b
  • gitDecoration.ignoredResourceForeground#5B6268
  • gitDecoration.modifiedResourceForeground#da8548
  • gitDecoration.submoduleResourceForeground#51afef
  • gitDecoration.untrackedResourceForeground#4db5bd
  • keybindingLabel.background#1c1f24
  • keybindingLabel.border#3f444a
  • keybindingLabel.bottomBorder#5B6268
  • keybindingLabel.foreground#bbc2cf
  • list.activeSelectionBackground#202328
  • list.activeSelectionForeground#bbc2cf
  • list.dropBackground#2257A0
  • list.errorForeground#ff6c6b
  • list.focusBackground#202328
  • list.focusForeground#bbc2cf
  • list.highlightForeground#51afef
  • list.hoverBackground#21242b
  • list.hoverForeground#bbc2cf
  • list.inactiveFocusBackground#1c1f24
  • list.inactiveSelectionBackground#1c1f24
  • list.inactiveSelectionForeground#bbc2cf
  • list.invalidItemForeground#ff6c6b
  • list.warningForeground#ECBE7B
  • menu.background#21242b
  • menu.border#202328
  • menu.foreground#bbc2cf
  • menu.selectionBackground#202328
  • menu.selectionBorder#3f444a
  • menu.selectionForeground#bbc2cf
  • menu.separatorBackground#202328
  • merge.border#3f444a
  • merge.commonContentBackground#ECBE7B20
  • merge.commonHeaderBackground#ECBE7B40
  • merge.currentContentBackground#98be6520
  • merge.currentHeaderBackground#98be6540
  • merge.incomingContentBackground#51afef20
  • merge.incomingHeaderBackground#51afef40
  • notificationCenter.border#202328
  • notificationCenterHeader.background#1c1f24
  • notificationCenterHeader.foreground#bbc2cf
  • notificationLink.foreground#51afef
  • notifications.background#21242b
  • notifications.border#202328
  • notifications.foreground#bbc2cf
  • notificationToast.border#202328
  • panel.background#282c34
  • panel.border#202328
  • panel.dropBorder#51afef
  • panelTitle.activeBorder#51afef
  • panelTitle.activeForeground#bbc2cf
  • panelTitle.inactiveForeground#5B6268
  • peekView.background#21242b
  • peekView.border#51afef
  • peekViewEditor.background#282c34
  • peekViewEditor.matchHighlightBackground#2257A0
  • peekViewResult.background#21242b
  • peekViewResult.fileForeground#bbc2cf
  • peekViewResult.lineForeground#5B6268
  • peekViewResult.matchHighlightBackground#2257A0
  • peekViewResult.selectionBackground#202328
  • peekViewResult.selectionForeground#bbc2cf
  • peekViewTitle.background#1c1f24
  • peekViewTitleDescription.foreground#5B6268
  • peekViewTitleLabel.foreground#bbc2cf
  • pickerGroup.border#202328
  • pickerGroup.foreground#51afef
  • quickInput.background#21242b
  • quickInput.foreground#bbc2cf
  • settings.checkboxBackground#21242b
  • settings.checkboxBorder#202328
  • settings.checkboxForeground#bbc2cf
  • settings.dropdownBackground#21242b
  • settings.dropdownBorder#202328
  • settings.dropdownForeground#bbc2cf
  • settings.headerForeground#bbc2cf
  • settings.modifiedItemIndicator#51afef
  • settings.numberInputBackground#21242b
  • settings.numberInputBorder#202328
  • settings.numberInputForeground#bbc2cf
  • settings.textInputBackground#21242b
  • settings.textInputBorder#202328
  • settings.textInputForeground#bbc2cf
  • sideBar.background#21242b
  • sideBar.border#202328
  • sideBar.foreground#bbc2cf
  • sideBarSectionHeader.background#1c1f24
  • sideBarSectionHeader.border#202328
  • sideBarSectionHeader.foreground#bbc2cf
  • sideBarTitle.foreground#bbc2cf
  • statusBar.background#1c1f24
  • statusBar.border#202328
  • statusBar.debuggingBackground#da8548
  • statusBar.debuggingForeground#282c34
  • statusBar.foreground#bbc2cf
  • statusBar.noFolderBackground#c678dd
  • statusBar.noFolderForeground#282c34
  • statusBarItem.activeBackground#202328
  • statusBarItem.hoverBackground#21242b
  • statusBarItem.prominentBackground#51afef
  • statusBarItem.prominentForeground#282c34
  • statusBarItem.prominentHoverBackground#51afefdd
  • terminal.ansiBlack#1B2229
  • terminal.ansiBlue#51afef
  • terminal.ansiBrightBlack#1c1f24
  • terminal.ansiBrightBlue#51afef
  • terminal.ansiBrightCyan#46D9FF
  • terminal.ansiBrightGreen#98be65
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#ff6c6b
  • terminal.ansiBrightWhite#bbc2cf
  • terminal.ansiBrightYellow#ECBE7B
  • terminal.ansiCyan#46D9FF
  • terminal.ansiGreen#98be65
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#ff6c6b
  • terminal.ansiWhite#9ca0a4
  • terminal.ansiYellow#ECBE7B
  • terminal.background#282c34
  • terminal.foreground#bbc2cf
  • terminal.selectionBackground#2257A0
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#bbc2cf
  • titleBar.border#202328
  • titleBar.inactiveBackground#21242b
  • titleBar.inactiveForeground#5B6268
  • tree.indentGuidesStroke#202328
  • walkThrough.embeddedEditorBackground#21242b
  • welcomePage.background#282c34
  • welcomePage.buttonBackground#21242b
  • welcomePage.buttonHoverBackground#1c1f24

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5B6268italic
comment.documentation, comment.block.documentation#6B727Aitalic
invalid.illegal#ff6c6b
invalid.deprecated#ff6c6b
keyword.operator, punctuation.separator.key-value#51afef
keyword, storage.modifier, storage.type.function.arrow#51afef
storage, storage.type#51afef
storage.type.class, storage.type.enum, storage.type.interface, storage.type.namespace, storage.type.type, entity.name.type, entity.other.inherited-class, support.type#ECBE7B
constant.language, support.constant, variable.language#a9a1e1
variable, support.variable, entity.name.variable#dcaeea
entity.name.function, meta.function-call.generic, support.function.general#c678dd
entity.name.method, meta.method-call, meta.method.declaration#46D9FF
entity.name.class, entity.other.inherited-class, support.class#ECBE7B
entity.name.exception#ff6c6b
entity.name.sectionbold
constant.numeric, constant.character, constant#da8548
string#98be65
constant.character.escape#46D9FF
string.regexp#46D9FF
constant.other.symbol#da8548
punctuation#bbc2cf
punctuation.section.embedded, variable.interpolation#51afef
constant.language, constant.other.caps, support.constant#a9a1e1
support.function, support.class, support.variable, meta.property-name#c678dd
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#5B6268
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#51afef
entity.name.tag#ff6c6b
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#da8548italic
constant.character.entity, punctuation.definition.entity#ff6c6b
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#51afef
meta.property-name, support.type.property-name#98be65
meta.property-value, meta.property-value constant.other, support.constant.property-value#da8548
keyword.other.importantbold
markup.changed#da8548
markup.deleted#ff6c6b
markup.italicitalic
markup.error#ff6c6b
markup.inserted#98be65
meta.link#51afef
markup.output, markup.raw#5B6268
markup.prompt#5B6268
markup.heading#ff6c6bbold
markup.boldbold
markup.traceback#ff6c6b
markup.underlineunderline
markup.quote#ECBE7B
markup.list#51afef
markup.bold, markup.italic#98be65
markup.inline.raw#da8548
meta.diff.range, meta.diff.index, meta.separator#5B6268
meta.diff.header.from-file#5B6268
meta.diff.header.to-file#5B6268
source.json meta.structure.dictionary.json support.type.property-name.json#51afef
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c678dd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da8548
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff6c6b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ECBE7B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#51afef
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c678dd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#da8548
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff6c6b
Doom Themes by lroolle - VS Code Theme