Skip to main content
Coding Theme

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#011627
  • activityBar.foreground#fff
  • activityBarBadge.background#5ce3d4
  • activityBarBadge.foreground#000
  • badge.background#5ce3d4
  • badge.foreground#000
  • button.background#ffd100
  • button.foreground#000
  • button.hoverBackground#fae5a8
  • debugExceptionWidget.background#011627
  • debugExceptionWidget.border#1a202b
  • debugToolBar.background#011627
  • diffEditor.insertedTextBackground#1be11b1d
  • diffEditor.removedTextBackground#f29e7425
  • dropdown.background#011627
  • dropdown.border#363e4a
  • dropdown.foreground#667380
  • editor.background#011627
  • editor.findMatchBackground#667380
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#667380
  • editor.findMatchHighlightBorder#ffcc6633
  • editor.findRangeHighlightBackground#445362
  • editor.findRangeHighlightBorder#21273300
  • editor.foreground#f4f4f1
  • editor.inactiveSelectionBackground#445362
  • editor.lineHighlightBackground#1c222e
  • editor.rangeHighlightBackground#1c222e
  • editor.selectionBackground#445362
  • editor.selectionHighlightBackground#445362
  • editor.selectionHighlightBorder#2c3d4e
  • editor.wordHighlightBackground#445362
  • editor.wordHighlightStrongBackground#ffcc6633
  • editorBracketMatch.border#39424e
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff3333
  • editorGroup.border#1a202b
  • editorGroupHeader.noTabsBackground#011627
  • editorGroupHeader.tabsBackground#011627
  • editorGroupHeader.tabsBorder#1a202b
  • editorGutter.addedBackground#bae67e
  • editorGutter.deletedBackground#f29e74
  • editorGutter.modifiedBackground#5ccfe6
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#121824
  • editorIndentGuide.activeBackground#434c59
  • editorIndentGuide.background#363e4a
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#b1b6ba66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#011627
  • editorOverviewRuler.addedForeground#bae67e
  • editorOverviewRuler.border#1a202b
  • editorOverviewRuler.deletedForeground#f29e74
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#1a202b
  • editorSuggestWidget.background#011627
  • editorSuggestWidget.border#121824
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#1c222e
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#39424e
  • editorWidget.background#011627
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#011627
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#4a5561
  • foreground#fff
  • gitDecoration.deletedResourceForeground#f29e74bb
  • gitDecoration.ignoredResourceForeground#444d5a
  • gitDecoration.modifiedResourceForeground#5ccfe6bb
  • gitDecoration.submoduleResourceForeground#d4bfffbb
  • gitDecoration.untrackedResourceForeground#bae67ebb
  • input.background#011627
  • input.border#363e4a
  • input.foreground#f4f4f1
  • input.placeholderForeground#515c69
  • inputOption.activeBorder#ffcc66
  • inputValidation.errorBackground#011627
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#011627
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#011627
  • inputValidation.warningBorder#ffbb33
  • list.activeSelectionBackground#1a202b
  • list.activeSelectionForeground#f4f4f1
  • list.focusBackground#1c222e
  • list.focusForeground#f4f4f1
  • list.highlightForeground#ffcc66
  • list.hoverBackground#1c222e
  • list.hoverForeground#f4f4f1
  • list.inactiveSelectionBackground#1c222e
  • list.inactiveSelectionForeground#f4f4f1
  • list.invalidItemForeground#515c69
  • panel.background#011627
  • panel.border#1a202b
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#f4f4f1
  • panelTitle.inactiveForeground#667380
  • peekView.border#1a202b
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#011627
  • peekViewResult.fileForeground#667380
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#011627
  • peekViewTitleDescription.foreground#667380
  • peekViewTitleLabel.foreground#667380
  • pickerGroup.border#1a202b
  • pickerGroup.foreground#444d5a
  • progressBar.background#ffcc66
  • scrollbar.shadow#161c2711
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#293847fd
  • sideBar.background#011627
  • sideBar.border#1a202b
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.foreground#667380
  • sideBarTitle.foreground#667380
  • statusBar.background#011627
  • statusBar.border#011627
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#011627
  • statusBar.foreground#667380
  • statusBar.noFolderBackground#011627
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#1a202b
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#011627
  • tab.activeBorder#ffcc66
  • tab.activeForeground#f4f4f1
  • tab.border#011627
  • tab.inactiveBackground#011627
  • tab.inactiveForeground#667380
  • tab.unfocusedActiveBorder#667380
  • tab.unfocusedActiveForeground#667380
  • tab.unfocusedInactiveForeground#667380
  • terminal.ansiBlack#1a202b
  • terminal.ansiBlue#36a3d9
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#a6fde1
  • terminal.ansiBrightGreen#cbe645
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#ffc44c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdf80
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#bae67e
  • terminal.ansiMagenta#d4bfff
  • terminal.ansiRed#ffc44c
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#ffcc66
  • terminal.background#011627
  • terminal.foreground#f4f4f1
  • textBlockQuote.background#011627
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#f4f4f1
  • titleBar.activeBackground#011627
  • titleBar.activeForeground#f4f4f1
  • titleBar.inactiveBackground#011627
  • titleBar.inactiveForeground#667380
  • walkThrough.embeddedEditorBackground#011627
  • widget.shadow#161c27

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—italic
markup.deleted.diff—italic
markup.inserted.diff#addb67ffitalic
comment, punctuation.definition.comment#5c6773italic
variable#f4f4f1—
string, constant.other.symbol#afef76—
constant.numeric#ffcc66—
string.regexp, constant.character.escape#95e6cb—
constant.language#ffcc66—
constant.character, constant.other#ffcc66—
variable.member#ec5f67—
punctuation.accessor, meta.at-rule.media, keyword.control.export, keyword.control.conditional#faa8f2—
constant.numeric.css#f4f4f1—
keyword.operator#96d6ff—
keyword.operator.new.js#5ce3d4bold
keyword.operator.assignment.js#fff—
punctuation.section#f4f4f1—
punctuation.accessor#f29e74—
punctuation.definition.annotation#f4f4f1CC—
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js#ffc44c—
storage#5ce3d4—
storage.type.function.js#faa8f2—
entity.name.function#ffd100—
entity.name.import, entity.name.package#afef76—
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#ec5f67italic
italic—italic
entity.name#4accff—
entity.other.inherited-class#4accff—
variable.parameter, meta.parameter#d4bfff—
variable.language#faa8f2italic
entity.name.tag, meta.tag.sgml#96d6ffbold
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#96d6ff—
entity.other.attribute-name, entity.name.tag.reference#ffd100italic
keyword.operator.relational—italic
meta.delimiter.period—italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffbb33—
support.function, support.macro#faa8f2—
support.constant#f4f4f1—
support.type, support.class, source.go storage.type#5ce3d4—
invalid#ff3333—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#ffbb33—
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#4accff—
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#3cdbc0—
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#ff851a—
entity.name.filename.find-in-files#afef76—
message.error#ff3333—
meta.selector—italic
entity.name.tag.doctype, meta.tag.sgml.doctype—italic
variable.other.object.property—italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5ccfe6—
markup.heading, markup.heading entity.name#3cdbc0bold
string.other.link, markup.underline.link#95e6cbitalic underline
punctuation.definition.image#ffbb33—
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold | markup.bold markup.italic—bold italic
markup.quote#ffcc66italic
quote—italic
markup.list.numbered.bullet, markup.list punctuation.definition.list_item#95e6cb—
markup.inserted#afef76—
markup.changed#5ccfe6—
markup.deleted#f28779—
markup.strike#ffd100—
markup.table#5ccfe6—
text.html.markdown markup.inline.raw#ffd100—
text.html.markdown meta.dummy.line-break#5c6773—
source.elixir .punctuation.binary.elixir—italic
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—italic
meta.tag.sgml.doctype.html—italic
markup.italic.markdown—italic
markup.quote.markdown#697098italic
punctuation.definition.markdown#5c6773—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—