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.activeBackground#00000000
  • activityBar.background#08080d
  • activityBar.border#4646e7
  • activityBar.foreground#4646e7
  • activityBar.inactiveForeground#4646e7
  • activityBarBadge.background#2a82bc
  • activityBarBadge.foreground#ffffff
  • badge.background#4646e7
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#101019
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#4646e7
  • button.foreground#ffffff
  • button.hoverBackground#5959ff
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#30305a
  • checkbox.border#ff000000
  • checkbox.foreground#ffffff
  • debugExceptionWidget.background#171726
  • debugExceptionWidget.border#4646e7
  • debugToolBar.background#171726
  • debugToolBar.border#4646e7
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#5557b933
  • diffEditor.insertedTextBorder#26214500
  • diffEditor.removedTextBackground#5557b933
  • diffEditor.removedTextBorder#ff000000
  • dropdown.background#30305a
  • dropdown.border#ff000000
  • dropdown.foreground#ffffff
  • editor.background#101019
  • editor.findMatchBackground#343475
  • editor.findMatchBorder#4646e7
  • editor.findMatchHighlightBackground#2c2c719d
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#42464b66
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#e0e0e0
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3232a764
  • editor.lineHighlightBackground#ffffff00
  • editor.lineHighlightBorder#28282800
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#4646e764
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#4646e7
  • editor.wordHighlightBackground#2f2847b8
  • editor.wordHighlightBorder#fffb0000
  • editor.wordHighlightStrongBackground#0c2675b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#4646e7
  • editorCodeLens.foreground#999999
  • editorCursor.background#ffffff
  • editorCursor.foreground#4646e7
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#ff1c1c
  • editorGroup.border#4646e7
  • editorGroup.emptyBackground#101019
  • editorGroupHeader.tabsBackground#08080d
  • editorGutter.addedBackground#89c40a
  • editorGutter.background#101019
  • editorGutter.commentRangeForeground#d9d9d9
  • editorGutter.deletedBackground#ff0612
  • editorGutter.foldingControlForeground#d9d9d9
  • editorGutter.modifiedBackground#06a4d1
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#615b7a
  • editorIndentGuide.background#625c7b
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#c7c7c7
  • editorLineNumber.foreground#777777
  • editorLink.activeForeground#0cff27
  • editorMarkerNavigation.background#08080d
  • editorMarkerNavigationError.background#ff2b00
  • editorMarkerNavigationInfo.background#0087ff
  • editorMarkerNavigationWarning.background#ffd100
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#4646e7
  • editorSuggestWidget.background#171726
  • editorSuggestWidget.border#4646e7
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#4646e7
  • editorSuggestWidget.selectedBackground#1a1a51
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#eec300
  • editorWhitespace.foreground#8a96b88d
  • editorWidget.background#171726
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#4646e7
  • focusBorder#4646e7
  • foreground#4646e7
  • gitDecoration.addedResourceForeground#00ff2e
  • gitDecoration.conflictingResourceForeground#4444ff
  • gitDecoration.deletedResourceForeground#ff2600
  • gitDecoration.ignoredResourceForeground#cdcdcd
  • gitDecoration.modifiedResourceForeground#ffd429
  • gitDecoration.stageDeletedResourceForeground#ff2600
  • gitDecoration.stageModifiedResourceForeground#ffd429
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00ff2e
  • icon.foreground#4646e7
  • input.background#30305a
  • input.border#ff000000
  • input.foreground#ffffff
  • input.placeholderForeground#c4c4c4
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#0099ff00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#10104f
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#141428
  • list.focusBackground#18183d
  • list.focusForeground#f2f2f2
  • list.highlightForeground#4646e7
  • list.hoverBackground#0b0b34
  • list.hoverForeground#f2f2f2
  • list.inactiveSelectionBackground#0b0b34
  • list.inactiveSelectionForeground#f2f2f2
  • listFilterWidget.background#171726
  • listFilterWidget.noMatchesOutline#4646e7
  • listFilterWidget.outline#4646e7
  • menu.background#171726
  • menu.border#00000000
  • menu.foreground#f2f2f2
  • menu.selectionBackground#12124b
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#4646e7
  • menubar.selectionBackground#171726
  • menubar.selectionBorder#ff000000
  • menubar.selectionForeground#f2f2f2
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#101019
  • minimap.errorHighlight#ff1c1c
  • minimap.findMatchHighlight#343475
  • minimap.selectionHighlight#4646e764
  • minimap.warningHighlight#eec300
  • minimapGutter.addedBackground#89c40a
  • minimapGutter.deletedBackground#ff0612
  • minimapGutter.modifiedBackground#06a4d1
  • notificationCenter.border#4646e7
  • notificationCenterHeader.background#171726
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#171726
  • notifications.border#4646e7
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#ff1616
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#ffd100
  • notificationToast.border#4646e7
  • panel.background#08080d
  • panel.border#4646e7
  • panelSection.border#4646e7
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#4646e7
  • peekView.border#4646e7
  • peekViewEditor.background#0e1634
  • peekViewEditor.matchHighlightBackground#272766
  • peekViewEditor.matchHighlightBorder#4646e7
  • peekViewEditorGutter.background#0e1634
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#1d00ea4d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#4646e7
  • pickerGroup.foreground#4646e7
  • progressBar.background#4646e7
  • scrollbar.shadow#111111
  • scrollbarSlider.activeBackground#2920A1
  • scrollbarSlider.background#1d176d66
  • scrollbarSlider.hoverBackground#231b8a66
  • selection.background#4646e7
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#4646e7
  • sideBar.background#101019
  • sideBar.border#4646e7
  • sideBar.dropBackground#141428
  • sideBar.foreground#f2f2f2
  • sideBarSectionHeader.background#101019
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#f2f2f2
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#08080d
  • statusBar.border#161622
  • statusBar.debuggingBackground#161622
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#08080d
  • statusBar.noFolderBorder#ff060600
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#130c38
  • statusBarItem.remoteBackground#4646e7
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#101019
  • tab.activeBorder#4646e7
  • tab.activeForeground#ffffff
  • tab.border#08080D
  • tab.hoverBackground#130c38
  • tab.hoverBorder#ffffff00
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#08080d
  • tab.inactiveForeground#ffffff
  • terminal.ansiBlack#454545
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#4646e7
  • terminal.foreground#cccccc
  • terminal.selectionBackground#4646e72c
  • terminalCursor.background#4646e7
  • terminalCursor.foreground#ffffff
  • textLink.foreground#4646e7
  • titleBar.activeBackground#08080d
  • titleBar.activeForeground#f2f2f2
  • titleBar.border#ff050500
  • titleBar.inactiveBackground#08080d
  • titleBar.inactiveForeground#f2f2f2
  • tree.indentGuidesStroke#4646e7
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

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#5b6299italic
string.quoted, string.template, punctuation.definition.string#8dff30
string.template meta.embedded.line#b6b1b1
variable, entity.name.variable#46a6ff
variable.language#ff2626bold
variable.parameteritalic
storage.type, storage.modifier#c689ff
constant#ff70cf
string.regexp#ff70cf
constant.numeric#ff70cf
constant.language#ff70cf
constant.character.escape#36f9f6
entity.name#ff2626
entity.name.tag#46a6ff
punctuation.definition.tag#46a6ff
entity.other.attribute-name#fede5d
entity.other.attribute-name.html#fede5ditalic
entity.name.type, meta.attribute.class.html#ff2626
entity.other.inherited-class#D50
entity.name.function, variable.function#fff
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#ff70cf
support#ff70cf
support.function#36f9f6
support.variable#46a6ff
meta.object-literal.key, support.type.property-name#46a6ff
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#48bcff
switch-block.expr.js#72f1b8
variable.other.constant.property.js, variable.other.property.js#2ee2fa
constant.other.color#ff70cf
support.constant.font-name#ff70cf
entity.other.attribute-name.id#fede5d
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#fede5d
support.function.misc.css#ff70cf
markup.heading, entity.name.section#46a6ff
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#46a6ff
markup.underline.link#D50
string.other.link.description#ff70cf
meta.function-call.generic.python#36f9f6
variable.parameter.function-call.python#72f1b8
storage.type.cs#ff2626
entity.name.variable.local.cs#46a6ff
entity.name.variable.field.cs, entity.name.variable.property.cs#46a6ff
constant.other.placeholder.c#72f1b8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72f1b8
storage.modifier.c#ff2626
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#ff2626
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#46a6ffitalic
entity.global.clojure#36f9f6bold
storage.control.clojure#36f9f6italic
meta.metadata.simple.clojure, meta.metadata.map.clojure#ff2626italic
meta.quoted-expression.clojureitalic
meta.symbol.clojure#46a6ff
source.go#46a6ff
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#46a6ffbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72f1b8
source.dart, source.python, source.scala#46a6ff
string.interpolated.single.dart#ff70cf
variable.parameter.dart#72f1b8
constant.numeric.dart#2EE2FA
variable.parameter.scala#2EE2FA
meta.template.expression.scala#72f1b8