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#070825
  • activityBar.foreground#46BDFF
  • activityBarBadge.background#FF16B0
  • activityBarBadge.foreground#fcfcfc
  • badge.background#FF16B0
  • badge.foreground#fcfcfc
  • breadcrumbPicker.background#232530
  • button.background#46BDFF
  • button.foreground#000000
  • button.hoverBackground#00a6ff
  • button.separator#FF16B0
  • debugToolBar.background#1C1E26
  • diffEditor.border#FF16B080
  • diffEditor.insertedLineBackground#B3F36110
  • diffEditor.insertedTextBackground#00809B33
  • diffEditor.removedTextBackground#FF16B033
  • dropdown.background#070825
  • dropdown.border#181A1F
  • editor.background#0d0f31
  • editor.foreground#f1f1f1
  • editorBracketMatch.background#FF16B033
  • editorBracketMatch.border#FF16B0
  • editorCursor.foreground#fcee54
  • editorError.foreground#FF16B0
  • editorGroup.border#3D1658
  • editorGroupHeader.tabsBackground#070825
  • editorHoverWidget.background#1b1c27
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground1#46BDFF
  • editorIndentGuide.background1#2c394c8f
  • editorLineNumber.foreground#3B4D66
  • editorOverviewRuler.border#181A1F
  • editorRuler.foreground#3B4D66
  • editorSuggestWidget.background#242533
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWarning.foreground#FF9800
  • editorWidget.background#070825
  • editorWidget.border#181A1F
  • errorForeground#FF16B0
  • extensionButton.prominentBackground#FF16B0
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#46BDFF
  • gitDecoration.addedResourceForeground#46BDFF
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#070825
  • input.border#181A1F
  • input.foreground#f1f1f1
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#FF16B0
  • progressBar.background#46BDFF
  • scrollbar.shadow#070930
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#0d0f31
  • sideBar.foreground#b5becf
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#D7DAE0
  • statusBar.background#070825
  • statusBar.debuggingBackground#FF16B0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#070825
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#111561
  • tab.activeBorderTop#FF16B0
  • tab.border#161960
  • tab.hoverBackground#12124A
  • tab.hoverBorder#C21885
  • tab.inactiveBackground#070825
  • tab.inactiveForeground#b4bac4
  • terminal.ansiBlue#03edf9
  • terminal.ansiBrightBlue#03edf9
  • terminal.ansiBrightCyan#03edf9
  • terminal.ansiBrightGreen#72f1b8
  • terminal.ansiBrightMagenta#ff7edb
  • terminal.ansiBrightRed#fe4450
  • terminal.ansiBrightYellow#fede5d
  • terminal.ansiCyan#03edf9
  • terminal.ansiGreen#72f1b8
  • terminal.ansiMagenta#FF16B0
  • terminal.ansiRed#fe4450
  • terminal.ansiYellow#f3e70f
  • terminal.border#FF16B0
  • terminal.foreground#f7f2f2
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#03edf9
  • terminalCursor.foreground#FF16B0
  • titleBar.activeBackground#070825
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#070930
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#070930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#696d74italic
string.quoted, string.template, punctuation.definition.string#DF81FC
string.template meta.embedded.line#fcfcfc
variable, entity.name.variable#96A1FF
variable.language, variable.other.object.js#46BDFF
variable.parameter#96A1FF
storage.type, storage.modifier#FF16B0
constant#96A1FF
string.regexp#96A1FF
meta.jsx.children.js, meta.property-value.css, text.html.derivative#fcfcfc
constant.numeric#FF16B0
constant.language#96A1FF
constant.character.escape#FFFFFF
entity.name#46BDFF
entity.name.tag#98e73d
punctuation.definition.tag#dfdfdf
entity.other.attribute-name#46BDFF
entity.name.type#46BDFF
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#fcfcfc
keyword#FF16B0
keyword.control#FF16B0
keyword.operator#FF16B0
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF16B0
keyword.other.unit#96A1FF
support#98e73d
support.function#fcfcfc
support.variable#96A1FF
meta.object-literal.key, support.type.property-name#46BDFF
variable.other.property.js#FF16B0
punctuation.separator.key-value#FF16B0
punctuation.section.embedded#FF16B0
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF16B0
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#FF16B0
support.constant.font-name#96A1FF
entity.other.attribute-name.id#FF16B0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FF16B0
markup.heading, entity.name.section#96A1FF
markup.quote#FF407B
beginning.punctuation.definition.list#96A1FF
markup.underline.link#F2F2F2
string.other.link.description#96A1FF
meta.function-call.generic.python#fcfcfc
storage.type.cs#FF16B0
entity.name.variable.local.cs#96A1FF
entity.name.variable.field.cs, entity.name.variable.property.cs#96A1FF
source.cpp keyword.operator#FF16B0
punctuation.definition.heading.markdown#96a0ff7c
punctuation.definition.bold.markdown#ff16b17a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic