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#000000
  • activityBar.border#ffffff11
  • activityBar.foreground#7d888d
  • activityBarBadge.background#7d888d
  • activityBarBadge.foreground#ffffff
  • badge.background#7d888d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e2e4e5
  • breadcrumb.focusForeground#e2e4e5
  • breadcrumb.foreground#d5d9da
  • breadcrumbPicker.background#000000
  • button.background#7e57c2cc
  • button.foreground#ffffffcc
  • button.hoverBackground#7e57c2
  • contrastActiveBorder#121212
  • contrastBorder#121212
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#7d888d
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#f78c6c23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • dropdown.background#000000
  • dropdown.border#7d888d
  • dropdown.foreground#ffffffcc
  • editor.background#000000
  • editor.findMatchBackground#7d888d50
  • editor.findMatchHighlightBackground#121212
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#7e57c25a
  • editor.inactiveSelectionBackground#7e57c25a
  • editor.lineHighlightBackground#ffffff08
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#1f1f1f
  • editor.selectionHighlightBackground#7d888d50
  • editor.wordHighlightBackground#121212
  • editor.wordHighlightStrongBackground#121212
  • editorBracketMatch.background#7d888d4d
  • editorCodeLens.foreground#7d888d94
  • editorCursor.foreground#d5d9da
  • editorError.foreground#ef5350
  • editorGroup.border#000000
  • editorGroup.dropBackground#7e57c273
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#ffffff11
  • editorGutter.addedBackground#addb67
  • editorGutter.background#000000
  • editorGutter.deletedBackground#ef5350
  • editorGutter.modifiedBackground#ecc48d
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#7d888d
  • editorIndentGuide.activeBackground#7d888d
  • editorIndentGuide.background#7d888d52
  • editorLineNumber.activeForeground#d5d9da
  • editorLineNumber.foreground#5e686c
  • editorMarkerNavigation.background#121212
  • editorMarkerNavigationError.background#ef5350
  • editorMarkerNavigationWarning.background#ffca28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#7d888d52
  • editorSuggestWidget.background#100f0f
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#ff38b3c6
  • editorWarning.foreground#b39554
  • editorWidget.background#121212
  • editorWidget.border#000000
  • errorForeground#ef5350
  • extensionButton.prominentBackground#7e57c2cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#7e57c2
  • focusBorder#121212
  • foreground#d6deeb
  • gitDecoration.conflictingResourceForeground#ffeb95cc
  • gitDecoration.deletedResourceForeground#ef535090
  • gitDecoration.ignoredResourceForeground#d5d9da40
  • gitDecoration.modifiedResourceForeground#d5d9da
  • gitDecoration.untrackedResourceForeground#addb67
  • input.background#000000
  • input.border#7d888d
  • input.foreground#ffffffcc
  • input.placeholderForeground#7d888d
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#ab0300f2
  • inputValidation.errorBorder#ef5350
  • inputValidation.infoBackground#00589ef2
  • inputValidation.infoBorder#64b5f6
  • inputValidation.warningBackground#675700f2
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#7d888d60
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#000000
  • list.focusBackground#ffffff11
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#121212
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#7d888d
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#7d888d
  • merge.incomingHeaderBackground#7e57c25a
  • notificationLink.foreground#80cbc4
  • notifications.background#000000
  • notifications.foreground#ffffffcc
  • panel.background#000000
  • panel.border#ffffff33
  • panelTitle.activeBorder#7d888d
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#7d888d
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#7d888d
  • peekViewResult.lineForeground#7d888d
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#242424
  • peekViewResult.selectionForeground#7d888d
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#737e83
  • peekViewTitleLabel.foreground#7d888d
  • pickerGroup.border#000000
  • pickerGroup.foreground#d1aaff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#24242480
  • scrollbarSlider.background#24242480
  • scrollbarSlider.hoverBackground#24242480
  • selection.background#7d888d55
  • sideBar.background#000000
  • sideBar.border#ffffff11
  • sideBar.foreground#7d888d
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#7d888d
  • sideBarTitle.foreground#7d888d
  • statusBar.background#000000
  • statusBar.border#ffffff06
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#ffffff06
  • statusBar.foreground#5e686c
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#ffffff06
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • statusBarItem.prominentBackground#000000
  • statusBarItem.prominentHoverBackground#000000
  • tab.activeBackground#121212
  • tab.activeBorder#ffffff06
  • tab.activeForeground#d6deeb
  • tab.border#ffffff11
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#7d888d
  • tab.unfocusedActiveBorder#ffffff11
  • tab.unfocusedActiveForeground#7d888d
  • tab.unfocusedInactiveForeground#7d888d
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ef5350
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ecc48d
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#eeefff
  • titleBar.border#ffffff06
  • titleBar.inactiveBackground#000000
  • walkThrough.embeddedEditorBackground#000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#848BBDitalic
