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#121212
  • activityBar.border#1A1A1A
  • activityBar.foreground#b0b3b1
  • activityBar.inactiveForeground#5a5a5a
  • activityBarBadge.background#77A9C1
  • activityBarBadge.foreground#121212
  • badge.background#77A9C1
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#b0b3b1
  • breadcrumb.focusForeground#b0b3b1
  • breadcrumb.foreground#5a5a5a
  • debugExceptionWidget.background#CE3C5B30
  • debugExceptionWidget.border#CE3C5B
  • debugToolBar.background#1A1A1A
  • dropdown.background#1A1A1A
  • dropdown.border#2A2A2A
  • dropdown.foreground#b0b3b1
  • dropdown.listBackground#121212
  • editor.background#121212
  • editor.findMatchBackground#58688D40
  • editor.findMatchHighlightBackground#58688D30
  • editor.foreground#b0b3b1
  • editor.hoverHighlightBackground#1A1A1A60
  • editor.inactiveSelectionBackground#33333380
  • editor.lineHighlightBackground#1A1A1A40
  • editor.rangeHighlightBackground#1A1A1A60
  • editor.selectionBackground#333333
  • editor.wordHighlightBackground#33333340
  • editor.wordHighlightStrongBackground#33333360
  • editorBracketMatch.background#2A2A2A60
  • editorBracketMatch.border#5a5a5a
  • editorCursor.foreground#ffffff
  • editorError.foreground#CE3C5B
  • editorGroup.border#1A1A1A
  • editorGroupHeader.noTabsBackground#121212
  • editorGroupHeader.tabsBackground#121212
  • editorGutter.addedBackground#D48CAB
  • editorGutter.background#131313
  • editorGutter.deletedBackground#CE3C5B
  • editorGutter.modifiedBackground#B9607A
  • editorHint.foreground#58688D
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#2A2A2A
  • editorIndentGuide.activeBackground#5a5a5a
  • editorIndentGuide.background#2A2A2A
  • editorInfo.foreground#77A9C1
  • editorLineNumber.activeForeground#b0b3b1
  • editorLineNumber.foreground#5a5a5a
  • editorOverviewRuler.border#121212
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#2A2A2A
  • editorSuggestWidget.foreground#b0b3b1
  • editorSuggestWidget.highlightForeground#77A9C1
  • editorSuggestWidget.selectedBackground#2A2A2A
  • editorWarning.foreground#B9607A
  • editorWhitespace.foreground#2A2A2A
  • editorWidget.background#1A1A1A
  • editorWidget.border#2A2A2A
  • gitDecoration.addedResourceForeground#D48CAB
  • gitDecoration.conflictingResourceForeground#B0A0B2
  • gitDecoration.deletedResourceForeground#CE3C5B
  • gitDecoration.ignoredResourceForeground#5a5a5a
  • gitDecoration.modifiedResourceForeground#B9607A
  • gitDecoration.renamedResourceForeground#77A9C1
  • gitDecoration.stageDeletedResourceForeground#CE3C5B
  • gitDecoration.stageModifiedResourceForeground#B9607A
  • gitDecoration.untrackedResourceForeground#D48CAB
  • input.background#1A1A1A
  • input.border#2A2A2A
  • input.foreground#b0b3b1
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBackground#77A9C130
  • inputOption.activeBorder#77A9C1
  • inputValidation.errorBackground#CE3C5B30
  • inputValidation.errorBorder#CE3C5B
  • inputValidation.infoBackground#77A9C130
  • inputValidation.infoBorder#77A9C1
  • inputValidation.warningBackground#B9607A30
  • inputValidation.warningBorder#B9607A
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#b0b3b1
  • list.errorForeground#CE3C5B
  • list.focusBackground#2A2A2A
  • list.focusForeground#b0b3b1
  • list.highlightForeground#77A9C1
  • list.hoverBackground#1A1A1A
  • list.hoverForeground#b0b3b1
  • list.inactiveSelectionBackground#1A1A1A
  • list.inactiveSelectionForeground#b0b3b1
  • list.warningForeground#B9607A
  • menu.background#1A1A1A
  • menu.foreground#b0b3b1
  • menu.selectionBackground#2A2A2A
  • menu.selectionForeground#b0b3b1
  • menu.separatorBackground#2A2A2A
  • minimap.background#121212
  • minimap.findMatchHighlight#58688D40
  • minimap.selectionHighlight#333333
  • minimapGutter.addedBackground#D48CAB
  • minimapGutter.deletedBackground#CE3C5B
  • minimapGutter.modifiedBackground#B9607A
  • notificationCenter.border#2A2A2A
  • notificationLink.foreground#77A9C1
  • notifications.background#1A1A1A
  • notifications.foreground#b0b3b1
  • panel.background#121212
  • panel.border#1A1A1A
  • panelTitle.activeBorder#77A9C1
  • panelTitle.activeForeground#b0b3b1
  • panelTitle.inactiveForeground#5a5a5a
  • peekView.border#2A2A2A
  • peekViewEditor.background#1A1A1A
  • peekViewEditor.matchHighlightBackground#58688D40
  • peekViewResult.background#1A1A1A
  • peekViewResult.fileForeground#b0b3b1
  • peekViewResult.lineForeground#5a5a5a
  • peekViewResult.matchHighlightBackground#58688D40
  • peekViewResult.selectionBackground#2A2A2A
  • peekViewResult.selectionForeground#b0b3b1
  • peekViewTitle.background#1A1A1A
  • peekViewTitleDescription.foreground#5a5a5a
  • peekViewTitleLabel.foreground#b0b3b1
  • progressBar.background#77A9C1
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#2A2A2A80
  • scrollbarSlider.background#2A2A2A40
  • scrollbarSlider.hoverBackground#2A2A2A60
  • settings.checkboxBackground#1A1A1A
  • settings.checkboxBorder#2A2A2A
  • settings.dropdownBackground#1A1A1A
  • settings.dropdownBorder#2A2A2A
  • settings.headerForeground#b0b3b1
  • settings.modifiedItemIndicator#B9607A
  • settings.numberInputBackground#1A1A1A
  • settings.numberInputBorder#2A2A2A
  • settings.textInputBackground#1A1A1A
  • settings.textInputBorder#2A2A2A
  • sideBar.background#121212
  • sideBar.border#1A1A1A
  • sideBar.foreground#b0b3b1
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.border#2A2A2A
  • sideBarSectionHeader.foreground#b0b3b1
  • sideBarTitle.foreground#b0b3b1
  • statusBar.background#121212
  • statusBar.border#1A1A1A
  • statusBar.debuggingBackground#CE3C5B
  • statusBar.debuggingForeground#121212
  • statusBar.foreground#b0b3b1
  • statusBar.noFolderBackground#1A1A1A
  • statusBar.noFolderForeground#b0b3b1
  • statusBarItem.activeBackground#2A2A2A
  • statusBarItem.hoverBackground#1A1A1A
  • statusBarItem.prominentBackground#1A1A1A
  • statusBarItem.prominentHoverBackground#2A2A2A
  • symbolIcon.arrayForeground#B9607A
  • symbolIcon.booleanForeground#CE3C5B
  • symbolIcon.classForeground#77A9C1
  • symbolIcon.colorForeground#58688D
  • symbolIcon.constantForeground#B9607A
  • symbolIcon.constructorForeground#b0b3b1
  • symbolIcon.enumeratorForeground#B9607A
  • symbolIcon.enumeratorMemberForeground#B9607A
  • symbolIcon.eventForeground#CE3C5B
  • symbolIcon.fieldForeground#58688D
  • symbolIcon.fileForeground#b0b3b1
  • symbolIcon.folderForeground#b0b3b1
  • symbolIcon.functionForeground#b0b3b1
  • symbolIcon.interfaceForeground#77A9C1
  • symbolIcon.keyForeground#B9607A
  • symbolIcon.keywordForeground#CE3C5B
  • symbolIcon.methodForeground#b0b3b1
  • symbolIcon.moduleForeground#77A9C1
  • symbolIcon.namespaceForeground#77A9C1
  • symbolIcon.nullForeground#5a5a5a
  • symbolIcon.numberForeground#D48CAB
  • symbolIcon.objectForeground#77A9C1
  • symbolIcon.operatorForeground#b0b3b1
  • symbolIcon.packageForeground#B9607A
  • symbolIcon.propertyForeground#58688D
  • symbolIcon.referenceForeground#77A9C1
  • symbolIcon.snippetForeground#CE3C5B
  • symbolIcon.stringForeground#B9607A
  • symbolIcon.structForeground#77A9C1
  • symbolIcon.textForeground#b0b3b1
  • symbolIcon.typeParameterForeground#77A9C1
  • symbolIcon.unitForeground#B9607A
  • symbolIcon.variableForeground#58688D
  • tab.activeBackground#121212
  • tab.activeBorder#77A9C1
  • tab.activeBorderTop#77A9C1
  • tab.activeForeground#b0b3b1
  • tab.border#1A1A1A
  • tab.hoverBackground#1A1A1A
  • tab.hoverBorder#5a5a5a
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#5a5a5a
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#77A9C1
  • terminal.ansiBrightBlack#5a5a5a
  • terminal.ansiBrightBlue#77A9C1
  • terminal.ansiBrightCyan#58688D
  • terminal.ansiBrightGreen#D48CAB
  • terminal.ansiBrightMagenta#B0A0B2
  • terminal.ansiBrightRed#CE3C5B
  • terminal.ansiBrightWhite#b0b3b1
  • terminal.ansiBrightYellow#B9607A
  • terminal.ansiCyan#58688D
  • terminal.ansiGreen#D48CAB
  • terminal.ansiMagenta#B0A0B2
  • terminal.ansiRed#CE3C5B
  • terminal.ansiWhite#b0b3b1
  • terminal.ansiYellow#B9607A
  • terminal.background#121212
  • terminal.foreground#b0b3b1
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#b0b3b1
  • titleBar.border#1A1A1A
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#5a5a5a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a5a
keyword, keyword.control#CE3C5B
keyword.operator#b0b3b1
keyword.other.special-method#77A9C1
keyword.other.unit#B9607A
storage, storage.type, storage.modifier#CE3C5B
constant#B9607A
constant.character.escape#58688D
constant.numeric#D48CAB
constant.other.color#58688D
constant.other.symbol#77A9C1
variable#58688D
variable.interpolation#B92749
variable.parameter.function#b0b3b1
invalid.illegal#1D212E
string#B9607A
string.regexp#58688D
string.regexp.source.ruby.embedded#B9607A
string.other.link#CE3C5B
punctuation.definition.comment#5a5a5a
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#b0b3b1
punctuation.definition.heading, punctuation.definition.identity#77A9C1
punctuation.definition.bold#77A9C1bold
punctuation.definition.italic#B0A0B2italic
punctuation.section.embedded#B92749
support.class#77A9C1
support.function#58688D
support.function.any-method#77A9C1
entity.name.function#b0b3b1
entity.name.type, entity.name.type.class#77A9C1underline
entity.name.class#77A9C1
entity.other.inherited-class#D48CAB
entity.name.section#77A9C1
entity.name.tag#CE3C5Bunderline
entity.other.attribute-name#B9607A
entity.other.attribute-name.id#77A9C1
meta.class#77A9C1
meta.link#B9607A
meta.require#77A9C1
meta.selector#B0A0B2
meta.separator#b0b3b1
none#b0b3b1
markup.bold#B9607Abold
markup.changed#B0A0B2
markup.deleted#CE3C5B
markup.italic#B0A0B2italic
markup.heading punctuation.definition.heading#77A9C1
markup.heading, entity.name.section.markdown#77A9C1bold
markup.inserted#D48CAB
markup.list#CE3C5B
markup.quote#B9607A
markup.raw.inline#D48CAB
markup.heading.markdown, entity.name.section.markdown#D48CAB
source.gfm markup.heading#D48CAB
markup.heading.markdown, entity.name.section.markdown#D48CAB
markup.bold.markdown#B9607Abold
markup.italic.markdown#B0A0B2italic
markup.strikethrough.markdown#5a5a5astrikethrough
string.other.link.title.markdown, string.other.link.description.markdown#77A9C1
markup.underline.link.markdown, markup.underline.link.image.markdown#58688D
markup.fenced_code.block.markdown, markup.raw.block.markdown#B9607A
markup.quote.markdown#5a5a5aitalic
punctuation.definition.list.begin.markdown#CE3C5B
support.type.property-name.json#77A9C1
constant.language.json#CE3C5B
entity.name.tag.yaml#77A9C1
support.type.property-name.css#77A9C1
support.constant.property-value.css#B9607A
entity.name.tag.css#CE3C5Bunderline
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#B9607A
entity.name.tag.html#CE3C5Bunderline
entity.other.attribute-name.html#B9607A
entity.other.attribute-name.id.html#77A9C1
entity.name.type.class.js, entity.name.type.class.ts, entity.name.type.tsx#77A9C1
entity.name.function.js, entity.name.function.ts#b0b3b1
meta.decorator, punctuation.decorator#B0A0B2
entity.name.function.decorator.python#B0A0B2
constant.other.symbol.ruby#58688D
support.function.package.go#77A9C1
meta.diff, meta.diff.header#5a5a5a
markup.deleted#CE3C5B
markup.inserted#D48CAB
markup.changed#B9607A
variable.css#58688D
support.constant.color.css#58688D
entity.name.type.rust#77A9C1
support.macro.rust#77A9C1
entity.name.type.swift, support.type.swift#77A9C1
keyword.control.import, keyword.control.export#CE3C5B
string.regexp#58688D