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.italic—bold 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