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.activeBackground#ffffff15
  • activityBar.activeBorder#333
  • activityBar.activeFocusBorder#333
  • activityBar.background#1b1b1b
  • activityBar.foreground#AE81FFea
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#202020
  • activityBarBadge.foreground#AE81FF
  • badge.background#333
  • badge.foreground#6AA092
  • breadcrumb.activeSelectionForeground#AE81FF
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#AE81FFea
  • breadcrumbPicker.background#202020
  • button.background#333
  • editor.background#202020
  • editor.findMatchBackground#404040c2
  • editor.findMatchHighlightBackground#404040c2
  • editor.foldBackground#1b1b1b
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#40404035
  • editor.selectionBackground#404040c2
  • editor.selectionHighlightBackground#404040c2
  • editorBracketHighlight.foreground1#eee
  • editorBracketHighlight.foreground2#AE81FF
  • editorBracketHighlight.foreground3#f5f506
  • editorBracketHighlight.foreground4#30d802
  • editorBracketHighlight.foreground5#ff7e7e
  • editorBracketHighlight.foreground6#eee
  • editorGutter.background#20202088
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.focusHighlightForeground#6AA092
  • editorSuggestWidget.foreground#fff
  • editorSuggestWidget.highlightForeground#6AA092
  • editorSuggestWidget.selectedForeground#fff
  • editorSuggestWidget.selectedIconForeground#AE81FF
  • extensionButton.background#333333d9
  • extensionButton.hoverBackground#5454549e
  • extensionButton.separator#5454549e
  • focusBorder#ad81ff35
  • input.background#333
  • input.border#00000000
  • input.foreground#ffffff
  • list.activeSelectionBackground#202020
  • list.activeSelectionForeground#AE81FF
  • list.hoverBackground#333
  • list.inactiveSelectionBackground#333
  • menu.background#202020
  • menu.selectionBackground#333
  • panel.background#202020
  • scrollbarSlider.activeBackground#6AA092
  • scrollbarSlider.hoverBackground#6aa09275
  • settings.checkboxBackground#333
  • settings.dropdownBackground#333
  • settings.focusedRowBackground#33333362
  • settings.focusedRowBorder#ad81ff57
  • settings.numberInputBackground#333
  • settings.settingsHeaderHoverForeground#6AA092
  • settings.textInputBackground#333
  • sideBar.background#202020
  • sideBarTitle.foreground#ffffff
  • statusBar.background#333
  • tab.activeBackground#202020
  • tab.activeBorder#AE81FF
  • tab.inactiveBackground#222
  • terminal.foreground#dbe3e7
  • titleBar.activeBackground#202020
  • toolbar.activeBackground#ad81ff35
  • toolbar.hoverBackground#ad81ff29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676f7d
string, string.template#6AA092
constant.numeric#FC3E83C0
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#abb2bf
constant.language#FC3E83C0
constant.character, constant.other#FC3E83C0
variable.language#FC3E83C0
keyword, keyword.operator.logical, keyword.operator.constructor#FC3E83C0
keyword.operator#CFCFC2A1
storage#AE81FF
storage.type#AE81FF
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#FFCB6B
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#CFCFCF
variable.other, variable.other.property, variable.other.block#CFCFCF
entity.other.inherited-class#CFCFCF
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#FFCB6B
variable.parameter, entity.name.variable.parameter, parameter.variable#FC3E83C0italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js#FC3E83C0
entity.name.tag.class, entity.name.tag.id, entity.other.attribute-name.class.css#FFCB6B
entity.other.attribute-name#AE81FF
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#FFCB6B
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#AE81FF
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#FFCB6B
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#FFCB6B
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#6AA092
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#F8F8F0
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#98c379
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#e06c75bold
markup.quote.markdown#98c379
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
ThemeDatabase All Themes by enes ozturk - VS Code Theme