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#201729
  • activityBar.foreground#E1E1E6
  • activityBarBadge.background#FF6F6F
  • activityBarBadge.foreground#322544
  • badge.background#FF6F6F
  • badge.foreground#E1E1E6
  • button.background#A66BB8
  • button.foreground#322544
  • button.hoverBackground#B77BC9
  • dropdown.background#4A3E5A
  • dropdown.foreground#E1E1E6
  • editor.background#322544
  • editor.findMatchBackground#FF6F6F55
  • editor.findMatchHighlightBackground#F9E29C55
  • editor.foreground#E1E1E6
  • editor.lineHighlightBackground#4A3E5A
  • editor.lineHighlightBorder#FFFFFF1a
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#A66BB8AA
  • editorBracketMatch.background#F9E29C55
  • editorBracketMatch.border#F1E8B2
  • editorCursor.foreground#F8F8FF
  • editorGroup.border#4A3E5A
  • editorGroup.dropBackground#FFFFFF54
  • editorGroup.focusedEmptyBorder#A66BB8
  • editorGroupHeader.noTabsBackground#201729
  • editorGroupHeader.tabsBackground#201729
  • editorGroupHeader.tabsBorder#4A3E5A
  • editorHoverWidget.background#322544
  • editorIndentGuide.activeBackground1#4A3E5A
  • editorIndentGuide.background1#4A3E5A
  • editorLineNumber.activeForeground#E1E1E6
  • editorLineNumber.foreground#75627e
  • editorMarkerNavigation.background#322544
  • editorOverviewRuler.background#201729
  • editorStickyScroll.shadow#201729
  • editorStickyScrollHover.background#4A3E5A
  • editorWidget.background#322544
  • focusBorder#F1E8B2
  • input.background#4A3E5A
  • input.foreground#E1E1E6
  • input.placeholderForeground#6A6D77
  • inputOption.activeBorder#f1e8b2
  • list.activeSelectionBackground#A66BB855
  • list.activeSelectionForeground#E1E1E6
  • list.dropBackground#f1e8b280
  • list.focusBackground#f1e8b280
  • list.focusForeground#FFFFFF
  • list.highlightForeground#F1E8B2
  • list.hoverBackground#4A3E5A
  • list.inactiveSelectionBackground#4A3E5A
  • minimap.background#2A1E3A
  • panel.background#2A1E3A
  • panel.border#4A3E5A
  • panelTitle.activeBorder#E1E1E680
  • panelTitle.activeForeground#E1E1E6
  • panelTitle.inactiveForeground#776A6A
  • peekView.border#F1E8B2
  • peekViewEditor.background#2A1E3A
  • peekViewResult.background#322544
  • peekViewTitle.background#322544
  • pickerGroup.border#FFFFFF1a
  • quickInput.background#4A3E5A
  • quickInput.foreground#E1E1E6
  • scrollbarSlider.activeBackground#f1e8b2AA
  • scrollbarSlider.background#4A3E5A80
  • scrollbarSlider.hoverBackground#A66BB8AA
  • selection.background#FF6F6F
  • sideBar.background#2A1E3A
  • sideBar.foreground#E1E1E6
  • sideBarSectionHeader.background#2a1e3a
  • sideBarSectionHeader.border#FF6F6F
  • sideBarSectionHeader.foreground#E1E1E6
  • sideBarTitle.background#2a1e3a
  • sideBarTitle.foreground#E1E1E6
  • statusBar.background#201729
  • statusBar.foreground#E1E1E6
  • statusBar.noFolderBackground#2A1E3A
  • statusBarItem.activeBackground#f1e8b280
  • statusBarItem.hoverBackground#4A3E5A
  • statusBarItem.remoteBackground#f1e8b2
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#322544
  • tab.activeBorderTop#FF6F6F
  • tab.activeForeground#E1E1E6
  • tab.activeModifiedBorder#f1e8b2
  • tab.border#00000033
  • tab.inactiveBackground#2A1E3A
  • tab.inactiveForeground#6A6D77
  • tab.inactiveModifiedBorder#2A1E3A
  • tab.unfocusedActiveModifiedBorder#c0b700
  • tab.unfocusedInactiveModifiedBorder#908900
  • terminal.ansiBlack#100e23
  • terminal.ansiBlue#65b2ff
  • terminal.ansiBrightBlack#565575
  • terminal.ansiBrightBlue#91ddff
  • terminal.ansiBrightCyan#aaffe4
  • terminal.ansiBrightGreen#95ffa4
  • terminal.ansiBrightMagenta#c991e1
  • terminal.ansiBrightRed#ff8080
  • terminal.ansiBrightWhite#cbe3e7
  • terminal.ansiBrightYellow#ffe9aa
  • terminal.ansiCyan#63f2f1
  • terminal.ansiGreen#62d196
  • terminal.ansiMagenta#906cff
  • terminal.ansiRed#ff5458
  • terminal.ansiWhite#a6b3cc
  • terminal.ansiYellow#ffb378
  • terminal.background#322544
  • terminal.foreground#E1E1E6
  • titleBar.activeBackground#201729
  • titleBar.activeForeground#E1E1E6
  • titleBar.inactiveBackground#2A1E3A
  • titleBar.inactiveForeground#6A6D77

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#D1B8F3
string#AEECEF
constant.numeric#FF8B91
keyword#FF6F6F
variable#66a5e2
variable.parameter#66a5e2
storage#FF6F6F
entity.name.function#f1e8b2
punctuation.definition.string.begin, punctuation.definition.string.end#f1e8b2
punctuation.terminator#D1B8F3
property#A66BB8
entity.name.tag#D1B8F3
support.type#f4eeff
support.class#f1e8b2
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#ffe1be
constant.language.boolean#f1e8b2
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#f1e8b2
variable, support.class, entity.name.function#f4eeff
entity.name.function, support.function#22ced0
support.module, support.node#f1e8b2italic
entity.name.type, entity.other.inherited-class#f4eeff
entity.name.type.class#f1e8b2underline
variable.object.property, meta.field.declaration entity.name.function#22ced0
meta.definition.method entity.name.function#f1e8b2
meta.function entity.name.function#22ced0
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f1e8b2
meta.embedded, source.groovy.embedded, meta.template.expression#f4eeff
entity.name.tag.yaml#f1e8b2
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#f1e8b2
constant.language.json#f1e8b2
support.type.property-name.json#d8dee9
entity.other.attribute-name.class#f1e8b2
entity.other.attribute-name.id#FF6F6F
source.css entity.name.tag#66a5e2
meta.tag, punctuation.definition.tag#f4eeff
entity.name.tag#f1e8b2
entity.other.attribute-name#66a5e2
markup.heading#f1e8b2
text.html.markdown meta.link.inline, meta.link.reference#f1e8b2
text.html.markdown beginning.punctuation.definition.list#f1e8b2
markup.italic#f1e8b2italic
markup.bold#f1e8b2bold
markup.bold markup.italic, markup.italic markup.bold#f1e8b2italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#FF6F6F
markup.inline.raw.string.markdown#FF6F6F
keyword.other.definition.ini#f1e8b2
entity.name.section.group-title.ini#f1e8b2
source.cs meta.class.identifier storage.type#22ced0underline
source.cs meta.method.identifier entity.name.function#22ced0
source.cs meta.method-call meta.method, source.cs entity.name.function#AEECEF
source.cs storage.type#22ced0
source.cs meta.method.return-type#22ced0
source.cs entity.name.type.namespace#E1E1E6
Vikkie!!! Theme by Kaleidosium - VS Code Theme