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#E4E5E1
  • activityBar.background#0F0F0F
  • activityBar.foreground#E4E5E1
  • activityBar.inactiveForeground#3B3B3B
  • activityBarBadge.background#3366BB
  • activityBarBadge.foreground#141414
  • badge.background#2F2F2F
  • badge.foreground#E4E5E1
  • button.background#3366BB
  • button.foreground#141414
  • button.hoverBackground#E4E5E1
  • checkbox.background#070707
  • checkbox.border#202020
  • debugIcon.breakpointForeground#CC6666
  • diffEditor.insertedTextBackground#5C945E33
  • diffEditor.removedTextBackground#A5444633
  • dropdown.border#202020
  • dropdown.foreground#E4E5E1
  • editor.background#141414
  • editor.findMatchBackground#EEDD0099
  • editor.findMatchHighlightBackground#EEDD0044
  • editor.foldBackground#3366BB22
  • editor.foreground#E4E5E1
  • editor.hoverHighlightBackground#202020
  • editor.lineHighlightBackground#0F0F0F
  • editor.rangeHighlightBackground#3366BB22
  • editor.selectionBackground#EE994486
  • editor.selectionHighlightBackground#EE994444
  • editor.symbolHighlightBackground#EE994444
  • editor.wordHighlightBackground#00D20086
  • editor.wordHighlightStrongBackground#FF003986
  • editorCursor.foreground#FBFCF9
  • editorError.foreground#CC6666
  • editorGroup.border#2F2F2F
  • editorGroup.dropBackground#3366BB22
  • editorGroupHeader.noTabsBackground#1A1A1A
  • editorGroupHeader.tabsBackground#070707
  • editorGutter.addedBackground#5C945E
  • editorGutter.deletedBackground#A54446
  • editorGutter.modifiedBackground#174A9C
  • editorIndentGuide.activeBackground#2F2F2F
  • editorIndentGuide.background#202020
  • editorInfo.foreground#0099CC
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#5F5F5F
  • editorLightBulb.foreground#FFFF53
  • editorLineNumber.activeForeground#5F5F5F
  • editorLineNumber.foreground#2F2F2F
  • editorLink.activeForeground#3366BB
  • editorOverviewRuler.addedForeground#5C945E
  • editorOverviewRuler.border#2F2F2F
  • editorOverviewRuler.deletedForeground#A54446
  • editorOverviewRuler.errorForeground#A54446
  • editorOverviewRuler.findMatchForeground#EEDD0099
  • editorOverviewRuler.infoForeground#0075A6
  • editorOverviewRuler.modifiedForeground#174A9C
  • editorOverviewRuler.rangeHighlightForeground#174A9C33
  • editorOverviewRuler.selectionHighlightForeground#EE994486
  • editorOverviewRuler.wordHighlightForeground#00D20086
  • editorOverviewRuler.wordHighlightStrongForeground#FF003986
  • editorWarning.foreground#EE9944
  • editorWidget.background#0F0F0F
  • editorWidget.border#202020
  • errorLens.errorBackground#A5444633
  • errorLens.errorForeground#E37A79
  • errorLens.hintBackground#5C945E33
  • errorLens.hintForeground#9ED99E
  • errorLens.infoBackground#0075A633
  • errorLens.infoForeground#31AEE2
  • errorLens.warningBackground#C06F0033
  • errorLens.warningForeground#FFB25F
  • focusBorder#2F2F2F
  • foreground#E4E5E1
  • gitDecoration.ignoredResourceForeground#3B3B3B
  • gitDecoration.modifiedResourceForeground#2557AB
  • gitDecoration.untrackedResourceForeground#5C945E
  • input.background#070707
  • input.border#202020
  • input.foreground#E4E5E1
  • input.placeholderForeground#3B3B3B
  • list.activeSelectionBackground#202020
  • list.activeSelectionForeground#E4E5E1
  • list.errorForeground#CC6666
  • list.focusBackground#202020
  • list.highlightForeground#5489E2
  • list.hoverBackground#141414
  • list.inactiveSelectionBackground#1A1A1A
  • list.warningForeground#EE9944
  • minimap.errorHighlight#CC6666
  • minimap.findMatchHighlight#EEDD0099
  • minimap.selectionHighlight#EE994486
  • minimap.selectionOccurrenceHighlight#EE994486
  • minimap.warningHighlight#EE9944
  • minimapGutter.addedBackground#5C945E
  • minimapGutter.deletedBackground#A54446
  • minimapGutter.modifiedBackground#174A9C
  • panel.background#1A1A1A
  • panel.border#2F2F2F
  • panelTitle.activeForeground#E4E5E1
  • peekView.border#3B3B3B
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#3366BB66
  • peekViewResult.background#0F0F0F
  • peekViewResult.fileForeground#E4E5E1
  • peekViewResult.lineForeground#E4E5E199
  • peekViewResult.matchHighlightBackground#3366BB44
  • peekViewResult.selectionBackground#202020
  • peekViewResult.selectionForeground#E4E5E1
  • peekViewTitle.background#0F0F0F
  • peekViewTitleDescription.foreground#3366BB
  • peekViewTitleLabel.foreground#FBFCF9
  • progressBar.background#3366BB
  • scrollbar.shadow#00000088
  • selection.background#EE994486
  • settings.headerForeground#FBFCF9
  • settings.modifiedItemIndicator#3366BB
  • sideBar.background#0F0F0F
  • sideBar.foreground#E4E5E1
  • sideBarTitle.foreground#FBFCF9
  • statusBar.background#070707
  • statusBar.debuggingBackground#070707
  • statusBar.debuggingForeground#D68329
  • statusBar.foreground#C8C9C5
  • statusBar.noFolderBackground#070707
  • symbolIcon.classForeground#AAAAE7
  • symbolIcon.constantForeground#4377CD
  • symbolIcon.enumeratorForeground#AAAAE7
  • symbolIcon.enumeratorMemberForeground#4377CD
  • symbolIcon.fieldForeground#E4E5E1
  • symbolIcon.functionForeground#FFFED9
  • symbolIcon.interfaceForeground#9494CF
  • symbolIcon.keywordForeground#E8DD66
  • symbolIcon.methodForeground#FFFED9
  • symbolIcon.moduleForeground#C8C9C5
  • symbolIcon.namespaceForeground#C8C9C5
  • symbolIcon.propertyForeground#E4E5E1
  • symbolIcon.structForeground#AAAAE7
  • symbolIcon.typeParameterForeground#AAAAE7
  • symbolIcon.variableForeground#E4E5E1
  • tab.activeBackground#FFFDB022
  • tab.activeForeground#E4E5E1
  • tab.border#141414
  • tab.inactiveBackground#070707
  • tab.inactiveForeground#3B3B3B
  • terminal.ansiBlack#070707
  • terminal.ansiBlue#2557AB
  • terminal.ansiBrightBlack#5F5F5F
  • terminal.ansiBrightBlue#4377CD
  • terminal.ansiBrightCyan#3CD4E5
  • terminal.ansiBrightGreen#9ED99E
  • terminal.ansiBrightMagenta#7341A8
  • terminal.ansiBrightRed#E37A79
  • terminal.ansiBrightWhite#FBFCF9
  • terminal.ansiBrightYellow#FFFC48
  • terminal.ansiCyan#00A5B6
  • terminal.ansiGreen#6FA871
  • terminal.ansiMagenta#5A268C
  • terminal.ansiRed#B85455
  • terminal.ansiWhite#E4E5E1
  • terminal.ansiYellow#D3C100
  • terminal.foreground#E4E5E1
  • terminal.selectionBackground#EE994486
  • terminalCursor.foreground#FBFCF9
  • textLink.activeForeground#3366BB
  • textLink.foreground#3366BB
  • textPreformat.foreground#E4E5E1
  • titleBar.activeBackground#0F0F0F
  • titleBar.activeForeground#E4E5E1
  • titleBar.inactiveBackground#0F0F0F
  • titleBar.inactiveForeground#3B3B3B
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.language.self, variable.language.special.self, variable.language.this, keyword.other.this, variable.language.super#FFACBDitalic bold
entity.name.tag, keyword.operator.expression, keyword.operator.new, keyword.operator.wordlike, keyword.type.elm, keyword.type.go, source keyword, keyword.operator.logical.python, keyword.operator.in, punctuation.definition.heading, storage.modifier, storage.type.class, storage.type.enum, storage.type.function.python, storage.type.function.ts, storage.type.function, storage.type.interface.ts, storage.type.js, storage.type.local.java, storage.type.def.groovy, storage.type.namespace, storage.type.property, storage.type.rust, storage.type.struct, storage.type.ts, storage.type.type#E8DD66bold
constant.numeric, keyword.other.unit#FFACBD—
constant.character, punctuation.definition.char, punctuation.definition.string, string#CEEFFF—
variable#E4E5E1—
variable.other.enummember#4377CD—
constant, entity.name.constant, variable.other.metavariable, support.constant#4377CD—
entity.name.function, entity.name.function.member, support.function, entity.other.attribute-name.table.toml, entity.other.attribute-name.table.array.toml, entity.name.function-call, meta.function-call, meta.function-call.generic.python#FFFED9—
entity.name.type, entity.name.type.*, storage.type, support.class, support.type#AAAAE7—
keyword.type, storage.type.boolean.go, storage.type.built-in, storage.type.byte.go, storage.type.error.go, storage.type.numeric.go, storage.type.primitive, storage.type.rune.go, storage.type.string.go, storage.type.uintptr.go, support.type, variable.other.metavariable.specifier#9494CF—
entity.name.type.parameter, variable.type#AAAAE7italic
entity.name.field, entity.name.record.field, entity.name.variable.field, meta.attribute.python, punctuation.support.type.property-name, support.type.property-name, support.type.vendored.property-name, variable.other.member, variable.other.object.property, variable.other.property#E4E5E1—
entity.name.tag.toml, entity.name.tag.yaml#E4E5E1
entity.name.module, entity.name.namespace, entity.name.type.namespace, storage.modifier.import, storage.modifier.package, support.module, entity.name.type.module, variable.other.constant.elixir#C8C9C5—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir#C8C9C5—
storage.modifier.lifetime.rust, entity.name.lifetime.rust, entity.name.type.lifetime, punctuation.definition.lifetime#E8DD66italic
constant.character.escape#3366BB—
constant.character.format.placeholder, constant.other.placeholder, punctuation.section.embedded, punctuation.definition.template-expression#3366BB—
source comment, punctuation.definition.comment#5C945E—
comment.line.documentation, comment.block.documentation#6FA871—
entity.name.function.decorator, punctuation.brackets.attribute, punctuation.definition.annotation, punctuation.definition.attribute, punctuation.definition.decorator, storage.modifier.attribute, storage.type.annotation#3366BB—
entity.other.attribute-name.class, entity.other.attribute-name.id#00A5B6—
keyword.other.unsafe#A54446—
keyword.operator.logical.rust, keyword.operator, storage.modifier.pointer, storage.type.function.arrow, punctuation, keyword.control.flow.block-scalar.literal.yaml, meta.brace.round.ts#FFFC9D
markup.italic—italic
markup.bold—bold
markup.heading—bold
punctuation.definition.markdown, punctuation.definition.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.separator.key-value.markdown, punctuation.separator.key-value.markdown, fenced_code.block.language.markdown, constant.other.reference.link.markdown, meta.link.inline.markdown, meta.link.reference.def.markdown, punctuation.definition.asciidoc, punctuation.separator.asciidoc, support.asciidoc, markup.heading.asciidoc, markup.heading.marker.asciidoc, markup.list.bullet.asciidoc, markup.link.asciidoc, markup.other.url.asciidoc, markup.other.anchor.asciidoc, support.constant.asciidoc, constant.asciidoc, entity.name.function.asciidoc#6FA871—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc#E4E5E1—
markup.inserted, punctuation.definition.inserted.diff#85BF86—
markup.deleted, punctuation.definition.deleted.diff#CC6666—
markup.changed#EE9944—
punctuation.definition.range.diff, meta.diff.range#3366BB—
comment.line.number-sign.git-commit, punctuation.definition.comment.git-commit, meta.diff.index, meta.diff.header#3B3B3B—
meta.diff.header.to-file, meta.diff.header.from-file#FBFCF9bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#00BBCC—
meta.mutable—underline
magit.header#FFFF53bold
magit.subheader—bold
magit.entity#5F5F5F—
invalid.deprecated.line-too-long.git-commit#EE9944—
invalid.illegal.line-too-long.git-commit#CC6666—