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#59a5de
  • activityBar.background#1b1b1b
  • activityBar.border#000000
  • activityBar.dropBackground#053fc580
  • activityBar.foreground#a7a7a7
  • activityBar.inactiveForeground#656565
  • activityBarBadge.background#053fc5
  • activityBarBadge.foreground#ffffff
  • badge.background#053fc5
  • badge.foreground#ffffff
  • breadcrumb.background#171717
  • breadcrumb.focusForeground#dcdcdc
  • breadcrumb.foreground#e5e5e5
  • breadcrumbPicker.background#202020
  • button.background#053fc5cd
  • button.border#053fc5
  • button.foreground#ffffff
  • button.secondaryBackground#053fc5cd
  • button.secondaryForeground#ffffff
  • debugToolBar.background#202020
  • descriptionForeground#e5e5e502
  • diffEditor.insertedTextBackground#32d74b1a
  • diffEditor.removedTextBackground#ff453a1a
  • dropdown.background#1b1b1b
  • dropdown.border#414141
  • dropdown.foreground#e5e5e5
  • editor.background#171717
  • editor.findMatchBackground#053fc580
  • editor.findMatchHighlightBackground#053fc560
  • editor.findRangeHighlightBackground#053fc51a
  • editor.foreground#e5e5e5
  • editor.hoverHighlightBackground#053fc5c0
  • editor.lineHighlightBackground#e5e5e50d
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#053fc566
  • editor.wordHighlightBackground#88888833
  • editor.wordHighlightStrongBackground#88888833
  • editorBracketHighlight.foreground1#888888
  • editorBracketHighlight.foreground2#bababa
  • editorBracketHighlight.foreground3#59a5de
  • editorBracketHighlight.foreground4#a89bed
  • editorBracketHighlight.foreground5#cf88dd
  • editorBracketHighlight.foreground6#dcb1ac
  • editorBracketHighlight.unexpectedBracket.foreground#ff453a
  • editorBracketMatch.background#e5e5e533
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#e5e5e590
  • editorCursor.foreground#e5e5e5
  • editorError.foreground#ff453a
  • editorGroup.border#000000
  • editorGroup.dropBackground#053fc580
  • editorGroup.emptyBackground#171717
  • editorGroupHeader.border#000000
  • editorGroupHeader.noTabsBackground#171717
  • editorGroupHeader.tabsBackground#171717
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#32d74b80
  • editorGutter.background#171717
  • editorGutter.deletedBackground#ff453a60
  • editorGutter.modifiedBackground#59a5de
  • editorHoverWidget.background#202020f3
  • editorHoverWidget.border#313131
  • editorIndentGuide.background#272727
  • editorInfo.foreground#053fc5
  • editorLightBulb.foreground#59a5de
  • editorLightBulbAutoFix.foreground#053fc5
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#565656
  • editorLink.activeForeground#dcdcdc
  • editorOverviewRuler.addedForeground#32d74b80
  • editorOverviewRuler.border#2f2f2f
  • editorOverviewRuler.commonContentForeground#e5e5e5
  • editorOverviewRuler.deletedForeground#ff453a60
  • editorOverviewRuler.errorForeground#ff453a
  • editorOverviewRuler.findMatchForeground#053fc5e6
  • editorOverviewRuler.infoForeground#053fc5
  • editorOverviewRuler.modifiedForeground#59a5dea6
  • editorOverviewRuler.rangeHighlightForeground#053fc51a
  • editorOverviewRuler.warningForeground#ffd60a
  • editorOverviewRuler.wordHighlightForeground#88888880
  • editorOverviewRuler.wordHighlightStrongForeground#88888880
  • editorRuler.foreground#272727
  • editorStickyScroll.background#202020
  • editorStickyScrollHover.background#292929
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.border#313131
  • editorSuggestWidget.foreground#e5e5e5
  • editorSuggestWidget.highlightForeground#6ac1dc
  • editorWarning.foreground#ffd60a
  • editorWhitespace.foreground#e5e5e526
  • editorWidget.background#202020
  • editorWidget.border#313131
  • editorWidget.foreground#e5e5e5
  • errorForeground#ff453a
  • extensionButton.prominentBackground#053fc5
  • extensionButton.prominentForeground#ffffff
  • extensionIcon.starForeground#59a5de
  • extensionIcon.verifiedForeground#59a5de
  • focusBorder#3093df
  • foreground#e5e5e5
  • gitDecoration.addedResourceForeground#32d74b
  • gitDecoration.conflictingResourceForeground#ec7121
  • gitDecoration.deletedResourceForeground#ff453a80
  • gitDecoration.ignoredResourceForeground#e5e5e59a
  • gitDecoration.modifiedResourceForeground#59a5de
  • gitDecoration.untrackedResourceForeground#32d74b
  • icon.foreground#888888
  • input.background#292929
  • input.border#414141
  • input.foreground#e5e5e5
  • inputValidation.errorBackground#ff453a80
  • inputValidation.errorBorder#ff453a
  • inputValidation.infoBackground#053fc580
  • inputValidation.infoBorder#053fc5
  • inputValidation.warningBackground#ffd60a80
  • inputValidation.warningBorder#ffd60a
  • list.activeSelectionBackground#053fc5
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#053fc580
  • list.errorForeground#ff453a
  • list.highlightForeground#6ac1dc
  • list.hoverBackground#292929
  • list.inactiveSelectionBackground#363636
  • list.inactiveSelectionForeground#dcdcdc
  • list.warningForeground#ffd60a
  • minimap.background#171717
  • minimap.findMatchHighlight#053fc5
  • minimap.selectionHighlight#053fc566
  • notificationCenter.border#363636
  • notificationCenterHeader.background#202020
  • notificationCenterHeader.foreground#e5e5e5
  • notifications.background#292929f3
  • notifications.border#363636
  • notifications.foreground#e5e5e5
  • notificationsErrorIcon.foreground#ff453a
  • notificationsInfoIcon.foreground#053fc5
  • notificationsWarningIcon.foreground#ffd60a
  • notificationToast.border#363636
  • panel.border#000000
  • panelTitle.activeBorder#59a5de
  • panelTitle.activeForeground#e5e5e5
  • peekView.border#313131
  • peekViewEditor.background#20202080
  • peekViewEditor.matchHighlightBackground#053fc527
  • peekViewEditorGutter.background#20202080
  • peekViewResult.background#202020
  • peekViewResult.fileForeground#e5e5e5
  • peekViewResult.lineForeground#e5e5e5
  • peekViewResult.matchHighlightBackground#053fc533
  • peekViewResult.selectionBackground#053fc566
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#202020
  • peekViewTitleDescription.foreground#e5e5e5
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#313131
  • pickerGroup.foreground#59a5de
  • progressBar.background#053fc5
  • quickInput.background#1b1b1b
  • sash.hoverBorder#053fc5
  • scrollbar.shadow#171717
  • searchEditor.findMatchBackground#053fc580
  • selection.background#053fc566
  • settings.headerForeground#e5e5e5
  • settings.modifiedItemIndicator#053fc5
  • sideBar.background#1b1b1b
  • sideBar.border#000000
  • sideBar.foreground#e5e5e5
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#292929
  • sideBarSectionHeader.foreground#e5e5e5
  • sideBarTitle.foreground#e5e5e5
  • statusBar.background#292929
  • statusBar.border#00000000
  • statusBar.debuggingBackground#053fc5
  • statusBar.debuggingForeground#e5e5e5
  • statusBar.focusBorder#00000000
  • statusBar.foreground#e5e5e5
  • statusBar.noFolderBackground#292929
  • statusBar.noFolderBorder#00000000
  • statusBarItem.prominentBackground#363636
  • statusBarItem.prominentHoverBackground#053fc5
  • tab.activeBackground#292929
  • tab.activeBorderTop#00000000
  • tab.activeForeground#e5e5e5
  • tab.border#2f2f2f
  • tab.hoverBackground#202020
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#888888
  • tab.unfocusedActiveBackground#1f1f1f
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#888888
  • tab.unfocusedHoverBackground#1b1b1b
  • tab.unfocusedInactiveForeground#565656
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#59a5dec0
  • terminal.ansiBrightBlack#1b1b1b
  • terminal.ansiBrightBlue#77bdee
  • terminal.ansiBrightCyan#6ac1dc
  • terminal.ansiBrightGreen#00b3aa
  • terminal.ansiBrightMagenta#cf88dd
  • terminal.ansiBrightRed#eb877a
  • terminal.ansiBrightWhite#eaeaea
  • terminal.ansiBrightYellow#f5dda4
  • terminal.ansiCyan#24b0dbc0
  • terminal.ansiGreen#007a75c0
  • terminal.ansiMagenta#c053d5c0
  • terminal.ansiRed#ff453ac0
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffd60ac0
  • terminal.background#171717
  • terminal.foreground#e5e5e5
  • textLink.activeForeground#59a5de
  • textLink.foreground#59a5de
  • textPreformat.foreground#6ac1dc
  • titleBar.activeBackground#292929
  • titleBar.activeForeground#e5e5e5
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1b1b1b
  • tree.indentGuidesStroke#272727

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text.html#a8b2b9
emphasisitalic
strongbold
header#6ac1dc
*url*, *link*, *uri*underline
invalid#eb877a
punctuation, meta.embedded, source.js, source.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#7f99b1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#585858italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class, comment.block.documentation storage.type.class punctuation#476288italic
comment.block.documentation variable, comment.block.documentation variable.other#007a75italic
constant, constant.numeric, constant.language, support.constant, meta.preprocessor.numeric, keyword.other.unit#cf88dd
string, meta.preprocessor.string#00b3aa
constant.character, constant.regexp#ec7121
punctuation.section.embedded, meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation.begin.bracket, punctuation.definition.interpolation.end.bracket, punctuation.definition.variable.makefile, string.interpolated punctuation.definition.string.begin, string.interpolated punctuation.definition.string.end#59a5de
string.regexp#00b3aa
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, support.other.parenthesis.regexp#7f99b1
punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#dcb1ac
keyword.operator.quantifier.regexp#6ac1dc
string.regexp keyword.other#7f99b1
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#59a5de
entity.name.type.class, support.class, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a89bed
entity.name.type.interface, support.interface, support.type, meta.return-type, meta.return.type, meta.type.name, meta.cast, meta.type.annotation, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#888888
variable.language.this, variable.language.super, variable.this, variable.language.special.self, variable.parameter.function.language.special.self, keyword.other.this, keyword.expressions-and-types.swift#a89bed
keyword, punctuation.definition.keyword#59a5de
keyword.operator#7f99b1
keyword.operator.ternary#59a5de
variable.language, keyword.control.new, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, meta.preprocessor, meta.diff.header, meta.selector#59a5de
keyword.control, keyword.control punctuation.definition.keyword#59a5de
keyword.import, keyword.package, keyword.control.directive, keyword.control.export, keyword.control.import, keyword.other.import, keyword.other.package, meta.import keyword.control, support.type.object.module#59a5de
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java#a89bed
entity.name.function, entity.name.method, entity.name.static.function-call, support.function, support.constant.handlebars, variable.function, keyword.operator.function.infix, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.function.python, meta.function-call.php, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, entity.name.function.go#e5e5e5
entity.name.variable.parameter, variable.parameter, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, meta.at-rule.function variable, meta.at-rule.mixin variable#a8b2b9
meta.decorator entity.name.function, storage.type.annotation, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#a89bed
meta.parameter.type.variable, support.variable, variable.name, variable.other, variable, string.constant.other.placeholder, meta.object-literal.key, meta.decorator.ts meta.object.member, constant.other.key.perl#a8b2b9
meta.object-binding-pattern-variable variable.object.property, meta.import variable.other.readwrite, meta.export variable.other.readwrite#7f99b1
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a8b2b9
meta.export.default variable.other.readwrite#a8b2b9
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml, entity.name.tag.yaml#6ac1dc
constant.other.date, constant.other.timestamp#cf88dd
variable.other.alias.yaml#e5e5e5
source.json meta.structure.dictionary.json support.type.property-name.json#6ac1dc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#59a5de
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7790e4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a89bed
entity.name.tag#59a5debold
tag.close entity.name.tag#59a5de
entity.other.attribute-name, meta.tag.inline.any.html, meta.tag.sgml#a89bed
entity.other.attribute-name.id#ec7121
punctuation.definition.entity.html#ec7121
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#7f99b1
entity.other.attribute-name.parent-selector#59a5de
entity.other.attribute-name.class.css, entity.other.attribute-name.class.less, entity.other.attribute-name.class.sass, entity.other.attribute-name.class.scss#6ac1dc
support.type.property-name.css, support.type.property-name.less, support.type.property-name.sass, support.type.property-name.scss#a89bed
meta.function-call.arguments#a8b2b9
meta.selectionset.graphql variable#00b3aa
meta.selectionset.graphql meta.arguments variable#a8b2b9
source.shell support.function.builtin#a89bed
source.shell support.function.builtin#e5e5e5
punctuation.definition.variable.shell, source.shell variable.other#a89bed
string.interpolated.backtick.shell, string.interpolated.dollar.shell#59a5de
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string#a8b2b9
meta.scope.prerequisites#a89bed
entity.name.function.target#00b3aabold
meta.function-parameters.lisp#e5e5e5
markup.underlineunderline
markup.bold#ec7121bold
markup.italicitalic
markup.heading, entity.name.section#6ac1dcbold
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a89bedunderline
markup.underline.link, markup.underline.link.image#7f99b1
markup.inline.raw, markup.raw.restructuredtext#59a5de
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#59a5de
entity.name.directive.restructuredtext, markup.quote#00b3aa
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext, markup.punctuation.quote.beginning, markup.punctuation.list.beginning#cf88dd
meta.separator.markdown#7f99b1
punctuation.definition.constant.restructuredtext#cf88dd
markup.inserted#63f279
markup.deleted#eb877a
markup.changed#6ac1dc
source.go entity.name.import#00b3aa
source.go entity.name.type#a8b2b9
keyword.control.cucumber.table#e5e5e5
metatag.php#59a5de
support.function.git-rebase#59a5de
constant.sha.git-rebase#00b3aa
Base Minor by adamsome - VS Code Theme