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#020413
  • activityBar.foreground#d7d7d7
  • activityBarBadge.background#8b1343
  • activityBarBadge.foreground#dddddd
  • badge.background#8b1343
  • badge.foreground#d4d4d4
  • button.background#4A94FC
  • diffEditor.insertedTextBackground#05786797
  • diffEditor.removedTextBackground#b12350dd
  • dropdown.background#020413
  • editor.background#020413
  • editor.findMatchBackground#FF2C6F22
  • editor.findMatchHighlightBackground#4A94FC33
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#020413
  • editor.lineHighlightBorder#191923
  • editor.selectionBackground#FF2C6F33
  • editor.selectionForeground#dddddd
  • editorCursor.foreground#FF427E
  • editorGroup.dropBackground#020413
  • editorGroup.focusedEmptyBorder#020413
  • editorGroupHeader.tabsBackground#030518
  • editorHoverWidget.background#2a2a38
  • editorHoverWidget.border#FF2C6F33
  • editorIndentGuide.activeBackground#FF2C6F44
  • editorIndentGuide.background#2d2d3c99
  • editorLineNumber.foreground#b3b3d477
  • editorRuler.foreground#0204134e
  • editorWhitespace.foreground#020413
  • editorWidget.background#020413
  • gitDecoration.conflictingResourceForeground#28283e
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#636363
  • gitDecoration.modifiedResourceForeground#ead653
  • gitDecoration.untrackedResourceForeground#af8bf3
  • input.background#0a0a10ee
  • inputOption.activeBorder#28283e
  • list.activeSelectionBackground#0204134e
  • list.hoverBackground#4A94FC33
  • list.hoverForeground#dddddd
  • list.inactiveSelectionBackground#3d3d56
  • panel.background#020413
  • peekViewEditor.background#08080c
  • peekViewResult.background#09090f
  • peekViewTitle.background#0a0a10
  • scrollbarSlider.activeBackground#3d3d56
  • scrollbarSlider.background#02041344
  • scrollbarSlider.hoverBackground#3d3d56
  • sideBar.background#020413
  • sideBar.foreground#cbcbf0
  • sideBarSectionHeader.background#020413
  • statusBar.background#020413
  • statusBar.debuggingBackground#b12350dd
  • statusBar.debuggingForeground#dddddd
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#020413
  • statusBar.noFolderForeground#dddddd
  • tab.activeBorder#FF427E
  • tab.border#00000033
  • tab.inactiveBackground#09091A
  • terminal.ansiBlack#2c2c3e
  • terminal.ansiBlue#4A94FC
  • terminal.ansiBrightBlack#3d3d56
  • terminal.ansiBrightBlue#4A94FC
  • terminal.ansiBrightCyan#00CED1
  • terminal.ansiBrightGreen#77FF5C
  • terminal.ansiBrightMagenta#CC66FF
  • terminal.ansiBrightRed#FF2C6F
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#EAD653
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#77FF5C
  • terminal.ansiMagenta#CC66FF
  • terminal.ansiRed#FF2C6F
  • terminal.ansiWhite#dddddd
  • terminal.ansiYellow#EAD653
  • terminal.background#020413
  • terminal.foreground#B3B3D4
  • textLink.foreground#EA85B6
  • titleBar.activeBackground#020413
  • titleBar.activeForeground#B3B3D4
  • titleBar.inactiveBackground#020413
  • titleBar.inactiveForeground#B3B3D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#B3B3D4
comment#686889
string#EAD653
source.json meta.structure.dictionary.json support.type.property-name.json#0CCBE9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4B8DFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#838EEC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FE3698
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF7086
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFA55C
markup.bold.markdown#d4d4d4bold
string.other.link.title.markdown,string.other.link.description.markdown#FF2C6F
markup.underline.link.markdown,markup.underline.link.image.markdown#4A94FC
punctuation.definition.metadata.markdown#EAD653
markup.quote.markdown#b3b3d4dditalic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#EAD653
markup.inline.raw.string.markdown#00CED1
punctuation.definition.bold.markdown#00CED1
punctuation.definition.list.begin.markdown#FF2C6Fbold
punctuation.definition.heading.markdown#FF2C6Fbold
entity.name.section.markdown#d4d4d4bold
markup.italic, punctuation.definition.italic,todo.emphasis#EAD653italic
markup.heading punctuation.definition.heading, entity.name.section#d4d4d4
markup.heading#FF2C6Fbold
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FF2C6F
constant.numeric#CC66FF
constant.language#CC66FF
constant.character, constant.other#70AEFF
variable
keyword#FF2C6Fbold
storage#FF2C6F
storage.type#4A94FCitalic bold
entity.name.class#77FF5Cunderline
entity.other.inherited-class#77FF5Citalic underline
entity.name.function#77FF5C
variable.parameter#EAD653italic
entity.name.tag#FF2C6F
entity.other.attribute-name#77FF5C
support.function#00CED1
support.constant#00CED1
support.type, support.class#4A94FCitalic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#00CED1
source.css support.constant.property-value, source.sass support.constant.property-value, source.scss support.constant.property-value, source.less support.constant.property-value, source.stylus support.constant.property-value, source.postcss support.constant.property-value#d4d4d4
entity.name.tag.css#77FF5C
constant.numeric.css, keyword.other.unit#d4d4d4

Shiki preview

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

Loading...

Yami by Hatim Murtuza - VS Code Theme