string.quoted, string.template, punctuation.definition.string#FF8B39
string.template meta.embedded.line#B6B1B1
variable, entity.name.variable#FF7EDB
variable.language#D64A53bold
variable.parameteritalic
storage.type, storage.modifier#FEDE5D
constant#F97E72
string.regexp#F97E72
constant.numeric#F97E72
constant.language#F97E72
constant.character.escape#36F9F6
entity.name#D64A53
entity.name.tag#FF7EDB
punctuation.definition.tag#36F9F6
entity.other.attribute-name#FFD940
entity.other.attribute-name.html#FFE375italic
entity.name.type, meta.attribute.class.html#D64A53
entity.other.inherited-class#DD5500
entity.name.function, variable.function#36F9F6
keyword.control.export.js, keyword.control.import.js#72F1B8
constant.numeric.decimal.js#2EE2FA
keyword#FEDE5D
keyword.control#FEDE5D
keyword.operator#FEDE5D
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FEDE5D
keyword.other.unit#F97E72
support#D64A53
support.function#36F9F6
support.variable#7ED0FF
meta.object-literal.key, support.type.property-name#7ED0FF
punctuation.separator.key-value#B6B1B1
punctuation.section.embedded#FEDE5D
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#72F1B8
support.type.property-name.css, support.type.property-name.json#72F1B8
switch-block.expr.js#72F1B8
variable.other.constant.property.js, variable.other.property.js#2EE2FA
constant.other.color#F97E72
support.constant.font-name#F97E72
entity.other.attribute-name.id#36F9F6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#DD5500
support.function.misc.css#D64A53
markup.heading, entity.name.section#7ED0FF
text.html, keyword.operator.assignment#FFFFFFEE
markup.quote#B6B1B1CCitalic
beginning.punctuation.definition.list#7ED0FF
markup.underline.link#DD5500
string.other.link.description#F97E72
meta.function-call.generic.python#36F9F6
variable.parameter.function-call.python#72F1B8
storage.type.cs#D64A53
entity.name.variable.local.cs#7ED0FF
entity.name.variable.field.cs, entity.name.variable.property.cs#7ED0FF
constant.other.placeholder.c#72F1B8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72F1B8
storage.modifier.c#D64A53
source.cpp keyword.operator#FEDE5D
constant.other.placeholder.cpp#72F1B8italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#72F1B8
storage.modifier.specifier.const.cpp#D64A53
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#36F9F6
source.elixir entity.name.function#72F1B8
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#36F9F6
source.elixir punctuation.definition.string#72F1B8
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#72F1B8
source.elixir .punctuation.binary.elixir#7ED0FFitalic
entity.global.clojure#36F9F6bold
storage.control.clojure#36F9F6italic
meta.metadata.simple.clojure, meta.metadata.map.clojure#D64A53italic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#7ED0FF
source.go#7ED0FF
source.go meta.function-call.go#36F9F6
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#FEDE5D
source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go#72F1B8
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable#2EE2FA
markup.underline.link.markdown, markup.inline.raw.string.markdown#72F1B8italic
string.other.link.title.markdown#FEDE5D
markup.heading.markdown, entity.name.section.markdown#7ED0FFbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72F1B8
source.dart, source.python, source.scala#7ED0FF
string.interpolated.single.dart#F97E72
variable.parameter.dart#72F1B8
constant.numeric.dart#2EE2FA
variable.parameter.scala#2EE2FA
meta.template.expression.scala#72F1B8
comment, variable.language, variable.parameter, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.this
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
entity.other.attribute-name.html
support#FF2B59
support.type.property-name.css#2BE2DC
entity.name, entity.name.type, storage.modifier.specifier.const.cpp#FE4450
meta.object-literal.key#FF7EDB
variable.other.object#FF77C0
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Best Themes Redefined 🚀 by Lakshit Somani - VS Code Theme