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#000000
  • activityBar.border#1a0010
  • activityBar.foreground#ff00dd
  • activityBar.inactiveForeground#337788
  • activityBarBadge.background#00ddff
  • activityBarBadge.foreground#000000
  • button.background#aa0088
  • button.foreground#ffffff
  • button.hoverBackground#cc00aa
  • diffEditor.insertedTextBackground#00ddee20
  • diffEditor.removedTextBackground#ff000020
  • dropdown.background#3d0030
  • dropdown.border#1a1428
  • dropdown.foreground#55aacc
  • editor.background#000000
  • editor.foreground#ccc0d0
  • editor.inactiveSelectionBackground#aa008855
  • editor.lineHighlightBackground#330020
  • editor.lineHighlightBorder#33002000
  • editor.selectionBackground#aa0088AA
  • editorBracketHighlight.foreground1#00ddff
  • editorBracketHighlight.foreground2#00ddee
  • editorBracketHighlight.foreground3#33eeff
  • editorBracketHighlight.foreground4#ffbb00
  • editorBracketHighlight.foreground5#ff00dd
  • editorBracketHighlight.foreground6#ffffff
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorCursor.foreground#ff66ff
  • editorGroupHeader.noTabsBackground#180010
  • editorGroupHeader.tabsBackground#180010
  • editorGroupHeader.tabsBorder#0f0a1c
  • editorGutter.background#000000
  • editorHoverWidget.background#3d0030
  • editorHoverWidget.border#008899
  • editorIndentGuide.activeBackground#1a1428
  • editorIndentGuide.background#0f0a1c
  • editorLineNumber.activeForeground#ff00dd
  • editorLineNumber.foreground#800050
  • editorLink.activeForeground#66ccff
  • editorSuggestWidget.background#3d0030
  • editorSuggestWidget.border#008899
  • editorSuggestWidget.selectedBackground#880066
  • editorWhitespace.foreground#0f0a1c80
  • editorWidget.background#3d0030
  • editorWidget.border#008899
  • editorWidget.foreground#ccc0d0
  • gitDecoration.conflictingResourceForeground#ff8800
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#4a4550
  • gitDecoration.modifiedResourceForeground#ffbb00
  • gitDecoration.untrackedResourceForeground#00ddee
  • input.background#3d0030
  • input.border#1a1428
  • input.foreground#55aacc
  • input.placeholderForeground#4a4550
  • list.activeSelectionBackground#880066
  • list.activeSelectionForeground#66ffff
  • list.focusBackground#880066
  • list.focusForeground#66ffff
  • list.highlightForeground#ff00dd
  • list.hoverBackground#660040
  • list.hoverForeground#33eeff
  • list.inactiveSelectionBackground#2a2038
  • list.inactiveSelectionForeground#33eeff
  • notificationCenter.border#008899
  • notificationCenterHeader.background#2a0020
  • notifications.background#3d0030
  • notifications.border#008899
  • notifications.foreground#55aacc
  • panel.background#000000
  • panel.border#1a1428
  • panelTitle.activeBorder#00ddff
  • panelTitle.activeForeground#00ddff
  • panelTitle.inactiveForeground#4a4550
  • scrollbarSlider.activeBackground#008899CC
  • scrollbarSlider.background#2a203880
  • scrollbarSlider.hoverBackground#3a3048AA
  • sideBar.background#180010
  • sideBar.border#4d0030
  • sideBar.foreground#ccc0d0
  • sideBarSectionHeader.background#2a0020
  • sideBarSectionHeader.foreground#00bbcc
  • sideBarTitle.foreground#00ddff
  • statusBar.background#180010
  • statusBar.border#aa0088
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#0088ff
  • statusBar.noFolderBackground#180010
  • statusBar.noFolderForeground#0088ff
  • statusBarItem.activeBackground#3a3048
  • statusBarItem.hoverBackground#2a2038
  • statusBarItem.prominentBackground#3a3048
  • statusBarItem.prominentHoverBackground#2a2038
  • tab.activeBackground#2a0020
  • tab.activeBorder#00ddff
  • tab.activeBorderTop#00ddff
  • tab.activeForeground#ff33ee
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#800050
  • tab.unfocusedActiveBorder#2a2038
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00bbcc
  • terminal.ansiBrightBlack#2a2530
  • terminal.ansiBrightBlue#00ddff
  • terminal.ansiBrightCyan#33eeff
  • terminal.ansiBrightGreen#33eeff
  • terminal.ansiBrightMagenta#ff00dd
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffbb00
  • terminal.ansiCyan#00ddff
  • terminal.ansiGreen#00ddee
  • terminal.ansiMagenta#ff00dd
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffbb00
  • terminal.background#000000
  • terminal.foreground#ccc0d0
  • textLink.activeForeground#66ccff
  • textLink.foreground#33aaff
  • titleBar.activeBackground#180010
  • titleBar.activeForeground#ccc0d0
  • titleBar.border#0f0a1c
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#4a4550

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a9299italic
comment.block.documentation#6a6570italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.conditional, keyword.control.loop, keyword.other#ff00ddbold
storage, storage.type, storage.modifier#aa00ffbold
string.quoted.docstring, comment.block.documentation.python#8aa5aaitalic
string, string.quoted, string.template#00ffee
string.quoted.double punctuation.definition.string, string.quoted.single punctuation.definition.string, string.template punctuation.definition.string#00ffee
constant.character.escape, string constant.character.escape#66ffff
punctuation.definition.template-expression, meta.template.expression#33eeff
constant.numeric, constant.language.numeric#ff8800
constant.language.boolean, constant.language.null, constant.language.undefined#ffaa00
constant, constant.other, variable.other.constant#ffaa00
variable, variable.other, variable.other.readwrite, variable.other.object#e8e0f0
variable.other.property, variable.other.member, meta.object.member, support.variable.property#ccc0d0
variable.language, variable.language.this, variable.language.super#ff5522bold
entity.name.function, meta.function-call entity.name.function, support.function#33aaff
meta.function-call, variable.function#0088ff
meta.method-call entity.name.function, entity.name.method#33aaff
entity.name.class, entity.name.type.class, support.class#ff33eebold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#aa00ff
entity.name.type.interface, entity.other.inherited-class#cc33ff
entity.name.type.enum#8800cc
variable.parameter, meta.function.parameters variable, meta.parameters variable#e8e0f0italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise#ff3311
keyword.operator.assignment#00ddff
punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens, meta.brace.round, meta.brace.square, meta.brace.curly#9a95a0
punctuation.separator, punctuation.terminator, punctuation.separator.comma, punctuation.separator.period, meta.delimiter#6a6570
entity.name.tag, meta.tag#ff00dd
entity.other.attribute-name, meta.tag entity.other.attribute-name#0088ff
meta.object-literal.key, meta.object.member, support.type.property-name#ccc0d0
entity.name.function.decorator, meta.decorator, punctuation.decorator#ff8800
storage.type.annotation, punctuation.definition.annotation#ffdd00
entity.name.namespace, entity.name.module, support.other.namespace#8800cc
entity.name.label#ffdd00
string.regexp, constant.character.regexp#ff8800
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00ddff
support.type.property-name.css#ccc0d0
support.constant.property-value.css, constant.other.color.css#ffaa00
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#ccc0d0
markup.heading, entity.name.section.markdown#ff33eebold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link.markdown#33aaff
markup.inline.raw, markup.fenced_code#00ddff
variable.language.special.self.python, variable.parameter.function.language.special.self.python#ff5522bold
entity.name.function.decorator.python#ff8800
support.function.magic.python#ff00dd
variable.other.readwrite.alias, meta.import variable.other, meta.export variable.other#e8e0f0
entity.name.type.parameter#00bbccitalic
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#ff33eebold
invalid, invalid.illegal#ffffff