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#0E0E0E
  • activityBar.border#00000000
  • activityBar.foreground#EEEEEE
  • activityBar.inactiveForeground#606060
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#404040
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#DCDCDC
  • breadcrumb.background#141414
  • breadcrumb.focusForeground#DCDCDC
  • breadcrumb.foreground#CACACACC
  • button.background#0E639C
  • button.foreground#FFFFFF
  • button.hoverBackground#1177BB
  • dropdown.background#1A1A1A
  • dropdown.border#333333
  • dropdown.foreground#EEEEEE
  • editor.background#141414
  • editor.findMatchBackground#4A5460
  • editor.findMatchHighlightBackground#EA5C0050
  • editor.findRangeHighlightBackground#35383C66
  • editor.foreground#CECECE
  • editor.hoverHighlightBackground#1B6EA820
  • editor.lineHighlightBackground#FFFFFF10
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1B6EA8
  • editor.selectionHighlightBackground#1B6EA840
  • editor.wordHighlightBackground#4E4E4EB0
  • editor.wordHighlightStrongBackground#0A3C5AB0
  • editorBracketMatch.background#153550
  • editorBracketMatch.border#7A7A7A
  • editorCursor.foreground#D0D0D0
  • editorError.foreground#E84040
  • editorGroup.border#282828
  • editorGroupHeader.tabsBackground#0E0E0E
  • editorGutter.addedBackground#4E7010
  • editorGutter.background#141414
  • editorGutter.deletedBackground#881414
  • editorGutter.modifiedBackground#0A6E8E
  • editorIndentGuide.activeBackground1#606060
  • editorIndentGuide.background1#383838
  • editorInfo.foreground#60ADEF
  • editorLineNumber.activeForeground#BCBCBC
  • editorLineNumber.foreground#5A6370
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#E84040
  • editorOverviewRuler.findMatchForeground#C07C10
  • editorOverviewRuler.selectionHighlightForeground#9090904D
  • editorOverviewRuler.warningForeground#C09A00
  • editorOverviewRuler.wordHighlightForeground#9090904D
  • editorWarning.foreground#C09A00
  • editorWhitespace.foreground#e3e4e222
  • focusBorder#007ACC
  • foreground#CECECE
  • gitDecoration.addedResourceForeground#78AA80
  • gitDecoration.conflictingResourceForeground#EE5454
  • gitDecoration.deletedResourceForeground#B84438
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#D4B47A
  • gitDecoration.untrackedResourceForeground#68BA80
  • input.background#1A1A1A
  • input.border#333333
  • input.foreground#CECECE
  • input.placeholderForeground#9A9A9A
  • inputOption.activeBorder#007ACC
  • list.activeSelectionBackground#0E4A70
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#0A2A44
  • list.highlightForeground#28A0F0
  • list.hoverBackground#222426
  • list.inactiveSelectionBackground#2E2E33
  • list.inactiveSelectionForeground#CCCCCC
  • menu.background#1A1A1A
  • menu.foreground#CCCCCC
  • menu.selectionBackground#0E4A70
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#333333
  • menubar.selectionBackground#FFFFFF10
  • menubar.selectionForeground#CCCCCC
  • panel.background#0E0E0E
  • panel.border#252525
  • panelTitle.activeBorder#007ACC
  • panelTitle.activeForeground#DDDDDD
  • panelTitle.inactiveForeground#DDDDDD99
  • peekView.border#007ACC
  • peekViewEditor.background#0A1C2E
  • peekViewEditorGutter.background#0A1C2E
  • peekViewResult.background#1A1A1A
  • peekViewResult.selectionBackground#2E88EE33
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#1A1A1A
  • peekViewTitleDescription.foreground#CACACAB3
  • peekViewTitleLabel.foreground#FFFFFF
  • progressBar.background#0E70C0
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#B0B0B080
  • scrollbarSlider.background#70707066
  • scrollbarSlider.hoverBackground#60606080
  • selection.background#1B6EA8
  • sideBar.background#0E0E0E
  • sideBar.border#252525
  • sideBar.foreground#CACACA
  • sideBarSectionHeader.background#0E0E0E
  • sideBarSectionHeader.border#252525
  • sideBarSectionHeader.foreground#AAAAAA
  • statusBar.background#0A0A0A
  • statusBar.border#252525
  • statusBar.debuggingBackground#B85A28
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.remoteBackground#007ACC
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#141414
  • tab.activeBorderTop#007ACC
  • tab.activeForeground#F0F0F0
  • tab.border#00000000
  • tab.inactiveBackground#0E0E0E
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#2272C8
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#3888E8
  • terminal.ansiBrightCyan#26B4D8
  • terminal.ansiBrightGreen#20C880
  • terminal.ansiBrightMagenta#CC6CD0
  • terminal.ansiBrightRed#EE4848
  • terminal.ansiBrightWhite#DCDCDC
  • terminal.ansiBrightYellow#EDED44
  • terminal.ansiCyan#10A4C8
  • terminal.ansiGreen#0CB870
  • terminal.ansiMagenta#B03CB0
  • terminal.ansiRed#C42E2E
  • terminal.ansiWhite#DCDCDC
  • terminal.ansiYellow#DADA0E
  • terminal.background#141414
  • terminal.foreground#CECECE
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#CCCCCC99
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E9E4Ditalic
string, punctuation.definition.string#D4A07A
constant.character.escape, string source#C8AE6A
keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete#5BA0D0
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#B880C0
storage, storage.type, storage.modifier#5BA0D0
constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined#5BA0D0
variable, variable.other.readwrite, support.variable#8DCBF4
meta.object-literal.key, support.type.property-name, meta.object.member#8DCBF4
variable.parameter, meta.parameter#8DCBF4italic
variable.other.constant, variable.other.enummember#42B4F4
entity.name.function, support.function, meta.function-call.generic#D8D490
constant.numeric#A8C898
punctuation, keyword.operator#C0C0C0
entity.name.type, entity.name.class, support.class, entity.name.type.class#42C0A8
entity.name.type.interface#42C0A8italic
support.type, entity.name.type.parameter, entity.name.type.primitive#42C0A8
entity.name.namespace, entity.name.module#42C0A8
meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag#B880C0
entity.name.tag, meta.tag punctuation.definition.tag#E87070
entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name#8DCBF4
string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator#C86060
entity.name.selector, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, meta.selector#C8A860
support.type.vendored.property-name, support.type.property-name.css, meta.property-name#8DCBF4
support.constant.property-value, keyword.other.unit#D4A07A
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#42C0A8bold
markup.bold, punctuation.definition.bold#D8D490bold
markup.italic, punctuation.definition.italic#D4A07Aitalic
markup.inline.raw.string, markup.fenced_code.block#D4A07A
markup.underline.link, string.other.link#5BA0D0
string.quoted.double.block.python, string.quoted.single.block.python#5E9E4Ditalic
meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#B880C0
variable.language.special.self.python, variable.language.special.cls.python#5BA0D0italic
support.function.builtin.python#D8D490
support.type.python, support.class.python#42C0A8
variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python#42C0A8
punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python#B880C0
support.variable.magic.python#42B4F4
support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts#42C0A8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#B880C0
entity.name.type.alias.ts, entity.name.type.alias.tsx#42C0A8
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc#5E9E4Ditalic
support.type.utility.ts#42C0A8
keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go#B880C0
entity.name.package.go#42C0A8
support.function.builtin.go#D8D490
support.type.predeclared.go, support.type.builtin.go#42C0A8
constant.language.go#5BA0D0
string.quoted.raw.go#C8A860
keyword.operator.address.go, keyword.operator.pointer.go#C0C0C0
invalid.illegal, invalid.deprecated#E84040
Vibe Black by mhdstk - VS Code Theme