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.activeBorder#F472B6
  • activityBar.activeFocusBorder#F472B6
  • activityBar.background#0F172A
  • activityBar.border#0F172A
  • activityBar.foreground#E5E7EB
  • activityBarBadge.background#F472B6
  • activityBarBadge.foreground#0F172A
  • badge.background#F472B6
  • badge.foreground#0F172A
  • button.background#F472B6
  • button.foreground#0F172A
  • button.hoverBackground#F06292
  • debugExceptionWidget.background#1F2937
  • debugExceptionWidget.border#1E293B
  • debugToolBar.background#1F2937
  • diffEditor.insertedTextBackground#A3E63526
  • diffEditor.removedTextBackground#EF444426
  • dropdown.background#1F2937
  • dropdown.border#374151
  • dropdown.foreground#E5E7EB
  • editor.background#0F172A
  • editor.findMatchBackground#F472B60D
  • editor.findMatchBorder#F472B6
  • editor.findMatchHighlightBackground#F472B60D
  • editor.findMatchHighlightBorder#F472B659
  • editor.findRangeHighlightBackground#4B5563
  • editor.findRangeHighlightBorder#0F172A00
  • editor.foreground#D1D5DB
  • editor.inactiveSelectionBackground#4B5563
  • editor.rangeHighlightBackground#1E293B
  • editor.selectionBackground#374151
  • editor.selectionHighlightBackground#4B5563
  • editor.selectionHighlightBorder#6B7280
  • editor.wordHighlightBackground#4B5563
  • editor.wordHighlightStrongBackground#F472B633
  • editorBracketMatch.background#6B72804D
  • editorBracketMatch.border#6B728099
  • editorCodeLens.foreground#6B7280
  • editorCursor.foreground#F472B6
  • editorError.foreground#EF4444
  • editorGroup.border#1E293B
  • editorGroup.emptyBackground#1F2937
  • editorGroupHeader.noTabsBackground#0F172A
  • editorGroupHeader.tabsBackground#0F172A
  • editorGroupHeader.tabsBorder#1F2937
  • editorGutter.addedBackground#A3E63599
  • editorGutter.deletedBackground#EF444499
  • editorGutter.modifiedBackground#3B82F699
  • editorHoverWidget.background#1F2937
  • editorHoverWidget.border#0F172A
  • editorHoverWidget.foreground#D1D5DB
  • editorIndentGuide.activeBackground1#6B7280B3
  • editorIndentGuide.background1#6B72804D
  • editorLineHighlightBackground#1E293B
  • editorLineNumber.activeForeground#6B7280CC
  • editorLineNumber.foreground#6B728066
  • editorLink.activeForeground#A7F3D0
  • editorMarkerNavigation.background#1F2937
  • editorOverviewRuler.addedForeground#A3E63599
  • editorOverviewRuler.border#1F2937
  • editorOverviewRuler.deletedForeground#EF444499
  • editorOverviewRuler.errorForeground#EF4444
  • editorOverviewRuler.modifiedForeground#3B82F699
  • editorOverviewRuler.warningForeground#F59E0B
  • editorRuler.foreground#6B72804D
  • editorSuggestWidget.background#1F2937
  • editorSuggestWidget.border#0F172A
  • editorSuggestWidget.foreground#D1D5DB
  • editorSuggestWidget.highlightForeground#F472B6
  • editorSuggestWidget.selectedBackground#1E293B
  • editorWarning.foreground#F59E0B
  • editorWhitespace.foreground#6B728066
  • editorWidget.background#1F2937
  • editorWidget.foreground#D1D5DB
  • extensionButton.prominentBackground#F472B6
  • extensionButton.prominentForeground#0F172A
  • extensionButton.prominentHoverBackground#F06292
  • focusBorder#F472B6
  • foreground#E5E7EB
  • gitDecoration.conflictingResourceForeground#F472B6
  • gitDecoration.deletedResourceForeground#EF4444B3
  • gitDecoration.ignoredResourceForeground#6B7280
  • gitDecoration.modifiedResourceForeground#A3E635
  • gitDecoration.submoduleResourceForeground#8B5CF6B3
  • gitDecoration.untrackedResourceForeground#F472B6
  • input.background#1F2937
  • input.border#374151
  • input.foreground#D1D5DB
  • input.placeholderForeground#6B7280
  • inputOption.activeBorder#F472B6
  • inputValidation.errorBackground#1E293B
  • inputValidation.errorBorder#EF4444
  • inputValidation.infoBackground#1E293B
  • inputValidation.infoBorder#3B82F6
  • inputValidation.warningBackground#1E293B
  • inputValidation.warningBorder#F59E0B
  • list.activeSelectionBackground#1E293B
  • list.activeSelectionForeground#F472B6
  • list.focusBackground#1E293B
  • list.focusForeground#F472B6
  • list.highlightForeground#F472B6
  • list.hoverBackground#37415166
  • list.hoverForeground#F472B6
  • list.inactiveSelectionBackground#37415166
  • list.inactiveSelectionForeground#F472B6
  • list.invalidItemForeground#6B7280
  • panel.background#1E293B
  • panel.border#0F172A
  • panelTitle.activeBorder#F472B6
  • panelTitle.activeForeground#E5E7EB
  • panelTitle.inactiveForeground#6B7280
  • peekView.border#1E293B
  • peekViewEditor.background#1F2937
  • peekViewEditor.matchHighlightBackground#F472B633
  • peekViewResult.background#1F2937
  • peekViewResult.fileForeground#6B7280
  • peekViewResult.matchHighlightBackground#F472B633
  • peekViewTitle.background#1F2937
  • peekViewTitleDescription.foreground#6B7280
  • peekViewTitleLabel.foreground#6B7280
  • pickerGroup.border#1E293B
  • pickerGroup.foreground#6B7280
  • progressBar.background#F472B6
  • quickInput.list.focusBackground#1E293B
  • scrollbar.shadow#1E293B
  • scrollbarSlider.activeBackground#6B7280B3
  • scrollbarSlider.background#6B728066
  • scrollbarSlider.hoverBackground#6B728099
  • selection.background#DB277730
  • settings.headerForeground#E5E7EB
  • settings.modifiedItemIndicator#3B82F6
  • sideBar.background#1E293B
  • sideBar.border#1E293B
  • sideBar.foreground#E5E7EB
  • sideBarSectionHeader.background#1E293B
  • sideBarSectionHeader.foreground#E5E7EB
  • sideBarTitle.foreground#E5E7EB
  • statusBar.background#0F172A
  • statusBar.border#1E293B
  • statusBar.debuggingBackground#F472B6
  • statusBar.debuggingForeground#0F172A
  • statusBar.foreground#6B7280
  • statusBar.noFolderBackground#1F2937
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#1E293B
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#F472B6
  • tab.activeBackground#1F2937
  • tab.activeBorderTop#F472B6
  • tab.activeForeground#E5E7EB
  • tab.border#1F293700
  • tab.hoverBackground#37415166
  • tab.inactiveBackground#0F172A
  • tab.inactiveForeground#6B7280
  • tab.unfocusedActiveBorderTop#6B7280
  • tab.unfocusedActiveForeground#6B7280
  • tab.unfocusedInactiveForeground#6B7280
  • terminal.ansiBlack#0F172A
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlack#6B7280
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#6EE7B7
  • terminal.ansiBrightGreen#A7F3D0
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#F472B6
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FCD34D
  • terminal.ansiCyan#14B8A6
  • terminal.ansiGreen#A3E635
  • terminal.ansiMagenta#8B5CF6
  • terminal.ansiRed#EF4444
  • terminal.ansiWhite#E5E7EB
  • terminal.ansiYellow#F59E0B
  • terminal.background#0F172A
  • terminal.foreground#D1D5DB
  • terminalCursor.foreground#F472B6
  • textBlockQuote.background#1F2937
  • textLink.activeForeground#6EE7B7
  • textLink.foreground#A7F3D0
  • textPreformat.foreground#D1D5DB
  • titleBar.activeBackground#0F172A
  • titleBar.activeForeground#E5E7EB
  • titleBar.border#1E293B
  • titleBar.inactiveBackground#0F172A
  • titleBar.inactiveForeground#6B7280
  • walkThrough.embeddedEditorBackground#1F2937
  • widget.shadow#1E293B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6B7280italic
