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.activeBorder
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) activityBar.background
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) activityBarBadge.background
#EF6B73 RGB(239, 107, 115) RGBA(239, 107, 115, 1) badge.background
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) badge.foreground
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) button.background
#EF6B73 RGB(239, 107, 115) RGBA(239, 107, 115, 1) button.secondaryBackground
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) checkbox.background
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) checkbox.foreground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) descriptionForeground
#D0D0C5 RGB(208, 208, 197) RGBA(208, 208, 197, 1) dropdown.background
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) dropdown.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) dropdown.listBackground
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) editor.background
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) editor.lineHighlightBackground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) editor.selectionBackground
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) editor.wordHighlightBackground
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) editorBracketPairGuide.activeBackground1
#FF0000 RGB(255, 0, 0) RGBA(255, 0, 0, 1) editorGroup.border
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) editorGroup.dropBackground
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) editorGroup.emptyBackground
797A7A — — editorGroupHeader.border
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) editorGroupHeader.noTabsBackground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) editorGroupHeader.tabsBackground
#7C7B7B RGB(124, 123, 123) RGBA(124, 123, 123, 1) editorLineNumber.activeForeground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) editorLineNumber.foreground
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) editorSuggestWidget.background
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) editorSuggestWidget.focusHighlightForeground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) editorSuggestWidget.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) editorSuggestWidget.highlightForeground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) editorSuggestWidget.selectedBackground
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) editorWidet.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) editorWidget.background
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) editorWidget.border
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) errorForeground
#EF6B73 RGB(239, 107, 115) RGBA(239, 107, 115, 1) focusBorder
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) foreground
#D0D0C5 RGB(208, 208, 197) RGBA(208, 208, 197, 1) icon.foreground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) input.background
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) list.activeSelectionBackground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) list.activeSelectionIconForeground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) list.dropBackground
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) list.hoverBackground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) list.inactiveSelectionBackground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) progressBar.background
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) sash.hoverBorder
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) scrollbarSlider.background
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) scrollbarSlider.hoverBackground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) searchEditor.findMatchBackground
#FF0000 RGB(255, 0, 0) RGBA(255, 0, 0, 1) selection.background
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) sideBar.background
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) sideBar.dropBackground
#A2AABCBE RGB(162, 170, 188) RGBA(162, 170, 188, 0.745) sideBar.foreground
#D0D0C5 RGB(208, 208, 197) RGBA(208, 208, 197, 1) sideBarSectionHeader.foreground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) sideBarTitle.foreground
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) statusBar.background
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) statusBar.foreground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) tab.activeBorder
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) tab.border
#807E7E RGB(128, 126, 126) RGBA(128, 126, 126, 1) tab.hoverBackground
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) tab.hoverForeground
#959696 RGB(149, 150, 150) RGBA(149, 150, 150, 1) tab.inactiveBackground
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) tab.inactiveForeground
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) titleBar.activeBackground
#797A7A RGB(121, 122, 122) RGBA(121, 122, 122, 1) titleBar.activeForeground
#FFFFFF RGB(255, 255, 255) RGBA(255, 255, 255, 1) titleBar.inactiveBackground
#7C7B7B RGB(124, 123, 123) RGBA(124, 123, 123, 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
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) comment.block
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) comment.block.documentation
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) comment.line
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) constant
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) constant.character
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.character.escape
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) constant.numeric
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.numeric.integer
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.numeric.float
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.numeric.hex
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.numeric.octal
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) constant.other
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) constant.other.placeholder
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) entity
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.class
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.function
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) entity.name.method
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.namespace
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.section
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.selector
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.tag
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) entity.name.type
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.type.enum
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.type.interface
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.name.type.struct
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) entity.other
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) entity.other.attribute-name
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) entity.other.inherited-class
#D0D0C5 RGB(208, 208, 197) RGBA(208, 208, 197, 1) invalid
#FF6347 RGB(255, 99, 71) RGBA(255, 99, 71, 1) invalid.deprecated
#FF6347 RGB(255, 99, 71) RGBA(255, 99, 71, 1) invalid.illegal
#FF6347 RGB(255, 99, 71) RGBA(255, 99, 71, 1) keyword
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.control
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) keyword.control.flow
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) keyword.operator
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.operator.new
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.operator.assignment
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.operator.arithmetic
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.operator.logical
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) keyword.other
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) markup
#EEFFFF RGB(238, 255, 255) RGBA(238, 255, 255, 1) markup.bold
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) markup.changed
#C36AFF RGB(195, 106, 255) RGBA(195, 106, 255, 1) markup.deleted
#EF6B73 RGB(239, 107, 115) RGBA(239, 107, 115, 1) markup.heading
#D0D0C5 RGB(208, 208, 197) RGBA(208, 208, 197, 1) markup.inline.raw
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) markup.inserted
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) markup.italic
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) markup.raw
#EEFFFF RGB(238, 255, 255) RGBA(238, 255, 255, 1) markup.underline
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) markup.underline.link
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) meta
#A2AABC RGB(162, 170, 188) RGBA(162, 170, 188, 1) meta.function-call
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) meta.tag
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.definition.bracket
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.definition.comment
#B3B3AE RGB(179, 179, 174) RGBA(179, 179, 174, 1) punctuation.definition.string.begin
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.definition.string.end
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.separator
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.separator.continuation
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) punctuation.terminator
#FFFFFE RGB(255, 255, 254) RGBA(255, 255, 254, 1) storage
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) storage.modifier
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) storage.type
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) string
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.interpolated
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.other
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.quoted
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.quoted.double
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.quoted.other
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.quoted.single
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.quoted.triple
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.regexp
#5CCFE6 RGB(92, 207, 230) RGBA(92, 207, 230, 1) string.template
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) string.unquoted
#FFA60A RGB(255, 166, 10) RGBA(255, 166, 10, 1) support
#E5FA07 RGB(229, 250, 7) RGBA(229, 250, 7, 1) support.class
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) support.constant
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1) support.function
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) support.other
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) support.type
#E1E6E1 RGB(225, 230, 225) RGBA(225, 230, 225, 1) support.type.primitive
#E1E6E1 RGB(225, 230, 225) RGBA(225, 230, 225, 1) support.type.property-name
#E1E6E1 RGB(225, 230, 225) RGBA(225, 230, 225, 1) variable
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) variable.function
#FFF60A RGB(255, 246, 10) RGBA(255, 246, 10, 1) variable.language
#EF6B73 RGB(239, 107, 115) RGBA(239, 107, 115, 1) variable.name
#CBFD03 RGB(203, 253, 3) RGBA(203, 253, 3, 1) variable.other
#61DCF5 RGB(97, 220, 245) RGBA(97, 220, 245, 1) variable.other.constant
#61DCF5 RGB(97, 220, 245) RGBA(97, 220, 245, 1) variable.other.property
#61DCF5 RGB(97, 220, 245) RGBA(97, 220, 245, 1) variable.other.readwrite
#61DCF5 RGB(97, 220, 245) RGBA(97, 220, 245, 1) variable.parameter
#C3A6FF RGB(195, 166, 255) RGBA(195, 166, 255, 1)