Skip to main content
CodingTheme

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#030d22
  • activityBar.foreground#ff2592
  • activityBarBadge.background#d31b77
  • activityBarBadge.foreground#ffffff
  • button.background#087eb4
  • button.foreground#ffffff
  • button.hoverBackground#008dce
  • descriptionForeground#ffffff
  • editor.background#030d22
  • editor.findMatchBackground#003496
  • editor.findMatchHighlightBackground#001288da
  • editor.foreground#fdfeff
  • editor.hoverHighlightBackground#004696
  • editor.lineHighlightBackground#1c1347
  • editor.selectionBackground#310072
  • editor.selectionHighlightBackground#35008b
  • editor.wordHighlightBackground#47008ad5
  • editor.wordHighlightStrongBackground#440083d5
  • editorCursor.foreground#ee0077
  • editorError.foreground#ac077a
  • editorGroup.dropBackground#03153b
  • editorGroupHeader.noTabsBackground#03163f
  • editorGroupHeader.tabsBackground#030d22
  • editorHoverWidget.background#222858
  • editorHoverWidget.border#2d324e
  • editorIndentGuide.activeBackground#103483
  • editorIndentGuide.background#030d22
  • editorInfo.foreground#af21e7
  • editorLineNumber.activeForeground#47a1fa
  • editorLineNumber.foreground#ee0077
  • editorRuler.foreground#11215e
  • editorWarning.foreground#fad46d
  • editorWidget.background#04112c
  • editorWidget.border#030f27
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#ec0076
  • gitDecoration.deletedResourceForeground#d800ca
  • gitDecoration.ignoredResourceForeground#1183b8
  • gitDecoration.modifiedResourceForeground#fdd81d
  • gitDecoration.untrackedResourceForeground#0097fc
  • input.background#0d0931
  • input.border#150f53
  • input.placeholderForeground#f3f3f3
  • inputOption.activeBorder#ffd400
  • list.activeSelectionBackground#073170
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#063475
  • list.errorForeground#b60672
  • list.focusBackground#06306e
  • list.hoverBackground#0a2f66
  • list.inactiveSelectionBackground#161130
  • list.warningForeground#992293
  • panel.background#0e0952
  • panel.border#181657
  • panel.dropBackground#ff2592
  • panelTitle.activeBorder#ff2592
  • panelTitle.activeForeground#ff2592
  • panelTitle.inactiveForeground#d600dd
  • peekView.border#ffd400
  • peekViewEditor.background#1971f770
  • peekViewEditor.matchHighlightBackground#120961
  • peekViewEditor.matchHighlightBorder#34006e
  • peekViewResult.background#1a1079
  • peekViewResult.selectionBackground#ffd400
  • peekViewTitle.background#372dc9
  • peekViewTitleDescription.foreground#348bee
  • progressBar.background#fa0dea
  • scrollbar.shadow#ff25ed57
  • scrollbarSlider.activeBackground#ff29944f
  • scrollbarSlider.background#fc309654
  • scrollbarSlider.hoverBackground#ee0077
  • sideBar.background#030d22
  • sideBarSectionHeader.background#04112e
  • sideBarSectionHeader.foreground#1f9aff
  • statusBar.background#0a0631
  • statusBar.debuggingBackground#0a0631
  • statusBar.debuggingForeground#4d8bee
  • statusBar.foreground#4d8bee
  • statusBar.noFolderBackground#0a0631
  • statusBar.noFolderForeground#4d8bee
  • tab.activeBackground#1d1641
  • tab.activeForeground#f9faff
  • tab.border#171033
  • tab.inactiveBackground#141138
  • tab.inactiveForeground#3e8efd
  • terminal.ansiBlack#3a1b75
  • terminal.ansiBlue#3787d6
  • terminal.ansiBrightBlack#5c6d751a
  • terminal.ansiBrightBlue#5994CE
  • terminal.ansiBrightCyan#4bc5fa
  • terminal.ansiBrightGreen#3dd69c
  • terminal.ansiBrightMagenta#EA00D9
  • terminal.ansiBrightRed#ff2e97
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd400
  • terminal.ansiCyan#0ab2fa
  • terminal.ansiGreen#06ad00
  • terminal.ansiMagenta#EA00D9
  • terminal.ansiRed#ee1682
  • terminal.ansiWhite#f2f8ff
  • terminal.ansiYellow#ffd400
  • terminal.background#0d0936
  • terminal.foreground#e4eeff
  • titleBar.activeBackground#0b082e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi.python#0098dfitalic
string#0ef3ff
constant.numeric#ffd400
constant.language#ff2e97
constant.character, constant.other#c832ff
variable
keyword#ff2cf1
storage#40a9ff
storage.type#ff1bf0
meta#ff2e97
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#ffd400
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#40a9ff
punctuation.definition.parameters#ffee80
punctuation.definition.template-expression#ffee80
entity.name.class, entity.name.type.class#ff2e97
entity#ffd400
entity.other.inherited-class, meta.other.inherited-class.php#6ab0ffitalic
entity.name.function - meta.function-call#39c0ff
variable.parameter#ff2e97
entity.name.tag#ff2e97
entity.other.attribute-name#ffd400
support.function#ffd400
support.constant#39c0ff
support.type, support.class#ff2cf1italic
support.other.variable#39c0ff
support.variable.property.dom#67b3ff
invalid#9e0a52
invalid.deprecated#00d7e2
meta.diff, meta.diff.header#009af3
markup.deleted#ec107b
markup.inserted#dbcd00
markup.changed#029fcf
constant.numeric.line-number.find-in-files - match#e92778
entity.name.filename.find-in-files#ff2e97
keyword.other#a83dff
meta.property-value, support.constant.property-value, constant.other.color#fd21ef
meta.structure.dictionary.json string.quoted.double.json#FF0081
support.type.property-name.json#ff2e97
meta.structure.dictionary.value.json string.quoted.double.json#0ef3ff
meta.property-name support.type.property-name#0ef3ff
meta.property-value punctuation.separator.key-value#44a1fd
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#EA00D9
support.other.namespace.php#973dfd
meta.use#2fb3ff
variable.other#ff2e97
keyword.other.phpdoc.php#35a3fd
variable.parameter.function.coffee#ff2e97
variable.parameter.function.language.special.self.python#ff2e97
source.ts entity.name.type#dbcd00
source.ts keyword#ff25f0
source.ts punctuation.definition.parameters#dbcd00
meta.arrow.ts punctuation.definition.parameters#ffee80
source.ts storage#0ef3ff
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx#ff2e97
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#dbcd00
source.js storage.type.function#ff25f0
variable.language, entity.name.type.class.js#3ec8ff
entity.other.inherited-class.js#ff15ef
text.html.vue-html#ffd400
entity.name.section.markdown#ff2e97
string.other.link.title.markdown#ff2e97
punctuation.definition.heading.markdown#ff2e97
markup.raw.inline.markdown#e9e9e9
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#ff2e97
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff22f0
punctuation.definition.metadata.markdown#ff22f0
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#ff22f0
markup.bold.markdown, markup.italic.markdown#ff2e97
markup.italic.markdownitalic
markup.bold.markdownbold
fenced_code.block.language, markup.inline.raw.markdown#ff2e97
fenced_code.block.language, markup.inline.raw.markdown#ff2e97
meta.paragraph.markdown#e1efff
markup.raw.block.markdown#ffffff
markup.deleted.git_gutter#e700d8
markup.inserted.git_gutter#ffd400
markup.changed.git_gutter#0685fc
meta.template.expression#18b6ff

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...