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#f9826c
  • activityBar.background#1C2128
  • activityBar.foreground#CDD9E5
  • activityBarBadge.background#4184E4
  • badge.background#373E47
  • badge.foreground#ADBAC7
  • button.background#255AB2
  • button.foreground#CDD9E5
  • debugToolBar.background#2D333B
  • dropdown.background#373E47
  • dropdown.listBackground#2D333B
  • editor.background#22272e
  • editor.lineHighlightBackground#22272E
  • editorGroupHeader.tabsBackground#1C2128
  • editorIndentGuide.activeBackground#636E7B
  • editorIndentGuide.background#373E47
  • editorLineNumber.foreground#545D68
  • editorSuggestWidget.background#22272E
  • editorSuggestWidget.border#444C56
  • editorSuggestWidget.foreground#ADBAC7
  • editorSuggestWidget.highlightForeground#539BF5
  • editorSuggestWidget.selectedBackground#2D333B
  • editorWidget.background#22272E
  • focusBorder#444C56
  • foreground#ADBAC7
  • gitDecoration.ignoredResourceForeground#768390
  • input.background#373E47
  • input.foreground#ffffff
  • input.placeholderForeground#909DAB
  • list.activeSelectionBackground#2D333B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#22272E
  • list.highlightForeground#539BF5
  • list.hoverBackground#2D333B
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2D333B
  • panelTitle.activeBorder#f9826c
  • panelTitle.inactiveForeground#545D68
  • peekView.border#539BF5
  • peekViewEditor.background#22272E
  • pickerGroup.border#22272E
  • pickerGroup.foreground#539BF5
  • progressBar.background#539BF5
  • quickInput.background#1C2128
  • scrollbar.shadow#101e31
  • scrollbarSlider.activeBackground#545D68
  • scrollbarSlider.background#373E47
  • scrollbarSlider.hoverBackground#444C56
  • settings.dropdownBackground#373E47
  • settings.focusedRowBackground#2D333B
  • settings.numberInputBackground#373E47
  • settings.textInputBackground#373E47
  • sideBar.background#1C2128
  • statusBar.background#2d333b
  • statusBar.debuggingBackground#539BF5
  • statusBar.debuggingForeground#1C2128
  • statusBar.foreground#ADBAC7
  • statusBar.noFolderBackground#373E47
  • statusBarItem.prominentBackground#2D333B
  • statusBarItem.remoteBackground#316DCA
  • statusBarItem.remoteForeground#CDD9E5
  • symbolIcon.classForeground#6BC46D
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#6BC46D
  • symbolIcon.enumeratorMemberForeground#539BF5
  • symbolIcon.eventForeground#6BC46D
  • symbolIcon.fieldForeground#539BF5
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#539BF5
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#539BF5
  • tab.activeBackground#22272e
  • tab.inactiveBackground#1C2128
  • textBlockQuote.border#539BF5
  • textLink.activeForeground#4184E4
  • textLink.foreground#539BF5
  • titleBar.activeBackground#2d333b
  • titleBar.activeForeground#ADBAC7
  • welcomePage.buttonBackground#2D333B
  • welcomePage.buttonHoverBackground#22272E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b392f0
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#6CB6FFbold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code#9db1c5
comment#4e5761
variable.other.enummember, meta.enum.declaration, meta.interface, keyword.operator.assignment, keyword.operator.type, punctuation.separator.key-value, meta.object-literal.key, variable.other.object.property, variable.other.property.tsx, constant.numeric.decimal, constant.language.boolean, keyword#6cb6ff
meta.objectliteral, meta.array.literal, meta.var.expr, string.other.link.title.markdown#96D0FF
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, keyword.operator.type.annotation, punctuation.definition.block, punctuation.terminator.statement, meta.object.member, meta.brace.round, punctuation.definition.binding-pattern.array, meta.var.expr, keyword.other.unit.px, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.template.expression, keyword.control.export, meta.property-value, constant.numeric#adbac7
constant.other.placeholder, constant.character.format.placeholder, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name, storage.type.function.arrow#6cb6ff
storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.definition.template-expression, punctuation.definition.keyword, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.import, keyword.control.export#F47067
variable.parameter.function#FF9800
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.name.function, constant.keyword.clojure, support.function#DCBDFB
entity.name.type, meta.brace.square#adbac7
string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template, constant.other.color.rgb-value.hex#96d0ff
entity.name.tag, support.class.component#8ddb8c
punctuation.definition.tag.begin, punctuation.definition.tag.end#6cb6ff
token.info-token#96D0FF
token.warn-token#ffea7f
token.error-token#F47067
token.debug-token#96D0FF
markup.underline.link#CDD9E5
beginning.punctuation.definition.list.markdown#96D0FF
punctuation.definition.list.begin.markdown, entity.name.type.interface, entity.name.type#F69D50
punctuation.definition.metadata.markdown#96D0FF
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#96D0FF