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#5F87AF
  • activityBarBadge.foreground#BCBCBC
  • badge.background#5F87AF
  • 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#5F875F20
  • diffEditor.removedTextBackground#AF5F5F50
  • 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#5F87AF15
  • editor.selectionBackground#444444
  • editor.selectionHighlightBackground#444444
  • editor.snippetFinalTabstopHighlightBackground#262626
  • editor.snippetFinalTabstopHighlightBorder#5F875F
  • editor.snippetTabstopHighlightBackground#262626
  • editor.snippetTabstopHighlightBorder#6C6C6C
  • editor.wordHighlightBackground#5F5F8750
  • editor.wordHighlightStrongBackground#8787AF50
  • editorCodeLens.foreground#6C6C6C
  • editorError.foreground#AF5F5F
  • editorGroup.border#5F87AF
  • editorGroup.dropBackground#5F5F87
  • editorGroupHeader.tabsBackground#212121
  • editorGutter.addedBackground#5F875F80
  • editorGutter.deletedBackground#AF5F5F80
  • editorGutter.modifiedBackground#5F878780
  • editorHoverWidget.background#262626
  • editorHoverWidget.border#6C6C6C
  • editorIndentGuide.activeBackground#BCBCBC45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#6C6C6C
  • editorLink.activeForeground#5F87AF
  • editorMarkerNavigation.background#232323
  • editorOverviewRuler.addedForeground#5F875F80
  • editorOverviewRuler.border#212121
  • editorOverviewRuler.currentContentForeground#5F875F
  • editorOverviewRuler.deletedForeground#AF5F5F80
  • editorOverviewRuler.errorForeground#AF5F5F80
  • editorOverviewRuler.incomingContentForeground#5F87AF
  • editorOverviewRuler.infoForeground#5F878780
  • editorOverviewRuler.modifiedForeground#5F878780
  • editorOverviewRuler.selectionHighlightForeground#AFAF87
  • editorOverviewRuler.warningForeground#AFAF8780
  • editorOverviewRuler.wordHighlightForeground#5F8787
  • editorOverviewRuler.wordHighlightStrongForeground#5F875F
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#232323
  • editorSuggestWidget.foreground#BCBCBC
  • editorSuggestWidget.selectedBackground#444444
  • editorWarning.foreground#5F8787
  • editorWhitespace.foreground#424450
  • editorWidget.background#232323
  • errorForeground#AF5F5F
  • extensionButton.prominentBackground#5F875F90
  • extensionButton.prominentForeground#BCBCBC
  • extensionButton.prominentHoverBackground#5F875F60
  • focusBorder#6C6C6C
  • foreground#BCBCBC
  • gitDecoration.conflictingResourceForeground#AFAF87
  • gitDecoration.deletedResourceForeground#AF5F5F
  • gitDecoration.ignoredResourceForeground#6C6C6C
  • gitDecoration.modifiedResourceForeground#87875F
  • gitDecoration.untrackedResourceForeground#BCBCBC
  • input.background#262626
  • input.border#212121
  • input.foreground#BCBCBC
  • input.placeholderForeground#6C6C6C
  • inputOption.activeBorder#5F87AF
  • inputValidation.errorBorder#AF5F5F
  • inputValidation.infoBorder#5F5F87
  • inputValidation.warningBorder#AFAF87
  • list.activeSelectionBackground#444444
  • list.activeSelectionForeground#BCBCBC
  • list.dropBackground#444444
  • list.errorForeground#AF5F5F
  • list.focusBackground#353535
  • list.highlightForeground#5F87AF
  • list.hoverBackground#353535
  • list.inactiveSelectionBackground#353535
  • list.warningForeground#AFAF87
  • listFilterWidget.background#353535
  • listFilterWidget.noMatchesOutline#AF5F5F
  • listFilterWidget.outline#444444
  • merge.currentHeaderBackground#5F875F90
  • merge.incomingHeaderBackground#5F87AF90
  • notification.background#262626
  • notification.buttonBackground#444444
  • notification.buttonForeground#BCBCBC
  • notification.buttonHoverBackground#353535
  • notification.errorBackground#AF5F5F
  • notification.errorForeground#BCBCBC
  • notification.foreground#BCBCBC
  • notification.infoBackground#5F8787
  • notification.infoForeground#262626
  • notification.warningBackground#AFAF87
  • notification.warningForeground#262626
  • panel.background#262626
  • panel.border#5F87AF
  • panelTitle.activeBorder#5F5F87
  • 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#5F87AF
  • pickerGroup.foreground#5F8787
  • progressBar.background#5F5F87
  • selection.background#5F87AF
  • settings.checkboxBackground#232323
  • settings.checkboxBorder#212121
  • settings.checkboxForeground#BCBCBC
  • settings.dropdownBackground#232323
  • settings.dropdownBorder#212121
  • settings.dropdownForeground#BCBCBC
  • settings.headerForeground#BCBCBC
  • settings.modifiedItemForeground#AFAF87
  • settings.modifiedItemIndicator#AFAF87
  • 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#AF5F5F
  • statusBar.debuggingForeground#212121
  • statusBar.foreground#BCBCBC
  • statusBar.noFolderBackground#212121
  • statusBar.noFolderForeground#BCBCBC
  • statusBarItem.prominentBackground#AF5F5F
  • statusBarItem.prominentHoverBackground#AFAF87
  • statusBarItem.remoteBackground#5F87AF
  • statusBarItem.remoteForeground#BCBCBC
  • tab.activeBackground#262626
  • tab.activeForeground#BCBCBC
  • tab.border#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#6C6C6C
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#5F87AF
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#8FAFD7
  • terminal.ansiBrightCyan#5FAFAF
  • terminal.ansiBrightGreen#87AF87
  • terminal.ansiBrightMagenta#8787AF
  • terminal.ansiBrightRed#FF8787
  • terminal.ansiBrightWhite#BCBCBC
  • terminal.ansiBrightYellow#AFAF87
  • terminal.ansiCyan#5F8787
  • terminal.ansiGreen#5F875F
  • terminal.ansiMagenta#5F5F87
  • terminal.ansiRed#AF5F5F
  • terminal.ansiWhite#6C6C6C
  • terminal.ansiYellow#87875F
  • 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#5F87AF
