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#151529
  • activityBar.border#151529
  • activityBar.foreground#78a9ff
  • activityBar.inactiveForeground#8c94a3
  • activityBarBadge.background#f29e74
  • activityBarBadge.foreground#151529
  • badge.background#f29e7433
  • badge.foreground#f29e74
  • button.background#f29e74
  • button.foreground#151529
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#151529
  • debugExceptionWidget.border#151529
  • debugToolBar.background#151529
  • descriptionForeground#8c94a3
  • diffEditor.insertedTextBackground#9e81c926
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#151529
  • dropdown.border#1c1c37
  • dropdown.foreground#8c94a3
  • editor.background#151529
  • editor.findMatchBackground#a6cc700d
  • editor.findMatchBorder#a6cc7080
  • editor.findMatchHighlightBackground#a6cc700d
  • editor.findMatchHighlightBorder#a6cc7080
  • editor.findRangeHighlightBackground#323a4c
  • editor.findRangeHighlightBorder#191f2800
  • editor.foreground#acb9d9
  • editor.inactiveSelectionBackground#323a4c
  • editor.lineHighlightBackground#1c1c37
  • editor.rangeHighlightBackground#191f29
  • editor.selectionBackground#33415e
  • editor.selectionHighlightBackground#323a4c
  • editor.selectionHighlightBorder#323a4c
  • editor.wordHighlightBackground#77a8d912
  • editor.wordHighlightBorder#77a8d980
  • editor.wordHighlightStrongBackground#a6cc7012
  • editor.wordHighlightStrongBorder#a6cc7080
  • editorBracketMatch.background#8c94a34d
  • editorBracketMatch.border#8c94a399
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#f29e74
  • editorError.foreground#ff3333
  • editorGroup.border#151529
  • editorGroupHeader.noTabsBackground#151529
  • editorGroupHeader.tabsBackground#151529
  • editorGroupHeader.tabsBorder#151529
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#151529
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground1#8c94a3b3
  • editorIndentGuide.background1#8c94a34d
  • editorLineNumber.activeForeground#8c94a3cc
  • editorLineNumber.foreground#8c94a366
  • editorLink.activeForeground#f29e74
  • editorMarkerNavigation.background#151529
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#151529
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#f29e74
  • editorRuler.foreground#8c94a34d
  • editorSuggestWidget.background#151529
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.highlightForeground#f29e74
  • editorSuggestWidget.selectedBackground#1c1c37
  • editorWarning.foreground#f29e74
  • editorWhitespace.foreground#8c94a366
  • editorWidget.background#151529
  • errorForeground#ff3333
  • extensionButton.prominentBackground#f29e74
  • extensionButton.prominentForeground#151529
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#596171
  • foreground#8c94a3
  • gitDecoration.conflictingResourceForeground#f29e74
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#525a69
  • gitDecoration.modifiedResourceForeground#78a9ff
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#a6cc70b3
  • icon.foreground#8c94a3
  • input.background#1c1c37
  • input.border#1c1c37
  • input.foreground#acb9d9
  • input.placeholderForeground#5f6878
  • inputOption.activeBorder#78a9ff
  • inputValidation.errorBackground#151529
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#151529
  • inputValidation.infoBorder#78a9ff
  • inputValidation.warningBackground#151529
  • inputValidation.warningBorder#9df0f0
  • list.activeSelectionBackground#151529
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#f27983
  • list.filterMatchBackground#f29e740d
  • list.filterMatchBorder#f29e74
  • list.focusBackground#1c1c37
  • list.focusForeground#8c94a3
  • list.highlightForeground#f29e74
  • list.hoverBackground#151529
  • list.hoverForeground#8c94a3
  • list.inactiveSelectionBackground#1c1c37
  • list.inactiveSelectionForeground#8c94a3
  • list.invalidItemForeground#5f6878
  • listFilterWidget.background#151529
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#f29e74
  • panel.background#151529
  • panel.border#151529
  • panelSection.dropBackground#f29e74
  • panelSectionHeader.background#151529
  • panelSectionHeader.foreground#868690
  • panelTitle.activeBorder#78a9ff
  • panelTitle.activeForeground#acb9d9
  • panelTitle.inactiveForeground#8c94a3
  • peekView.border#151529
  • peekViewEditor.background#151529
  • peekViewEditor.matchHighlightBackground#f29e7433
  • peekViewResult.background#151529
  • peekViewResult.fileForeground#8c94a3
  • peekViewResult.matchHighlightBackground#f29e7433
  • peekViewTitle.background#151529
  • peekViewTitleDescription.foreground#8c94a3
  • peekViewTitleLabel.foreground#8c94a3
  • pickerGroup.border#151529
  • pickerGroup.foreground#525a69
  • progressBar.background#f29e74
  • scrollbar.shadow#1c1c37
  • scrollbarSlider.activeBackground#8c94a3b3
  • scrollbarSlider.background#8c94a366
  • scrollbarSlider.hoverBackground#8c94a399
  • selection.background#33415efd
  • settings.headerForeground#acb9d9
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#151529
  • sideBar.border#151529
  • sideBar.foreground#8c94a3
  • sideBarSectionHeader.background#151529
  • sideBarSectionHeader.border#151529
  • sideBarSectionHeader.foreground#78a9ff
  • sideBarTitle.foreground#78a9ff
  • statusBar.background#151529
  • statusBar.border#151529
  • statusBar.debuggingBackground#78a9ff
  • statusBar.debuggingForeground#151529
  • statusBar.foreground#8c94a3
  • statusBar.noFolderBackground#151529
  • statusBarItem.activeBackground#1c1c37
  • statusBarItem.hoverBackground#1c1c37
  • statusBarItem.prominentBackground#1c1c37
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#151529
  • tab.activeBorder#151529
  • tab.activeBorderTop#78a9ff
  • tab.activeForeground#acb9d9
  • tab.border#151529
  • tab.inactiveBackground#151529
  • tab.inactiveForeground#8c94a3
  • tab.unfocusedActiveBorderTop#8c94a3
  • tab.unfocusedActiveForeground#8c94a3
  • tab.unfocusedInactiveForeground#8c94a3
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#78a9ff
  • terminal.ansiBrightBlack#65686f
  • terminal.ansiBrightBlue#6696e9
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#9dfaab
  • terminal.ansiBrightMagenta#f0abfc
  • terminal.ansiBrightRed#ffbfbf
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fad07b
  • terminal.ansiCyan#73d0ff
  • terminal.ansiGreen#60fb77
  • terminal.ansiMagenta#ca79f9
  • terminal.ansiRed#c98181
  • terminal.ansiWhite#d9d9d9
  • terminal.ansiYellow#e3d37b
  • terminal.background#151529
  • terminal.foreground#d9d9d9
  • textBlockQuote.background#151529
  • textLink.activeForeground#f29e74
  • textLink.foreground#f29e74
  • textPreformat.foreground#acb9d9
  • titleBar.activeBackground#151529
  • titleBar.activeForeground#acb9d9
  • titleBar.border#151529
  • titleBar.inactiveBackground#151529
  • titleBar.inactiveForeground#8c94a3
  • tree.indentGuidesStroke#8c94a3b3
  • walkThrough.embeddedEditorBackground#151529
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, markup.inserted.diff, punctuation.accessor, keyword, storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, entity.name.function, entity.other.attribute-name, entity.other.attribute-name, entity.other.attribute-name, keyword.operator.relational, meta.delimiter.period, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, variable.other.object.property, entity.name.function, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, italic, quote, source.elixir .punctuation.binary.elixir, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.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, meta.tag.sgml.doctype.html, variable.other.object.js, markup.italic.markdown—italic
comment, string.quoted.docstring.multi.python#ffffff30italic
string, constant.other.symbol#96c565—
string.regexp, constant.character, constant.other#95E6CB—
constant.numeric, string.quoted.single#f29e74—
constant.language#f29e74—
variable#acb9d9—
variable.member#F28779—
variable.language#78A9FFitalic
storage#9e81c9—
keyword#9e81c9—
keyword.operator, string.quoted.single#e6c384—
punctuation.separator, punctuation.terminator#acb9d9—
punctuation.section#acb9d9—
punctuation.accessor#F29E74—
source.java storage.type, source.haskell storage.type, source.c storage.type#73D0FF—
entity.other.inherited-class#78A9FF—
storage.type.function#9e81c9—
source.java storage.type.primitive#78A9FF—
entity.name.function#9df0f0—
variable.parameter, meta.parameter#D4BFFF—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#9df0f0—
support.function, support.macro#F28779—
entity.name.import, entity.name.package#9e81c9—
entity.name, storage.type.js, keyword.control.import.tsx#73D0FF—
entity.name.tag, meta.tag.sgml#78A9FF—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#78A9FF80—
entity.other.attribute-name#9df0f0—
support.constant#F29E74italic
support.type, support.class, source.go storage.type#78A9FF—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#FFE6B3—
invalid#FF3333—
meta.diff, meta.diff.header#C594C5—
source.ruby variable.other.readwrite#9df0f0—
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#73D0FF—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5C6773—
support.type.property-name#78A9FF—
constant.numeric.line-number.find-in-files - match#5C6773—
constant.numeric.line-number.match#9e81c9—
entity.name.filename.find-in-files#9e81c9—
message.error#FF3333—
markup.heading, markup.heading entity.name#9e81c9bold
markup.underline.link, string.other.link#78A9FF—
markup.italic#F28779italic
markup.bold#F28779bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
meta.separator#5C6773bold
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#9df0f0—
markup.inserted#A6CC70—
markup.changed#77A8D9—
markup.deleted#F27983—
markup.strike#FFE6B3—
markup.table#78A9FF—
text.html.markdown markup.inline.raw#F29E74—
text.html.markdown meta.dummy.line-break#5C6773—
punctuation.definition.markdown#5C6773—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Astrus by Shailesh Sathe - VS Code Theme