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#0F0F0F
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#6E6E6E
  • activityBarBadge.background#6ECFE6
  • activityBarBadge.foreground#000000
  • diffEditor.insertedTextBackground#4BCB8A20
  • diffEditor.removedTextBackground#D37A5C25
  • editor.background#000000
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#0C0C0C
  • editor.lineHighlightBackground#0D0D0D
  • editor.selectionBackground#111111
  • editorCursor.foreground#F3B38C
  • editorError.foreground#FF8A7A
  • editorGroup.border#0F0F0F
  • editorGroupHeader.border#111111
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#111111
  • editorGutter.addedBackground#4BCB8A
  • editorGutter.background#000000
  • editorGutter.deletedBackground#D37A5C
  • editorGutter.foldingControlForeground#7E7E7E
  • editorGutter.modifiedBackground#A0D6FF
  • editorHint.foreground#A2F2C8
  • editorIndentGuide.activeBackground#3A3A3A
  • editorIndentGuide.background#262626
  • editorInfo.foreground#6ECFE6
  • editorLineNumber.activeForeground#A0A0A0
  • editorLineNumber.foreground#707070
  • editorWarning.foreground#E5B567
  • editorWhitespace.foreground#262626
  • errorForeground#FFB15A
  • focusBorder#6ECFE640
  • gitDecoration.addedResourceForeground#4BCB8A
  • gitDecoration.deletedResourceForeground#D37A5C
  • gitDecoration.ignoredResourceForeground#4E4E4E
  • gitDecoration.modifiedResourceForeground#A0D6FF
  • gitDecoration.untrackedResourceForeground#A2F2C8
  • list.activeSelectionBackground#111111
  • list.activeSelectionForeground#D4D4D4
  • list.focusBackground#111111
  • list.highlightForeground#6ECFE6
  • list.hoverBackground#0D0D0D
  • list.inactiveSelectionBackground#0C0C0C
  • list.inactiveSelectionForeground#A0A0A0
  • minimap.background#000000
  • notificationCenterHeader.background#050505
  • notifications.background#050505
  • notifications.foreground#D4D4D4
  • panel.background#050505
  • panel.border#111111
  • panelTitle.activeBorder#6ECFE6
  • scrollbarSlider.activeBackground#7E7E7E99
  • scrollbarSlider.background#4E4E4E66
  • scrollbarSlider.hoverBackground#4E4E4E99
  • sideBar.background#050505
  • sideBar.border#0F0F0F
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.border#151515
  • sideBarSectionHeader.foreground#D4D4D4
  • statusBar.background#000000
  • statusBar.border#111111
  • statusBar.debuggingBackground#262626
  • statusBar.foreground#A0A0A0
  • statusBar.noFolderBackground#000000
  • statusBarItem.remoteBackground#111111
  • statusBarItem.remoteForeground#7E7E7E
  • tab.activeBackground#050505
  • tab.activeBorder#0F0F0F
  • tab.activeBorderTop#6ECFE680
  • tab.activeForeground#D4D4D4
  • tab.border#111111
  • tab.hoverBackground#151515
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#7A7A7A
  • tab.unfocusedActiveBackground#040404
  • tab.unfocusedInactiveBackground#000000
  • terminal.background#000000
  • terminal.border#111111
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#7E7E7E
  • titleBar.border#111111
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#4E4E4E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, meta.embedded, variable, meta.object-literal.key#CCCCCC
keyword, keyword.control, keyword.operator, storage.type, storage.modifier#7FD8E8
entity.name.type, entity.name.class, support.type, support.class#A2F2C8
entity.name.function, support.function, meta.function-call, meta.method-call#94E6BE
variable.parameter, meta.parameter, meta.argument#C8C8C8
variable.other.constant, variable.other.enummember, constant.language, constant.character, support.constant#EBC77Ebold
string, string.quoted, string.template#EBC77E
string.template meta.embedded, string.interpolated#7FD8E8
constant.numeric, constant.boolean#D69CA7
comment, punctuation.definition.comment#777777italic
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.arguments, meta.brace, meta.bracket, meta.delimiter#5E5E5E
keyword.operator, punctuation.definition.operator#A0A0A0
meta.decorator, entity.other.attribute-name, meta.annotation#D69CA7italic
keyword.control.import, keyword.control.export, keyword.control.from#7FD8E8
support.type.property-name, meta.object-literal.key string#CFCFCF
markup.heading, markup.heading entity.name.section#EBC77Ebold
markup.bold#CCCCCCbold
markup.italic#CCCCCCitalic
markup.underline.link, string.other.link#7FD8E8underline
invalid, invalid.illegal#000000
meta.deprecated#9D5A4Cstrikethrough
entity.name.type.ts, entity.name.type.interface.ts, entity.name.type.alias.ts, entity.name.enum.ts, support.type.primitive.ts#A2F2C8
meta.decorator.ts, meta.decorator punctuation.definition.tag.ts#D69CA7italic
keyword.operator.type.annotation.ts, keyword.operator.type.ts, storage.type.type.ts, storage.type.interface.ts#7FD8E8
variable.language.this.ts, variable.language.super.ts#C8C8C8
entity.name.tag.tsx, support.class.component.tsx#EBC77E
entity.other.attribute-name.tsx#D69CA7
support.function.builtin.python, support.type.builtin.python#94E6BE
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#C8C8C8italic
meta.function.decorator.python, entity.name.function.decorator.python#D69CA7italic
meta.annotation.type.python, meta.function.parameters.python entity.name.type, meta.generic-name.python#A2F2C8
string.quoted.single.f.python meta.embedded.line, string.quoted.double.f.python meta.embedded.line, constant.character.format.placeholder.other.python#7FD8E8
comment, punctuation.definition.comment#595959italic
punctuation, keyword.operator, storage.type.function.arrow#444444
keyword, storage.type, storage.modifier#6ECFE6
entity.name.function, support.function, meta.function-call, variable.function#9FE0C2
entity.name.type, entity.name.class, support.type, support.class#E6B2CA
variable, meta.parameter, variable.parameter#D4D4D4
constant, constant.numeric, constant.language, variable.other.constant, entity.name.constant, support.constant#A0D6FF
string, string.quoted, string.template, constant.other.symbol#EBCF87
meta.decorator, meta.annotation, entity.name.function.decorator#D5A5E6
support.variable, support.other.variable, variable.language, keyword.other.this#F3B38C
support.type.property-name.json, meta.object-literal.key#A0D6FF
AMOLED Jonny Dark by Jonathan Hoffman - VS Code Theme