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#444444
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4D4D4D
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#E0E0E0
  • breadcrumb.background#000000
  • breadcrumb.border#444444
  • breadcrumb.focusForeground#E0E0E0
  • breadcrumb.foreground#C0C0C0CC
  • button.background#0E639C
  • button.foreground#FFFFFF
  • button.hoverBackground#1177BB
  • debugToolBar.background#1E1E1E
  • debugToolBar.border#444444
  • dropdown.background#1E1E1E
  • dropdown.border#444444
  • dropdown.foreground#F0F0F0
  • editor.background#000000
  • editor.findMatchBackground#515C6A
  • editor.findMatchHighlightBackground#EA5C0055
  • editor.findRangeHighlightBackground#3A3D4166
  • editor.foreground#D8D8D8
  • editor.hoverHighlightBackground#264F7820
  • editor.lineHighlightBackground#FFFFFF18
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#1E5899
  • editor.selectionHighlightBackground#1E589960
  • editor.wordHighlightBackground#575757B8
  • editor.wordHighlightStrongBackground#004972B8
  • editorBracketMatch.background#0D3A58
  • editorBracketMatch.border#888888
  • editorCursor.foreground#C8C8C8
  • editorError.foreground#F44747
  • editorGroup.border#444444
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#444444
  • editorGutter.addedBackground#587C0C
  • editorGutter.background#000000
  • editorGutter.deletedBackground#94151B
  • editorGutter.modifiedBackground#0C7D9D
  • editorHoverWidget.background#1E1E1E
  • editorHoverWidget.border#444444
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#75BEFF
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#888888
  • editorOverviewRuler.border#444444
  • editorOverviewRuler.errorForeground#F44747
  • editorOverviewRuler.findMatchForeground#D18616
  • editorOverviewRuler.selectionHighlightForeground#A0A0A04D
  • editorOverviewRuler.warningForeground#CCA700
  • editorOverviewRuler.wordHighlightForeground#A0A0A04D
  • editorSuggestWidget.background#1E1E1E
  • editorSuggestWidget.border#444444
  • editorSuggestWidget.selectedBackground#094771
  • editorWarning.foreground#CCA700
  • editorWhitespace.foreground#e3e4e226
  • editorWidget.background#1E1E1E
  • editorWidget.border#444444
  • focusBorder#007ACC
  • foreground#D8D8D8
  • gitDecoration.addedResourceForeground#81B88B
  • gitDecoration.conflictingResourceForeground#FF5A5F
  • gitDecoration.deletedResourceForeground#C74E39
  • gitDecoration.ignoredResourceForeground#8C8C8C
  • gitDecoration.modifiedResourceForeground#E2C08D
  • gitDecoration.untrackedResourceForeground#73C991
  • input.background#1E1E1E
  • input.border#444444
  • input.foreground#C0C0C0
  • input.placeholderForeground#A6A6A6
  • inputOption.activeBorder#007ACC
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#062F4A
  • list.highlightForeground#2AAAFF
  • list.hoverBackground#2A2D2E
  • list.inactiveSelectionBackground#37373D
  • list.inactiveSelectionForeground#C0C0C0
  • menu.background#1E1E1E
  • menu.border#444444
  • menu.foreground#C0C0C0
  • menu.selectionBackground#094771
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#3C3C3C
  • menubar.selectionBackground#FFFFFF12
  • menubar.selectionForeground#C0C0C0
  • notificationCenter.border#444444
  • notifications.background#1E1E1E
  • notifications.border#444444
  • notificationToast.border#444444
  • panel.background#000000
  • panel.border#444444
  • panelTitle.activeBorder#007ACC
  • panelTitle.activeForeground#E7E7E7
  • panelTitle.inactiveForeground#E7E7E799
  • peekView.border#007ACC
  • peekViewEditor.background#001F33
  • peekViewEditorGutter.background#001F33
  • peekViewResult.background#1E1E1E
  • peekViewResult.selectionBackground#3399FF33
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1E1E1E
  • peekViewTitleDescription.foreground#C0C0C0B3
  • peekViewTitleLabel.foreground#FFFFFF
  • progressBar.background#0E70C0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#BFBFBF80
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#64646480
  • selection.background#1E5899
  • settings.dropdownBorder#444444
  • settings.numberInputBorder#444444
  • settings.textInputBorder#444444
  • sideBar.background#000000
  • sideBar.border#444444
  • sideBar.foreground#D8D8D8
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#444444
  • sideBarSectionHeader.foreground#BBBBBB
  • statusBar.background#000000
  • statusBar.border#444444
  • statusBar.debuggingBackground#CC6633
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#DDDDDD
  • statusBar.noFolderBackground#000000
  • statusBarItem.remoteBackground#007ACC
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#000000
  • tab.activeBorder#444444
  • tab.activeBorderTop#FF4D4D
  • tab.activeForeground#FFFFFF
  • tab.border#444444
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#2472C8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3B8EEA
  • terminal.ansiBrightCyan#29B8DB
  • terminal.ansiBrightGreen#23D18B
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#F14C4C
  • terminal.ansiBrightWhite#E5E5E5
  • terminal.ansiBrightYellow#F5F543
  • terminal.ansiCyan#11A8CD
  • terminal.ansiGreen#0DBC79
  • terminal.ansiMagenta#BC3FBC
  • terminal.ansiRed#CD3131
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E5E510
  • terminal.background#000000
  • terminal.border#444444
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#444444
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#C0C0C099
  • widget.border#444444
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, variable.other.readwrite, support.variable#60D4FF
meta.var.expr variable.other.readwrite, meta.var-single-variable variable.other.readwrite, variable.other.readwrite.alias#88CCFF
meta.binding.pattern variable.object.variable, meta.destructuring variable.other.readwrite, meta.object-binding-pattern-variable variable.object.variable#88CCFF
variable.parameter, meta.parameter#60C8D0italic
meta.import variable.other.readwrite, meta.import variable.other, meta.named-exports variable.other, meta.named-imports variable.other#FF7B86
meta.object-literal.key, meta.object.member meta.object-literal.key, string.unquoted.label#60CCDD
meta.property.object, variable.other.property, variable.other.object.property#70C0FF
entity.name.function, meta.function-call entity.name.function, support.function#70C0FF
comment, punctuation.definition.comment#7ABB65italic
string, punctuation.definition.string#FFC090
constant.character.escape, string source#FFE080
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF5EAC
keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete#FF5EAC
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#CF9FFF
storage, storage.type, storage.modifier#FF5EAC
constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined#CF9FFF
constant.numeric#33FF66
variable.other.constant, variable.other.enummember#DDEEFF
entity.name.function, support.function, meta.function-call.generic#33FF66
keyword.operator#FF5EAC
punctuation#FFFFFF
punctuation.definition.block, punctuation.section.block, meta.brace.curly, meta.brace.square, meta.brace.round#FFEE00
entity.name.type, entity.name.class, support.class, entity.name.type.class#5AF0FF
entity.name.type.interface#5AF0FFitalic
support.type, entity.name.type.parameter, entity.name.type.primitive#5AF0FF
entity.name.namespace, entity.name.module#5AF0FF
meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag#FFC27A
storage.type.function.arrow#FF5EAC
keyword.operator.spread, keyword.operator.rest#FF5EAC
keyword.operator.optional#FFC27A
keyword.operator.logical.nullish#FFC27A
entity.name.type.alias.ts, entity.name.type.alias.tsx#5AF0FF
support.type.utility.ts#5AF0FF
meta.type.parameters, punctuation.definition.typeparameters#FFC27A
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc#7282B4italic
string.quoted.double.block.python, string.quoted.single.block.python#7ABB65italic
meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#FFC27A
variable.language.special.self.python, variable.language.special.cls.python#CF9FFFitalic
support.function.builtin.python#33FF66
support.type.python, support.class.python#5AF0FF
variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python#5AF0FF
punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python#FF5EAC
support.variable.magic.python#DDEEFF
keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go#CF9FFF
entity.name.package.go#5AF0FF
support.function.builtin.go#33FF66
support.type.predeclared.go, support.type.builtin.go#5AF0FF
constant.language.go#CF9FFF
string.quoted.raw.go#FFE080
keyword.operator.address.go, keyword.operator.pointer.go#FF5EAC
support.type.property-name.json, meta.structure.dictionary.key.json string#5AF0FF
meta.structure.dictionary.value.json string, string.quoted.double.json#FFC090
meta.structure.dictionary.value.json constant.numeric, constant.numeric.json#33FF66
constant.language.json#CF9FFF
punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json#FFEE00
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#CF9FFFbold
markup.heading.1.markdown, entity.name.section.markdown heading.1#FF5EACbold
markup.heading.2.markdown#CF9FFFbold
markup.heading.3.markdown#5AF0FFbold
markup.bold, punctuation.definition.bold#FFC27Abold
markup.italic, punctuation.definition.italic#FFC090italic
markup.inline.raw.string, markup.fenced_code.block#33FF66
markup.underline.link, string.other.link#5AF0FF
meta.link.inline.markdown#FFC27A
markup.quote, punctuation.definition.blockquote.markdown#7282B4italic
meta.separator.markdown#555870
string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator#FF3333
punctuation.definition.group.regexp, meta.group.regexp#FFC27A
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#33FF66
keyword.operator.quantifier.regexp#FF5EAC
support.function.builtin.shell, entity.name.command.shell#33FF66
variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell#5AF0FF
string.unquoted.argument.shell#FFC27A
comment.line.shebang#FF5EACitalic
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#FFC27A
entity.name.function.macro.rust, support.function.macro.rust#33FF66
meta.attribute.rust, entity.name.function.attribute.rust#FFE080
storage.modifier.unsafe.rust#FF3333
invalid.illegal, invalid.deprecated#FF3333
support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts#58C7FFbold
entity.name.tag.html, entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx#7AA2FF
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag#82C7FF
entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name#8FEFAF
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#F5C14B
meta.tag.sgml.doctype, entity.name.tag.doctype#8899CC
entity.other.attribute-name.id, entity.other.attribute-name.id.html#F0C070
entity.other.attribute-name.class, entity.other.attribute-name.class.html#92D6FF
entity.name.selector, meta.selector#A9F0B3
entity.other.attribute-name.id.css, meta.selector entity.other.attribute-name.id#F0C070
entity.other.attribute-name.class.css, meta.selector entity.other.attribute-name.class#92D6FF
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#FF91C4
support.type.vendored.property-name, support.type.property-name.css, meta.property-name#8FDEFF
support.constant.property-value, meta.property-value#F7C68A
keyword.other.unit#A9F0B3
constant.other.color.rgb-value.hex.css, constant.other.color#FFE380
variable.css, variable.argument.css, variable.other.less, variable.scss, variable.sass#C89CFF
keyword.control.at-rule, meta.at-rule keyword.control#FF8EC6
keyword.other.important.css#FF7A7Abold
entity.name.function.scss, support.function.misc.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.mixin.scss#7EF0A6