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#A66BB8
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FF6F6F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F6F
  • badge.foreground#FFFFFF
  • button.background#A66BB8
  • button.foreground#FFFFFF
  • button.hoverBackground#B77BC9
  • dropdown.background#FFFFFF
  • dropdown.foreground#2A1E3A
  • editor.background#F8F5FF
  • editor.findMatchBackground#FF6F6F40
  • editor.findMatchHighlightBackground#A66BB840
  • editor.foreground#2A1E3A
  • editor.lineHighlightBackground#E8E1F5
  • editor.lineHighlightBorder#2A1E3A1a
  • editor.rangeHighlightBackground#2A1E3A0d
  • editor.selectionBackground#A66BB855
  • editorBracketMatch.background#A66BB840
  • editorBracketMatch.border#A66BB8
  • editorCursor.foreground#322544
  • editorGroup.border#E8E1F5
  • editorGroup.dropBackground#A66BB840
  • editorGroup.focusedEmptyBorder#A66BB8
  • editorGroupHeader.noTabsBackground#F1E8FF
  • editorGroupHeader.tabsBackground#F1E8FF
  • editorGroupHeader.tabsBorder#E8E1F5
  • editorHoverWidget.background#F1E8FF
  • editorIndentGuide.activeBackground1#A66BB8
  • editorIndentGuide.background1#D1B8F3
  • editorLineNumber.activeForeground#322544
  • editorLineNumber.foreground#A66BB8
  • editorMarkerNavigation.background#F1E8FF
  • editorOverviewRuler.background#F1E8FF
  • editorStickyScroll.shadow#F1E8FF
  • editorStickyScrollHover.background#E8E1F5
  • editorWidget.background#F1E8FF
  • focusBorder#A66BB8
  • input.background#FFFFFF
  • input.foreground#2A1E3A
  • input.placeholderForeground#6A6D77
  • inputOption.activeBorder#A66BB8
  • list.activeSelectionBackground#A66BB840
  • list.activeSelectionForeground#2A1E3A
  • list.dropBackground#A66BB840
  • list.focusBackground#A66BB840
  • list.focusForeground#2A1E3A
  • list.highlightForeground#A66BB8
  • list.hoverBackground#E8E1F5
  • list.inactiveSelectionBackground#E8E1F5
  • minimap.background#f1e8ff
  • panel.background#F8F5FF
  • panel.border#E8E1F5
  • panelTitle.activeBorder#2A1E3A80
  • panelTitle.activeForeground#2A1E3A
  • panelTitle.inactiveForeground#6A6D77
  • peekView.border#A66BB8
  • peekViewEditor.background#F8F5FF
  • peekViewResult.background#F1E8FF
  • peekViewTitle.background#F1E8FF
  • pickerGroup.border#2A1E3A1a
  • quickInput.background#F1E8FF
  • quickInput.foreground#2A1E3A
  • scrollbarSlider.activeBackground#A66BB8AA
  • scrollbarSlider.background#A66BB860
  • scrollbarSlider.hoverBackground#A66BB880
  • selection.background#FF6F6F80
  • sideBar.background#F1E8FF
  • sideBar.foreground#2A1E3A
  • sideBarSectionHeader.background#F1E8FF
  • sideBarSectionHeader.border#FF6F6F
  • sideBarSectionHeader.foreground#2A1E3A
  • sideBarTitle.background#F1E8FF
  • sideBarTitle.foreground#2A1E3A
  • statusBar.background#A66BB8
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#F8F5FF
  • statusBarItem.activeBackground#A66BB880
  • statusBarItem.hoverBackground#B77BC9
  • statusBarItem.remoteBackground#A66BB8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F8F5FF
  • tab.activeBorderTop#FF6F6F
  • tab.activeForeground#2A1E3A
  • tab.activeModifiedBorder#A66BB8
  • tab.border#00000022
  • tab.inactiveBackground#F1E8FF
  • tab.inactiveForeground#6A6D77
  • tab.inactiveModifiedBorder#C8B6D9
  • tab.unfocusedActiveModifiedBorder#B77BC9
  • tab.unfocusedInactiveModifiedBorder#D1B8F3
  • terminal.ansiBlack#2A1E3A
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlack#6A6D77
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FCD34D
  • terminal.ansiCyan#06B6D4
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#A66BB8
  • terminal.ansiRed#FF6F6F
  • terminal.ansiWhite#E8E1F5
  • terminal.ansiYellow#D97706
  • terminal.background#F8F5FF
  • terminal.foreground#2A1E3A
  • titleBar.activeBackground#A66BB8
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#C8B6D9
  • titleBar.inactiveForeground#F8F5FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9B7FA8—
string#22A0A1—
constant.numeric#D14045—
keyword#A66BB8—
variable#2B76B9—
variable.parameter#2B76B9—
storage#A66BB8—
entity.name.function#805592—
punctuation.definition.string.begin, punctuation.definition.string.end#805592—
punctuation.terminator#9B7FA8—
property#A66BB8—
entity.name.tag#9B7FA8—
support.type#322544—
support.class#805592—
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#D97706—
constant.language.boolean#805592—
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#805592—
variable, support.class, entity.name.function#322544—
entity.name.function, support.function#22A0A1—
support.module, support.node#805592italic
entity.name.type, entity.other.inherited-class#322544—
entity.name.type.class#805592underline
variable.object.property, meta.field.declaration entity.name.function#22A0A1—
meta.definition.method entity.name.function#805592—
meta.function entity.name.function#22A0A1—
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#805592—
meta.embedded, source.groovy.embedded, meta.template.expression#322544—
entity.name.tag.yaml#805592—
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#805592—
constant.language.json#805592—
entity.other.attribute-name.class#805592—
entity.other.attribute-name.id#A66BB8—
source.css entity.name.tag#2B76B9—
meta.tag, punctuation.definition.tag#322544—
entity.name.tag#805592—
entity.other.attribute-name#2B76B9—
markup.heading#805592—
text.html.markdown meta.link.inline, meta.link.reference#805592—
text.html.markdown beginning.punctuation.definition.list#805592—
markup.italic#805592italic
markup.bold#805592bold
markup.bold markup.italic, markup.italic markup.bold#805592italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#A66BB8—
markup.inline.raw.string.markdown#A66BB8—
keyword.other.definition.ini#805592—
entity.name.section.group-title.ini#805592—
source.cs meta.class.identifier storage.type#22A0A1underline
source.cs meta.method.identifier entity.name.function#22A0A1—
source.cs meta.method-call meta.method, source.cs entity.name.function#22A0A1—
source.cs storage.type#22A0A1—
source.cs meta.method.return-type#22A0A1—
source.cs entity.name.type.namespace#2A1E3A—
Vikkie!!! Theme by Kaleidosium - VS Code Theme