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.activeBorder#4E1A82
  • activityBar.background#D1D1D1
  • activityBar.dropBorder#4E1A82
  • activityBar.foreground#4E1A82
  • activityBar.inactiveForeground#9F8AB4
  • activityBarBadge.background#99FF33
  • activityBarBadge.foreground#000000
  • activityBarTop.activeBorder#4E1A82
  • activityBarTop.dropBorder#4E1A82
  • activityBarTop.foreground#4E1A82
  • activityBarTop.inactiveForeground#9F8AB4
  • badge.background#99FF33
  • badge.foreground#000000
  • button.background#4E1A82
  • button.foreground#FFFFFF
  • button.hoverBackground#3F1569
  • button.secondaryBackground#333333
  • button.secondaryForeground#E0E0E0
  • button.secondaryHoverBackground#1A1A1A
  • editor.background#F0F0F0
  • editor.findMatchBackground#E1C3FF
  • editor.findMatchHighlightBackground#99FF3340
  • editor.foldBackground#94949440
  • editor.foreground#1A1A1A
  • editor.lineHighlightBorder#E1C3FF
  • editor.rangeHighlightBackground#99FF3340
  • editor.selectionBackground#E1C3FF
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#E0E0E0
  • editorLineNumber.activeForeground#7B29CD
  • editorLineNumber.foreground#A3A3A3
  • editorWidget.background#E0E0E0
  • editorWidget.border#6C24B4
  • focusBorder#6C24B4
  • foreground#1A1A1A
  • keybindingLabel.border#9933FF
  • keybindingLabel.bottomBorder#E1C3FF
  • list.activeSelectionBackground#4E1A82
  • list.hoverBackground#E1C3FF
  • list.inactiveSelectionBackground#CBB0E6
  • menu.background#E0E0E0
  • menu.border#6C24B4
  • menu.separatorBackground#6C24B4
  • minimap.findMatchHighlight#99FF33
  • minimap.selectionHighlight#E1C3FF
  • panel.border#9F8AB4
  • panelTitle.activeBorder#9933FF
  • pickerGroup.border#6C24B4
  • pickerGroup.foreground#6C24B4
  • sideBar.background#E0E0E0
  • sideBar.border#9F8AB4
  • sideBarSectionHeader.foreground#4E1A82
  • statusBar.background#6C24B4
  • statusBar.debuggingBackground#6CB424
  • statusBar.noFolderBackground#9F8AB4
  • tab.activeBorderTop#9933FF
  • tab.border#BDBDBD
  • tab.dragAndDropBorder#9933FF
  • tab.hoverBackground#D1D1D1
  • tab.inactiveBackground#E0E0E0
  • textPreformat.background#F0F0F0
  • textPreformat.foreground#6CB424
  • titleBar.activeBackground#D1D1D1
  • titleBar.activeForeground#4E1A82
  • titleBar.border#9F8AB4
  • widget.border#4E1A82

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.bold#FC9630bold
markup.italic#FC9630italic
markup.strikethroughstrikethrough
markup.underlineunderline
markup.inserted#20A820
markup.deleted#A82020
markup.changed#2020A8
invalid#FC3030
comment, punctuation.definition.comment#949494italic
meta.preprocessor, keyword.operator, punctuation.accessor, punctuation.definition, punctuation.math, punctuation.other, punctuation.section, punctuation.separator, punctuation.terminator, storage.type.function.arrow#595959
constant.character, constant.language, constant.numeric, constant.other, punctuation.definition.bold, punctuation.separator.pointer-access#A08020
punctuation.definition.string, string, punctuation.definition.quote#80A020
entity.name.section, markup.heading, heading, punctuation.definition.heading#50C828bold
constant.other.caps, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.declaration, keyword.struct#40A020
entity.name.tag, entity.name.variable.event#20A040
constant.character.math, entity.name.variable, entity.other.attribute-name, markup.inline, meta.attribute, meta.function-call.arguments, meta.member, meta.object.member, meta.property-value, punctuation.definition.constant.math, storage.modifier.import, support.class.math, support.type.property-name, variable#2080A0
entity.name.variable.parameter, meta.parameter.initialization, variable.parameter#2850C8italic
constant.other.general.math, entity.name.function, keyword.operator.sizeof, meta.function-call.generic, support.function#5028C8
keyword.control, keyword.operator.delete, keyword.operator.expression.new, keyword.operator.new, keyword.other, keyword.other.type, keyword.type, punctuation.definition.directive, storage.modifier, storage.type.modifier, storage.type#A02040