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