source#BCBCBC
meta.diff, meta.diff.header#6C6C6C
markup.inserted#5F875F
markup.deleted#AF5F5F
markup.changed#AFAF87
invalid#AF5F5Funderline italic
invalid.deprecated#BCBCBCunderline italic
entity.name.filename#87875F
markup.error#AF5F5F
markup.underlineunderline
markup.bold#AF5F5Fbold
markup.heading#5F87AFbold
markup.italic#87875Fitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5F8787
markup.inline.raw, markup.raw.restructuredtext#5F875F
markup.underline.link, markup.underline.link.image#5F87AF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5F8787
entity.name.directive.restructuredtext, markup.quote#87875Fitalic
meta.separator.markdown#6C6C6C
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5F875F
punctuation.definition.constant.restructuredtext#5F87AF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#5F87AF
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#87875F
entity.name.type.class#5F87AFnormal
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#5F87AFitalic
entity.other.inherited-class#5F87AFitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6C6C6C
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5F87AF
comment.block.documentation entity.name.type#5F8787italic
comment.block.documentation entity.name.type punctuation.definition.bracket#5F8787
comment.block.documentation variable#5F875Fitalic
constant, variable.other.constant#87875F
constant.character.escape, constant.character.string.escape, constant.regexp#AF5F5F
entity.name.tag#5F87AF
entity.other.attribute-name.parent-selector#5F87AF
entity.other.attribute-name#5F875Fitalic
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#5F8787
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#AFAF87italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#5F875Fitalic
meta.decorator variable.other.object#5F875F
keyword, punctuation.definition.keyword#5F87AF
keyword.control.new, keyword.operator.newbold
meta.selector#5F87AF
support#5F8787italic
support.function.magic, support.variable, variable.other.predefined#5F8787regular
support.function, support.type.property-name#5F8787regular
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#5F87AF
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#5F87AF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5F87AF
constant.other.date, constant.other.timestamp#AFAF87
variable.other.alias.yaml#5F875Fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#5F87AFregular
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#5F8787italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AFAF87
storage.modifier#5F87AF
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#87875F
punctuation.definition.group.capture.regexp#5F87AF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#AF5F5F
punctuation.definition.character-class.regexp#5F8787
punctuation.definition.group.regexp#AFAF87
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#AF5F5F
meta.assertion.look-ahead.regexp#5F875F
string#5F875F
punctuation.definition.string.begin, punctuation.definition.string.end#5F875F
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#5F875F
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#AFAF87italic
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#87875F
meta.selectionset.graphql meta.arguments variable#BCBCBC
entity.name.fragment.graphql, variable.fragment.graphql#5F8787
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#5F87AF
support.constant#5F87AFnormal
meta.scope.prerequisites.makefile#87875F
meta.attribute-selector.scss#87875F
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