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#E7E9E2
  • activityBar.background#2E2E2E
  • activityBar.foreground#E7E9E2
  • activityBar.inactiveForeground#838383
  • activityBarBadge.background#3366BB
  • activityBarBadge.foreground#383838
  • badge.background#6D6D6D
  • badge.foreground#E7E9E2
  • button.background#3366BB
  • button.foreground#383838
  • button.hoverBackground#E7E9E2
  • checkbox.background#1E1E1E
  • checkbox.border#505050
  • debugIcon.breakpointForeground#CC6666
  • diffEditor.insertedTextBackground#59915B33
  • diffEditor.removedTextBackground#A2414333
  • dropdown.border#505050
  • dropdown.foreground#E7E9E2
  • editor.background#383838
  • editor.findMatchBackground#EEDD0099
  • editor.findMatchHighlightBackground#EEDD0044
  • editor.foldBackground#3366BB22
  • editor.foreground#E7E9E2
  • editor.hoverHighlightBackground#505050
  • editor.lineHighlightBackground#2E2E2E
  • editor.rangeHighlightBackground#3366BB22
  • editor.selectionBackground#EE994486
  • editor.selectionHighlightBackground#EE994444
  • editor.symbolHighlightBackground#EE994444
  • editor.wordHighlightBackground#00D20086
  • editor.wordHighlightStrongBackground#FF003986
  • editorCursor.foreground#FBFDF5
  • editorError.foreground#CC6666
  • editorGroup.border#6D6D6D
  • editorGroup.dropBackground#3366BB22
  • editorGroupHeader.noTabsBackground#444444
  • editorGroupHeader.tabsBackground#1E1E1E
  • editorGutter.addedBackground#59915B
  • editorGutter.deletedBackground#A24143
  • editorGutter.modifiedBackground#15489A
  • editorIndentGuide.activeBackground#6D6D6D
  • editorIndentGuide.background#505050
  • editorInfo.foreground#0099CC
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#C9C9C9
  • editorLightBulb.foreground#FFFF53
  • editorLineNumber.activeForeground#C9C9C9
  • editorLineNumber.foreground#6D6D6D
  • editorLink.activeForeground#3366BB
  • editorOverviewRuler.addedForeground#59915B
  • editorOverviewRuler.border#6D6D6D
  • editorOverviewRuler.deletedForeground#A24143
  • editorOverviewRuler.errorForeground#A24143
  • editorOverviewRuler.findMatchForeground#EEDD0099
  • editorOverviewRuler.infoForeground#0072A3
  • editorOverviewRuler.modifiedForeground#15489A
  • editorOverviewRuler.rangeHighlightForeground#15489A33
  • editorOverviewRuler.selectionHighlightForeground#EE994486
  • editorOverviewRuler.wordHighlightForeground#00D20086
  • editorOverviewRuler.wordHighlightStrongForeground#FF003986
  • editorWarning.foreground#EE9944
  • editorWidget.background#2E2E2E
  • editorWidget.border#505050
  • errorLens.errorBackground#A2414333
  • errorLens.errorForeground#E57C7B
  • errorLens.hintBackground#59915B33
  • errorLens.hintForeground#A0DBA1
  • errorLens.infoBackground#0072A333
  • errorLens.infoForeground#34B0E4
  • errorLens.warningBackground#BC6B0033
  • errorLens.warningForeground#FFB562
  • focusBorder#6D6D6D
  • foreground#E7E9E2
  • gitDecoration.ignoredResourceForeground#838383
  • gitDecoration.modifiedResourceForeground#2456A9
  • gitDecoration.untrackedResourceForeground#59915B
  • input.background#1E1E1E
  • input.border#505050
  • input.foreground#E7E9E2
  • input.placeholderForeground#838383
  • list.activeSelectionBackground#505050
  • list.activeSelectionForeground#E7E9E2
  • list.errorForeground#CC6666
  • list.focusBackground#505050
  • list.highlightForeground#588DE5
  • list.hoverBackground#383838
  • list.inactiveSelectionBackground#444444
  • list.warningForeground#EE9944
  • minimap.errorHighlight#CC6666
  • minimap.findMatchHighlight#EEDD0099
  • minimap.selectionHighlight#EE994486
  • minimap.selectionOccurrenceHighlight#EE994486
  • minimap.warningHighlight#EE9944
  • minimapGutter.addedBackground#59915B
  • minimapGutter.deletedBackground#A24143
  • minimapGutter.modifiedBackground#15489A
  • panel.background#444444
  • panel.border#6D6D6D
  • panelTitle.activeForeground#E7E9E2
  • peekView.border#838383
  • peekViewEditor.background#383838
  • peekViewEditor.matchHighlightBackground#3366BB66
  • peekViewResult.background#2E2E2E
  • peekViewResult.fileForeground#E7E9E2
  • peekViewResult.lineForeground#E7E9E299
  • peekViewResult.matchHighlightBackground#3366BB44
  • peekViewResult.selectionBackground#505050
  • peekViewResult.selectionForeground#E7E9E2
  • peekViewTitle.background#2E2E2E
  • peekViewTitleDescription.foreground#3366BB
  • peekViewTitleLabel.foreground#FBFDF5
  • progressBar.background#3366BB
  • scrollbar.shadow#00000088
  • selection.background#EE994486
  • settings.headerForeground#FBFDF5
  • settings.modifiedItemIndicator#3366BB
  • sideBar.background#2E2E2E
  • sideBar.foreground#E7E9E2
  • sideBarTitle.foreground#FBFDF5
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#1E1E1E
  • statusBar.debuggingForeground#D48126
  • statusBar.foreground#C8CAC2
  • statusBar.noFolderBackground#1E1E1E
  • symbolIcon.classForeground#AAAAE7
  • symbolIcon.constantForeground#4478CF
  • symbolIcon.enumeratorForeground#AAAAE7
  • symbolIcon.enumeratorMemberForeground#4478CF
  • symbolIcon.fieldForeground#E7E9E2
  • symbolIcon.functionForeground#FFFED9
  • symbolIcon.interfaceForeground#9292CD
  • symbolIcon.keywordForeground#E8DD66
  • symbolIcon.methodForeground#FFFED9
  • symbolIcon.moduleForeground#C8CAC2
  • symbolIcon.namespaceForeground#C8CAC2
  • symbolIcon.propertyForeground#E7E9E2
  • symbolIcon.structForeground#AAAAE7
  • symbolIcon.typeParameterForeground#AAAAE7
  • symbolIcon.variableForeground#E7E9E2
  • tab.activeBackground#FFFDB022
  • tab.activeForeground#E7E9E2
  • tab.border#383838
  • tab.inactiveBackground#1E1E1E
  • tab.inactiveForeground#838383
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#2456A9
  • terminal.ansiBrightBlack#C9C9C9
  • terminal.ansiBrightBlue#4478CF
  • terminal.ansiBrightCyan#40D6E7
  • terminal.ansiBrightGreen#A0DBA1
  • terminal.ansiBrightMagenta#7443A9
  • terminal.ansiBrightRed#E57C7B
  • terminal.ansiBrightWhite#FBFDF5
  • terminal.ansiBrightYellow#FFFF4C
  • terminal.ansiCyan#00A3B4
  • terminal.ansiGreen#6DA66F
  • terminal.ansiMagenta#59258B
  • terminal.ansiRed#B65253
  • terminal.ansiWhite#E7E9E2
  • terminal.ansiYellow#D0BF00
  • terminal.foreground#E7E9E2
  • terminal.selectionBackground#EE994486
  • terminalCursor.foreground#FBFDF5
  • textLink.activeForeground#3366BB
  • textLink.foreground#3366BB
  • textPreformat.foreground#E7E9E2
  • titleBar.activeBackground#2E2E2E
  • titleBar.activeForeground#E7E9E2
  • titleBar.inactiveBackground#2E2E2E
  • titleBar.inactiveForeground#838383
  • 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#FFB8C9italic 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#FFB8C9—
constant.character, punctuation.definition.char, punctuation.definition.string, string#DFFFFF—
variable#E7E9E2—
variable.other.enummember#4478CF—
constant, entity.name.constant, variable.other.metavariable, support.constant#4478CF—
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#9292CD—
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#E7E9E2—
entity.name.tag.toml, entity.name.tag.yaml#E7E9E2
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#C8CAC2—
entity.name.function.macro, entity.name.macro, entity.name.other.preprocessor.macro, variable.other.readwrite.module.elixir, punctuation.definition.variable.elixir#C8CAC2—
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#59915B—
comment.line.documentation, comment.block.documentation#6DA66F—
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#00A3B4—
keyword.other.unsafe#A24143—
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#FFFFA0
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#6DA66F—
string.other.link.title.markdown, string.other.link.description.markdown, string.unquoted.asciidoc#E7E9E2—
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#838383—
meta.diff.header.to-file, meta.diff.header.from-file#FBFDF5bold
punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#00BBCC—
meta.mutable—underline
magit.header#FFFF53bold
magit.subheader—bold
magit.entity#C9C9C9—
invalid.deprecated.line-too-long.git-commit#EE9944—
invalid.illegal.line-too-long.git-commit#CC6666—