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.
key HEX RGB RGBA activityBar.activeBackground
#313B4C RGB(49, 59, 76) RGBA(49, 59, 76, 1) activityBar.background
#1C222C RGB(28, 34, 44) RGBA(28, 34, 44, 1) activityBar.border
#313B4C RGB(49, 59, 76) RGBA(49, 59, 76, 1) activityBar.dropBorder
#313B4C RGB(49, 59, 76) RGBA(49, 59, 76, 1) editor.background
#2C323D RGB(44, 50, 61) RGBA(44, 50, 61, 1) editor.lineHighlightBackground
#3F434E RGB(63, 67, 78) RGBA(63, 67, 78, 1) editor.selectionBackground
#4A5260 RGB(74, 82, 96) RGBA(74, 82, 96, 1) editor.selectionHighlightBackground
#4A5260 RGB(74, 82, 96) RGBA(74, 82, 96, 1) editorBracketHighlight.foreground1
#DB7868 RGB(219, 120, 104) RGBA(219, 120, 104, 1) editorBracketHighlight.foreground2
#E2BE7F RGB(226, 190, 127) RGBA(226, 190, 127, 1) editorBracketHighlight.foreground3
#83C795 RGB(131, 199, 149) RGBA(131, 199, 149, 1) editorBracketHighlight.foreground4
#62C4CF RGB(98, 196, 207) RGBA(98, 196, 207, 1) editorBracketHighlight.foreground5
#A184C5 RGB(161, 132, 197) RGBA(161, 132, 197, 1) editorBracketHighlight.foreground6
#C07EAC RGB(192, 126, 172) RGBA(192, 126, 172, 1) editorBracketHighlight.unexpectedBracket.foreground
#DB6165 RGB(219, 97, 101) RGBA(219, 97, 101, 1) editorGroupHeader.tabsBackground
#202732 RGB(32, 39, 50) RGBA(32, 39, 50, 1) editorGutter.background
#2C323D RGB(44, 50, 61) RGBA(44, 50, 61, 1) editorLineNumber.foreground
#BFB19BF1 RGB(191, 177, 155) RGBA(191, 177, 155, 0.945) menu.selectionForeground
#7E8BA0 RGB(126, 139, 160) RGBA(126, 139, 160, 1) progressBar.background
#C4BAAAF1 RGB(196, 186, 170) RGBA(196, 186, 170, 0.945) scrollbarSlider.background
#3C4C55D5 RGB(60, 76, 85) RGBA(60, 76, 85, 0.835) scrollbarSlider.hoverBackground
#789090 RGB(120, 144, 144) RGBA(120, 144, 144, 1) sideBar.background
#202732 RGB(32, 39, 50) RGBA(32, 39, 50, 1) sideBar.dropBackground
#789090 RGB(120, 144, 144) RGBA(120, 144, 144, 1) sideBar.foreground
#AEA69AF1 RGB(174, 166, 154) RGBA(174, 166, 154, 0.945) sideBarSectionHeader.background
#2C323D RGB(44, 50, 61) RGBA(44, 50, 61, 1) sideBarSectionHeader.border
#789090 RGB(120, 144, 144) RGBA(120, 144, 144, 1) sideBarSectionHeader.foreground
#789090 RGB(120, 144, 144) RGBA(120, 144, 144, 1) sideBarTitle.foreground
#7E8BA0 RGB(126, 139, 160) RGBA(126, 139, 160, 1) statusBar.background
#1C222C RGB(28, 34, 44) RGBA(28, 34, 44, 1) statusBar.foreground
#6B788F RGB(107, 120, 143) RGBA(107, 120, 143, 1) tab.activeBackground
#2C323D RGB(44, 50, 61) RGBA(44, 50, 61, 1) tab.activeForeground
#7DA2B6 RGB(125, 162, 182) RGBA(125, 162, 182, 1) tab.border
#313B4C RGB(49, 59, 76) RGBA(49, 59, 76, 1) tab.inactiveBackground
#202732 RGB(32, 39, 50) RGBA(32, 39, 50, 1) tab.inactiveForeground
#7E8BA0 RGB(126, 139, 160) RGBA(126, 139, 160, 1)
tokenColors Foregrounds this theme assigns to the token scope catalog. A rule with only a font style is skipped, and a longer matching scope wins. Italic and bold rules are not listed — the preview above shows them in the code.
scope HEX RGB RGBA comment
#ACA2A2 RGB(172, 162, 162) RGBA(172, 162, 162, 1) comment.block
#ACA2A2 RGB(172, 162, 162) RGBA(172, 162, 162, 1) comment.block.documentation
#DB5555 RGB(219, 85, 85) RGBA(219, 85, 85, 1) comment.line
#ACA2A2 RGB(172, 162, 162) RGBA(172, 162, 162, 1) constant
#60C195 RGB(96, 193, 149) RGBA(96, 193, 149, 1) constant.character
#DF6868 RGB(223, 104, 104) RGBA(223, 104, 104, 1) constant.character.escape
#DF6868 RGB(223, 104, 104) RGBA(223, 104, 104, 1) constant.numeric
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) constant.numeric.integer
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) constant.numeric.float
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) constant.numeric.hex
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) constant.numeric.octal
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) constant.other
#D1A9A9 RGB(209, 169, 169) RGBA(209, 169, 169, 1) constant.other.placeholder
#D1A9A9 RGB(209, 169, 169) RGBA(209, 169, 169, 1) entity
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) entity.name
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) entity.name.class
#F7DDB2F3 RGB(247, 221, 178) RGBA(247, 221, 178, 0.953) entity.name.function
#A8C0D8 RGB(168, 192, 216) RGBA(168, 192, 216, 1) entity.name.tag
#A49169 RGB(164, 145, 105) RGBA(164, 145, 105, 1) entity.name.type
#F7DDB2F3 RGB(247, 221, 178) RGBA(247, 221, 178, 0.953) entity.name.type.enum
#F7DDB2F3 RGB(247, 221, 178) RGBA(247, 221, 178, 0.953) entity.name.type.interface
#F7DDB2F3 RGB(247, 221, 178) RGBA(247, 221, 178, 0.953) entity.name.type.struct
#F7DDB2F3 RGB(247, 221, 178) RGBA(247, 221, 178, 0.953) entity.other
#EAA7C1 RGB(234, 167, 193) RGBA(234, 167, 193, 1) entity.other.attribute-name
#95BACD RGB(149, 186, 205) RGBA(149, 186, 205, 1) entity.other.inherited-class
#EAA7C1 RGB(234, 167, 193) RGBA(234, 167, 193, 1) invalid
#E284A8 RGB(226, 132, 168) RGBA(226, 132, 168, 1) invalid.deprecated
#E284A8 RGB(226, 132, 168) RGBA(226, 132, 168, 1) invalid.illegal
#E284A8 RGB(226, 132, 168) RGBA(226, 132, 168, 1) keyword
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.control
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.control.flow
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.operator
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.operator.new
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.operator.assignment
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.operator.arithmetic
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.operator.logical
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) keyword.other
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) markup
#8CD2B2 RGB(140, 210, 178) RGBA(140, 210, 178, 1) markup.heading
#D8C0A8 RGB(216, 192, 168) RGBA(216, 192, 168, 1) markup.italic
#A49169 RGB(164, 145, 105) RGBA(164, 145, 105, 1) markup.quote
#8CD2B2 RGB(140, 210, 178) RGBA(140, 210, 178, 1) meta
#60C195 RGB(96, 193, 149) RGBA(96, 193, 149, 1) meta.tag
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) punctuation.separator
#63AED6 RGB(99, 174, 214) RGBA(99, 174, 214, 1) storage
#DA608E RGB(218, 96, 142) RGBA(218, 96, 142, 1) storage.modifier
#DA608E RGB(218, 96, 142) RGBA(218, 96, 142, 1) storage.type
#F0BF5B RGB(240, 191, 91) RGBA(240, 191, 91, 1) string
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) string.quoted
#A49169 RGB(164, 145, 105) RGBA(164, 145, 105, 1) string.quoted.single
#A49169 RGB(164, 145, 105) RGBA(164, 145, 105, 1) string.template
#D66D6D RGB(214, 109, 109) RGBA(214, 109, 109, 1) support
#60C195 RGB(96, 193, 149) RGBA(96, 193, 149, 1) support.class
#E284A8 RGB(226, 132, 168) RGBA(226, 132, 168, 1) support.constant
#EBA1A1 RGB(235, 161, 161) RGBA(235, 161, 161, 1) support.function
#6EA0BA RGB(110, 160, 186) RGBA(110, 160, 186, 1) support.type
#60C195 RGB(96, 193, 149) RGBA(96, 193, 149, 1) support.type.primitive
#D8C0A8 RGB(216, 192, 168) RGBA(216, 192, 168, 1) support.type.property-name
#60C195 RGB(96, 193, 149) RGBA(96, 193, 149, 1) support.variable
#A49169 RGB(164, 145, 105) RGBA(164, 145, 105, 1) variable
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.function
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.language
#D1A9A9 RGB(209, 169, 169) RGBA(209, 169, 169, 1) variable.name
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.other
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.other.constant
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.other.property
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.other.readwrite
#F0D8C0 RGB(240, 216, 192) RGBA(240, 216, 192, 1) variable.parameter
#97ACC2 RGB(151, 172, 194) RGBA(151, 172, 194, 1)