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
Compact VS Code by Arka Banerjee - VS Code Theme