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#00000000
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4D4D4D
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#E0E0E0
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#E0E0E0
  • breadcrumb.foreground#C0C0C0CC
  • button.background#0E639C
  • button.foreground#FFFFFF
  • button.hoverBackground#1177BB
  • dropdown.background#1E1E1E
  • dropdown.border#3C3C3C
  • dropdown.foreground#F0F0F0
  • editor.background#000000
  • editor.findMatchBackground#515C6A
  • editor.findMatchHighlightBackground#EA5C0055
  • editor.findRangeHighlightBackground#3A3D4166
  • editor.foreground#C0C0C0
  • editor.hoverHighlightBackground#264F7820
  • editor.lineHighlightBackground#FFFFFF0D
  • editor.lineHighlightBorder#00000000
  • 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#2B2B2B
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#587C0C
  • editorGutter.background#000000
  • editorGutter.deletedBackground#94151B
  • editorGutter.modifiedBackground#0C7D9D
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#75BEFF
  • editorLineNumber.activeForeground#C6C6C6
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#F44747
  • editorOverviewRuler.findMatchForeground#D18616
  • editorOverviewRuler.selectionHighlightForeground#A0A0A04D
  • editorOverviewRuler.warningForeground#CCA700
  • editorOverviewRuler.wordHighlightForeground#A0A0A04D
  • editorWarning.foreground#CCA700
  • editorWhitespace.foreground#e3e4e226
  • focusBorder#007ACC
  • foreground#C0C0C0
  • gitDecoration.addedResourceForeground#81B88B
  • gitDecoration.conflictingResourceForeground#FF5A5F
  • gitDecoration.deletedResourceForeground#C74E39
  • gitDecoration.ignoredResourceForeground#8C8C8C
  • gitDecoration.modifiedResourceForeground#E2C08D
  • gitDecoration.untrackedResourceForeground#73C991
  • input.background#1E1E1E
  • input.border#3C3C3C
  • 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.foreground#C0C0C0
  • menu.selectionBackground#094771
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#3C3C3C
  • menubar.selectionBackground#FFFFFF12
  • menubar.selectionForeground#C0C0C0
  • panel.background#000000
  • panel.border#2B2B2B
  • 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
  • sideBar.background#000000
  • sideBar.border#2B2B2B
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#BBBBBB
  • statusBar.background#000000
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#CC6633
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#C0C0C0
  • statusBar.noFolderBackground#000000
  • statusBarItem.remoteBackground#007ACC
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#000000
  • tab.activeBorderTop#FF4D4D
  • tab.activeForeground#FFFFFF
  • tab.border#00000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#808080
  • 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.foreground#C0C0C0
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#C0C0C0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#C0C0C099
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#608B4Eitalic
string, punctuation.definition.string#CE9178
constant.character.escape, string source#D7BA7D
keyword, keyword.control, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.delete#569CD6
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#C586C0
storage, storage.type, storage.modifier#569CD6
constant.language, variable.language.this, variable.language.super, constant.language.boolean, constant.language.null, constant.language.undefined#569CD6
variable, variable.other.readwrite, support.variable#88C8F0
meta.object-literal.key, support.type.property-name, meta.object.member#88C8F0
variable.parameter, meta.parameter#88C8F0italic
variable.other.constant, variable.other.enummember#4FC1FF
entity.name.function, support.function, meta.function-call.generic#DCDCAA
constant.numeric#B5CEA8
punctuation, keyword.operator#B0B0B0
entity.name.type, entity.name.class, support.class, entity.name.type.class#4EC9B0
entity.name.type.interface#4EC9B0italic
support.type, entity.name.type.parameter, entity.name.type.primitive#4EC9B0
entity.name.namespace, entity.name.module#4EC9B0
meta.decorator, meta.decorator punctuation.decorator, tag.decorator entity.name.tag#C586C0
entity.name.tag, meta.tag punctuation.definition.tag#F28B82
entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name#88C8F0
string.regexp, constant.other.character-class.regexp, string.regexp keyword.operator#D16969
entity.name.selector, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, meta.selector#D7BA7D
support.type.vendored.property-name, support.type.property-name.css, meta.property-name#88C8F0
support.constant.property-value, keyword.other.unit#CE9178
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#4EC9B0bold
markup.bold, punctuation.definition.bold#DCDCAAbold
markup.italic, punctuation.definition.italic#CE9178italic
markup.inline.raw.string, markup.fenced_code.block#CE9178
markup.underline.link, string.other.link#569CD6
string.quoted.double.block.python, string.quoted.single.block.python#608B4Eitalic
meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#C586C0
variable.language.special.self.python, variable.language.special.cls.python#569CD6italic
support.function.builtin.python#DCDCAA
support.type.python, support.class.python#4EC9B0
variable.annotation.python, meta.function.annotation.python, meta.function.annotation.return.python#4EC9B0
punctuation.section.f-expression.begin.python, punctuation.section.f-expression.end.python#C586C0
support.variable.magic.python#4FC1FF
support.class.component.jsx, support.class.component.tsx, support.class.component.js, support.class.component.ts#4EC9B0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#C586C0
entity.name.type.alias.ts, entity.name.type.alias.tsx#4EC9B0
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc#608B4Eitalic
support.type.utility.ts#4EC9B0
keyword.package.go, keyword.import.go, keyword.other.package.go, keyword.other.import.go#C586C0
entity.name.package.go#4EC9B0
support.function.builtin.go#DCDCAA
support.type.predeclared.go, support.type.builtin.go#4EC9B0
constant.language.go#569CD6
string.quoted.raw.go#D7BA7D
keyword.operator.address.go, keyword.operator.pointer.go#B0B0B0
invalid.illegal, invalid.deprecated#F44747