Skip to main content
CodingTheme

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#353535
  • activityBar.foreground#BCBCBC
  • activityBar.inactiveForeground#6C6C6C
  • activityBarBadge.background#8fafd7
  • activityBarBadge.foreground#BCBCBC
  • badge.background#8fafd7
  • badge.foreground#BCBCBC
  • breadcrumb.activeSelectionForeground#BCBCBC
  • breadcrumb.background#262626
  • breadcrumb.focusForeground#BCBCBC
  • breadcrumb.foreground#6C6C6C
  • breadcrumbPicker.background#212121
  • button.background#444444
  • button.foreground#BCBCBC
  • contrastBorder#212121
  • debugToolBar.background#232323
  • diffEditor.insertedTextBackground#87af8720
  • diffEditor.removedTextBackground#ff878750
  • dropdown.background#353535
  • dropdown.border#212121
  • dropdown.foreground#BCBCBC
  • editor.background#262626
  • editor.findMatchBackground#44444480
  • editor.findMatchHighlightBackground#BCBCBC40
  • editor.findRangeHighlightBackground#353535
  • editor.foreground#BCBCBC
  • editor.hoverHighlightBackground#212121
  • editor.lineHighlightBorder#444444
  • editor.rangeHighlightBackground#8fafd715
  • editor.selectionBackground#444444
  • editor.selectionHighlightBackground#444444
  • editor.snippetFinalTabstopHighlightBackground#262626
  • editor.snippetFinalTabstopHighlightBorder#87af87
  • editor.snippetTabstopHighlightBackground#262626
  • editor.snippetTabstopHighlightBorder#6C6C6C
  • editor.wordHighlightBackground#8787af50
  • editor.wordHighlightStrongBackground#5f878750
  • editorCodeLens.foreground#6C6C6C
  • editorError.foreground#ff8787
  • editorGroup.border#8fafd7
  • editorGroup.dropBackground#8787af
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#87af8780
  • editorGutter.deletedBackground#ff878780
  • editorGutter.modifiedBackground#5fafaf80
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#6C6C6C
  • editorIndentGuide.activeBackground#BCBCBC45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#6C6C6C
  • editorLink.activeForeground#8fafd7
  • editorMarkerNavigation.background#232323
  • editorOverviewRuler.addedForeground#87af8780
  • editorOverviewRuler.border#212121
  • editorOverviewRuler.currentContentForeground#87af87
  • editorOverviewRuler.deletedForeground#ff878780
  • editorOverviewRuler.errorForeground#ff878780
  • editorOverviewRuler.incomingContentForeground#8fafd7
  • editorOverviewRuler.infoForeground#5fafaf80
  • editorOverviewRuler.modifiedForeground#5fafaf80
  • editorOverviewRuler.selectionHighlightForeground#5f87af
  • editorOverviewRuler.warningForeground#5f87af80
  • editorOverviewRuler.wordHighlightForeground#5fafaf
  • editorOverviewRuler.wordHighlightStrongForeground#87af87
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#232323
  • editorSuggestWidget.foreground#BCBCBC
  • editorSuggestWidget.selectedBackground#444444
  • editorWarning.foreground#5fafaf
  • editorWhitespace.foreground#424450
  • editorWidget.background#232323
  • errorForeground#ff8787
  • extensionButton.prominentBackground#87af8790
  • extensionButton.prominentForeground#BCBCBC
  • extensionButton.prominentHoverBackground#87af8760
  • focusBorder#6C6C6C
  • foreground#BCBCBC
  • gitDecoration.conflictingResourceForeground#5f87af
  • gitDecoration.deletedResourceForeground#ff8787
  • gitDecoration.ignoredResourceForeground#6C6C6C
  • gitDecoration.modifiedResourceForeground#afaf87
  • gitDecoration.untrackedResourceForeground#BCBCBC
  • input.background#262626
  • input.border#212121
  • input.foreground#BCBCBC
  • input.placeholderForeground#6C6C6C
  • inputOption.activeBorder#8fafd7
  • inputValidation.errorBorder#ff8787
  • inputValidation.infoBorder#8787af
  • inputValidation.warningBorder#5f87af
  • list.activeSelectionBackground#444444
  • list.activeSelectionForeground#BCBCBC
  • list.dropBackground#444444
  • list.errorForeground#ff8787
  • list.focusBackground#353535
  • list.highlightForeground#8fafd7
  • list.hoverBackground#353535
  • list.inactiveSelectionBackground#353535
  • list.warningForeground#5f87af
  • listFilterWidget.background#353535
  • listFilterWidget.noMatchesOutline#ff8787
  • listFilterWidget.outline#444444
  • merge.currentHeaderBackground#87af8790
  • merge.incomingHeaderBackground#8fafd790
  • notification.background#262626
  • notification.buttonBackground#444444
  • notification.buttonForeground#BCBCBC
  • notification.buttonHoverBackground#353535
  • notification.errorBackground#ff8787
  • notification.errorForeground#BCBCBC
  • notification.foreground#BCBCBC
  • notification.infoBackground#5fafaf
  • notification.infoForeground#262626
  • notification.warningBackground#5f87af
  • notification.warningForeground#262626
  • panel.background#262626
  • panel.border#8fafd7
  • panelTitle.activeBorder#8787af
  • panelTitle.activeForeground#BCBCBC
  • panelTitle.inactiveForeground#6C6C6C
  • peekView.border#444444
  • peekViewEditor.background#262626
  • peekViewEditor.matchHighlightBackground#44444480
  • peekViewResult.background#232323
  • peekViewResult.fileForeground#BCBCBC
  • peekViewResult.lineForeground#BCBCBC
  • peekViewResult.matchHighlightBackground#44444480
  • peekViewResult.selectionBackground#444444
  • peekViewResult.selectionForeground#BCBCBC
  • peekViewTitle.background#212121
  • peekViewTitleDescription.foreground#6C6C6C
  • peekViewTitleLabel.foreground#BCBCBC
  • pickerGroup.border#8fafd7
  • pickerGroup.foreground#5fafaf
  • progressBar.background#8787af
  • selection.background#8fafd7
  • settings.checkboxBackground#232323
  • settings.checkboxBorder#212121
  • settings.checkboxForeground#BCBCBC
  • settings.dropdownBackground#232323
  • settings.dropdownBorder#212121
  • settings.dropdownForeground#BCBCBC
  • settings.headerForeground#BCBCBC
  • settings.modifiedItemForeground#5f87af
  • settings.modifiedItemIndicator#5f87af
  • settings.numberInputBackground#232323
  • settings.numberInputBorder#212121
  • settings.numberInputForeground#BCBCBC
  • settings.textInputBackground#232323
  • settings.textInputBorder#212121
  • settings.textInputForeground#BCBCBC
  • sideBar.background#232323
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#212121
  • sideBarTitle.foreground#BCBCBC
  • statusBar.background#212121
  • statusBar.debuggingBackground#ff8787
  • statusBar.debuggingForeground#212121
  • statusBar.foreground#BCBCBC
  • statusBar.noFolderBackground#212121
  • statusBar.noFolderForeground#BCBCBC
  • statusBarItem.prominentBackground#ff8787
  • statusBarItem.prominentHoverBackground#5f87af
  • statusBarItem.remoteBackground#8fafd7
  • statusBarItem.remoteForeground#BCBCBC
  • tab.activeBackground#262626
  • tab.activeForeground#BCBCBC
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#6C6C6C
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#8fafd7
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#5f5f87
  • terminal.ansiBrightCyan#5FAFAF
  • terminal.ansiBrightGreen#87875f
  • terminal.ansiBrightMagenta#5f8787
  • terminal.ansiBrightRed#5f875f
  • terminal.ansiBrightWhite#BCBCBC
  • terminal.ansiBrightYellow#5f87af
  • terminal.ansiCyan#5fafaf
  • terminal.ansiGreen#87af87
  • terminal.ansiMagenta#8787af
  • terminal.ansiRed#ff8787
  • terminal.ansiWhite#6C6C6C
  • terminal.ansiYellow#afaf87
  • terminal.background#262626
  • terminal.foreground#BCBCBC
  • titleBar.activeBackground#232323
  • titleBar.activeForeground#BCBCBC
  • titleBar.inactiveBackground#212121
  • titleBar.inactiveForeground#6C6C6C
  • walkThrough.embeddedEditorBackground#232323

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8fafd7
source#BCBCBC
meta.diff, meta.diff.header#6C6C6C
markup.inserted#87af87
markup.deleted#ff8787
markup.changed#5f87af
invalid#ff8787underline italic
invalid.deprecated#BCBCBCunderline italic
entity.name.filename#afaf87
markup.error#ff8787
markup.underlineunderline
markup.bold#ff8787bold
markup.heading#8fafd7bold
markup.italic#afaf87italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5fafaf
markup.inline.raw, markup.raw.restructuredtext#87af87
markup.underline.link, markup.underline.link.image#8fafd7
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5fafaf
entity.name.directive.restructuredtext, markup.quote#afaf87italic
meta.separator.markdown#6C6C6C
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#87af87
punctuation.definition.constant.restructuredtext#8fafd7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8fafd7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#BCBCBC
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#afaf87
entity.name.type.class#8fafd7normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#8fafd7italic
entity.other.inherited-class#8fafd7italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6C6C6C
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8fafd7
comment.block.documentation entity.name.type#5fafafitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#5fafaf
comment.block.documentation variable#87af87italic
constant, variable.other.constant#afaf87
constant.character.escape, constant.character.string.escape, constant.regexp#ff8787
entity.name.tag#8fafd7
entity.other.attribute-name.parent-selector#8fafd7
entity.other.attribute-name#87af87italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#5fafaf
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#5f87afitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#87af87italic
meta.decorator variable.other.object#87af87
keyword, punctuation.definition.keyword#8fafd7
keyword.control.new, keyword.operator.newbold
meta.selector#8fafd7
support#5fafafitalic
support.function.magic, support.variable, variable.other.predefined#5fafafregular
support.function, support.type.property-name#5fafafregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#8fafd7
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#BCBCBC
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#8fafd7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8fafd7
constant.other.date, constant.other.timestamp#5f87af
variable.other.alias.yaml#87af87italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8fafd7regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#5fafafitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#5f87af
storage.modifier#8fafd7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#afaf87
punctuation.definition.group.capture.regexp#8fafd7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8787
punctuation.definition.character-class.regexp#5fafaf
punctuation.definition.group.regexp#5f87af
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8787
meta.assertion.look-ahead.regexp#87af87
string#87af87
punctuation.definition.string.begin, punctuation.definition.string.end#87af87
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#87af87
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6C6C6C
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#BCBCBC
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#5f87afitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#BCBCBCnormal
meta.selectionset.graphql variable#afaf87
meta.selectionset.graphql meta.arguments variable#BCBCBC
entity.name.fragment.graphql, variable.fragment.graphql#5fafaf
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#BCBCBC
source.shell variable.other#8fafd7
support.constant#8fafd7normal
meta.scope.prerequisites.makefile#afaf87
meta.attribute-selector.scss#afaf87
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#BCBCBC
meta.preprocessor.haskell#6C6C6C

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Apprentice by Mariampolskiy Anton - VS Code Theme