string, constant.other.symbol#A7F3D0
string.regexp, constant.character, constant.other#14B8A6
constant.numeric#60A5FA
constant.numeric.css#F472B6
constant.language#F59E0B
constant.language.boolean#D8B4FE
variable#D1D5DB
variable.other.constant#D8B4FE
variable.member#F472B6
variable.language#FCD34Ditalic
variable.language.this#F472B6italic
support.variable#FCD34D
storage#FCD34D
storage.type#FCD34Ditalic
storage.modifier.async#F472B6italic
storage.type.class#F472B6italic
keyword#FCD34D
keyword.control.flow#F472B6
keyword.control.loop#F472B6
keyword.control.conditional#F472B6
keyword.control.trycatch#F472B6
keyword.operator#F472B6
keyword.operator.new#F472B6
punctuation.separator, punctuation.terminator#E5E7EBb3
punctuation.section#D1D5DB
punctuation.accessor#F59E0B
source.java storage.type, source.haskell storage.type, source.c storage.type#14B8A6
entity.other.inherited-class#F59E0B
storage.type.function#FCD34D
storage.type.function.arrow#F472B6
source.java storage.type.primitive#14B8A6
variable.parameter, meta.parameter#D8B4FEitalic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#FCD34D
support.function, support.macro#FCD34D
support.function.console#FCD34D
entity.name.import, entity.name.package#A7F3D0
entity.name#F472B6
entity.name.function#FCD34D
entity.name.class#F59E0B
entity.name.tag, meta.tag.sgml#F472B6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#E5E7EB
text.html.derivative#D1D5DB
entity.other.attribute-name#FCD34Ditalic
support.constant#F472B6italic
support.type, support.class, source.go storage.type#F472B6
support.class.promise#FCD34D
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#D1D5DB
invalid#EF4444
meta.diff, meta.diff.header#8B5CF6
source.ruby variable.other.readwrite#FCD34D
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#14B8A6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#6B7280
support.type.property-name#A7F3D0
entity.other.attribute-name.class.css#A7F3D0
entity.other.attribute-name.id.css#FCD34D
support.type.property-name.css#D1D5DB
constant.numeric.line-number.find-in-files - match#6B7280
constant.numeric.line-number.match#FCD34D
entity.name.filename.find-in-files#A7F3D0
message.error#EF4444
markup.heading, markup.heading entity.name#A7F3D0bold
markup.underline.link, string.other.link#14B8A6
markup.italic#F472B6italic
markup.bold#F472B6bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#6B7280bold
markup.quote#14B8A6italic
markup.list punctuation.definition.list.begin#FCD34D
markup.inserted#A3E635
markup.changed#3B82F6
markup.deleted#EF4444
markup.strike#FCD34D
markup.table#14B8A6
text.html.markdown markup.inline.raw#F59E0B
text.html.markdown meta.dummy.line-break#6B7280
punctuation.definition.markdown#6B7280
string.json support.type.property-name.json#F59E0B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FCD34D
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#F472B6
constant.language.json#D8B4FE
constant.numeric.json#F472B6
string.unquoted, constant.other.object.key#FCD34D
meta.brace.curly, meta.brace.round, meta.brace.square#E5E7EB
punctuation.quasi.element.begin, punctuation.quasi.element.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FCD34D
meta.object-literal.key#FCD34D
entity.name.type#F59E0B
entity.name.type.class#F472B6
support.type.primitive#F59E0B
text.gitignore#FCD34Ditalic