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#ffffff
  • activityBar.background#1e0271
  • activityBar.border#21037f
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#25038d
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#25038d
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#25038d
  • button.secondaryBackground#1a0263
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#1a0263
  • chat.editedFileForeground#E2C08D
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85B6FF
  • checkbox.background#1a0263
  • checkbox.border#1a0263
  • debugToolBar.background#1e0271
  • descriptionForeground#9D9D9D
  • dropdown.background#1a0263
  • dropdown.border#1a0263
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#25038d
  • editor.background#25038d
  • editor.findMatchBackground#9E6A03
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#21037f
  • editorBracketHighlight.foreground1#e6c9fd
  • editorBracketHighlight.foreground2#ecd4ff
  • editorBracketHighlight.foreground3#f1e0ff
  • editorBracketHighlight.foreground4#f7eeff
  • editorBracketHighlight.foreground5#fbf8ff
  • editorBracketHighlight.foreground6#ffffff
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#1e0271
  • editorGroupHeader.tabsBorder#21037f
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#08f2ff
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#25038d
  • errorForeground#F85149
  • focusBorder#25038d
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#1a0263
  • input.border#1a0263
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#25038d82
  • inputOption.activeBorder#25038d
  • keybindingLabel.foreground#CCCCCC
  • list.activeSelectionBackground#ffffff33
  • list.activeSelectionForeground#25038d
  • list.activeSelectionIconForeground#25038d
  • list.hoverBackground#ffffff33
  • list.hoverForeground#25038d
  • list.inactiveSelectionBackground#ffffff66
  • list.inactiveSelectionForeground#25038dcc
  • menu.background#25038d
  • menu.foreground#ffffff
  • menu.selectionBackground#21037f
  • menu.selectionForeground#ffffff
  • notificationCenterHeader.background#25038d
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#25038d
  • notifications.border#21037f
  • notifications.foreground#CCCCCC
  • panel.background#1e0271
  • panel.border#21037f
  • panelInput.border#21037f
  • panelTitle.activeBorder#25038d
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • peekViewEditor.background#25038d
  • peekViewEditor.matchHighlightBackground#25038d66
  • peekViewResult.background#25038d
  • peekViewResult.matchHighlightBackground#25038d66
  • pickerGroup.border#1a0263
  • progressBar.background#25038d
  • quickInput.background#1a0263
  • quickInput.foreground#CCCCCC
  • settings.dropdownBackground#1a0263
  • settings.dropdownBorder#1a0263
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#25038d66
  • sideBar.background#1e0271
  • sideBar.border#21037f
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#1e0271
  • sideBarSectionHeader.border#21037f
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#000000
  • statusBar.border#21037f
  • statusBar.debuggingBackground#25038d
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#25038d
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#25038d
  • statusBarItem.focusBorder#25038d
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#25038d
  • tab.activeBorder#25038d
  • tab.activeBorderTop#25038d
  • tab.activeForeground#FFFFFF
  • tab.border#21037f
  • tab.hoverBackground#25038d
  • tab.inactiveBackground#1e0271
  • tab.inactiveForeground#9D9D9D
  • tab.selectedBorderTop#6caddf
  • tab.unfocusedActiveBorder#25038d
  • tab.unfocusedActiveBorderTop#21037f
  • tab.unfocusedHoverBackground#25038d
  • terminal.foreground#ffffff
  • terminal.tab.activeBorder#25038d
  • textBlockQuote.background#21037f
  • textBlockQuote.border#616161
  • textCodeBlock.background#21037f
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#1a0263
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#1a0263
  • titleBar.activeBackground#1e0271
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#21037f
  • titleBar.inactiveBackground#25038d
  • titleBar.inactiveForeground#9D9D9D
  • welcomePage.progress.foreground#25038d
  • welcomePage.tileBackground#21037f
  • widget.border#1a0263

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b7089
constant, support.constant#a093c7
entity.other.attribute-name#a093c7
entity.name.class#c6c8d1
entity.name.function#c6c8d1
entity.name.section#e2a478
entity.name.tag#84a0c6
keyword, keyword.operator.expression, keyword.operator.new#84a0c6
keyword.control.at-rule, keyword.control.content#b4be82
keyword.function#84a0c6
keyword.operator#c6c8d1
keyword.other.unit#a093c7
markup.bold#d2d4debold
markup.fenced_code.block#6b7089
markup.inline.raw.string#a093c7
meta.link#89b8c2
meta.brace.square#c6c8d1
entity.name.function.method, markup.heading, meta.definition.method#e2a478
meta.object-literal.key#84a0c6
meta.tag.attributes#a093c7
meta.tag.sgml.doctype#6b7089
meta.type.annotation#b4be82
punctuation.definition.template-expression#b4be82
punctuation.definition.block#c6c8d1
punctuation.definition.tag#84a0c6
storage#84a0c6
storage.type.function#84a0c6
string#89b8c2
support#84a0c6
support.type.property-name#84a0c6
variable.language.this#b4be82
text#c6c8d1
meta.diff.header#84a0c6
meta.diff.range#89b8c2
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css#c6c8d1
markup.deleted.diff#e27878
markup.inserted.diff#b4be82
support.type.class.flowtype#b4be82
punctuation.definition.block.tag.jsdoc#b4be82
storage.type.class.jsdoc#b4be82
variable.other.jsdoc#c6c8d1
entity.name.import.go#89b8c2
markup.underline.link#84a0c6
keyword.other.important.scss#e2a478
variable.interpolation.scss#b4be82
variable.scss#89b8c2
Flawuldragon by Humbanew Project - VS Code Theme