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.activeBackground#268bd210
  • activityBar.activeBorder#d3368280
  • activityBar.background#002b36
  • activityBar.foreground#b2b8ad
  • activityBar.inactiveForeground#3b5a5d
  • activityBarBadge.background#d33682
  • activityBarBadge.foreground#002b36
  • badge.background#073642
  • badge.foreground#b2b8ad
  • breadcrumb.activeSelectionForeground#b2b8ad
  • breadcrumb.background#002b36
  • breadcrumb.focusForeground#b2b8ad
  • breadcrumb.foreground#3b5a5d
  • breadcrumbPicker.background#000e12
  • button.background#001c24
  • button.foreground#b2b8ad
  • checkbox.background#001c24
  • checkbox.border#000e12
  • checkbox.foreground#b2b8ad
  • contrastBorder#000e12
  • debugToolBar.background#001c24
  • diffEditor.insertedTextBackground#85990020
  • diffEditor.removedTextBackground#dc322f50
  • dropdown.background#002b36
  • dropdown.border#000e12
  • dropdown.foreground#b2b8ad
  • editor.background#002b36
  • editor.findMatchBackground#b5890080
  • editor.findMatchHighlightBackground#fdf6e340
  • editor.findRangeHighlightBackground#002b3675
  • editor.foldBackground#001c24
  • editor.foreground#b2b8ad
  • editor.hoverHighlightBackground#000e12
  • editor.lineHighlightBorder#073642
  • editor.rangeHighlightBackground#268bd215
  • editor.selectionBackground#073642
  • editor.selectionHighlightBackground#073642
  • editor.snippetFinalTabstopHighlightBackground#002b36
  • editor.snippetFinalTabstopHighlightBorder#859900
  • editor.snippetTabstopHighlightBackground#002b36
  • editor.snippetTabstopHighlightBorder#3b5a5d
  • editor.wordHighlightBackground#2aa19850
  • editor.wordHighlightStrongBackground#85990050
  • editorCodeLens.foreground#3b5a5d
  • editorError.foreground#dc322f
  • editorGroup.border#268bd2
  • editorGroup.dropBackground#002b3670
  • editorGroupHeader.tabsBackground#000e12
  • editorGutter.addedBackground#85990080
  • editorGutter.deletedBackground#dc322f80
  • editorGutter.modifiedBackground#2aa19880
  • editorHoverWidget.background#002b36
  • editorHoverWidget.border#3b5a5d
  • editorIndentGuide.activeBackground#fdf6e345
  • editorIndentGuide.background#fdf6e31A
  • editorLineNumber.foreground#3b5a5d
  • editorLink.activeForeground#2aa198
  • editorMarkerNavigation.background#001c24
  • editorOverviewRuler.addedForeground#85990080
  • editorOverviewRuler.border#000e12
  • editorOverviewRuler.currentContentForeground#859900
  • editorOverviewRuler.deletedForeground#dc322f80
  • editorOverviewRuler.errorForeground#dc322f80
  • editorOverviewRuler.incomingContentForeground#268bd2
  • editorOverviewRuler.infoForeground#2aa19880
  • editorOverviewRuler.modifiedForeground#2aa19880
  • editorOverviewRuler.selectionHighlightForeground#b58900
  • editorOverviewRuler.warningForeground#b5890080
  • editorOverviewRuler.wordHighlightForeground#2aa198
  • editorOverviewRuler.wordHighlightStrongForeground#859900
  • editorRuler.foreground#fdf6e31A
  • editorSuggestWidget.background#001c24
  • editorSuggestWidget.foreground#b2b8ad
  • editorSuggestWidget.selectedBackground#073642
  • editorWarning.foreground#b58900
  • editorWhitespace.foreground#fdf6e31A
  • editorWidget.background#001c24
  • errorForeground#dc322f
  • extensionButton.prominentBackground#85990090
  • extensionButton.prominentForeground#b2b8ad
  • extensionButton.prominentHoverBackground#85990060
  • focusBorder#3b5a5d
  • foreground#b2b8ad
  • gitDecoration.conflictingResourceForeground#b58900
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#3b5a5d
  • gitDecoration.modifiedResourceForeground#2aa198
  • gitDecoration.untrackedResourceForeground#859900
  • input.background#002b36
  • input.border#000e12
  • input.foreground#b2b8ad
  • input.placeholderForeground#3b5a5d
  • inputOption.activeBorder#268bd2
  • inputValidation.errorBackground#002b36
  • inputValidation.errorBorder#dc322f
  • inputValidation.errorForeground#dc322f
  • inputValidation.infoBackground#002b36
  • inputValidation.infoBorder#268bd2
  • inputValidation.infoForeground#268bd2
  • inputValidation.warningBackground#002b36
  • inputValidation.warningBorder#b58900
  • inputValidation.warningForeground#b58900
  • list.activeSelectionBackground#073642
  • list.activeSelectionForeground#b2b8ad
  • list.dropBackground#073642
  • list.errorForeground#dc322f
  • list.focusBackground#002b3675
  • list.highlightForeground#2aa198
  • list.hoverBackground#002b3675
  • list.inactiveSelectionBackground#002b3675
  • list.warningForeground#b58900
  • listFilterWidget.background#002b36
  • listFilterWidget.noMatchesOutline#dc322f
  • listFilterWidget.outline#073642
  • merge.currentHeaderBackground#85990090
  • merge.incomingHeaderBackground#268bd290
  • notification.background#002b36
  • notification.buttonBackground#073642
  • notification.buttonForeground#b2b8ad
  • notification.buttonHoverBackground#002b3675
  • notification.errorBackground#dc322f
  • notification.errorForeground#002b36
  • notification.foreground#b2b8ad
  • notification.infoBackground#268bd2
  • notification.infoForeground#002b36
  • notification.warningBackground#b58900
  • notification.warningForeground#002b36
  • notificationCenter.border#001c24
  • notificationCenterHeader.background#002b36
  • notificationCenterHeader.foreground#b2b8ad
  • notificationLink.foreground#2aa198
  • notifications.background#002b36
  • notifications.border#001c24
  • notifications.foreground#b2b8ad
  • notificationsErrorIcon.foreground#dc322f
  • notificationsInfoIcon.foreground#268bd2
  • notificationsWarningIcon.foreground#b58900
  • notificationToast.border#001c24
  • panel.background#002b36
  • panel.border#268bd2
  • panelInput.border#b2b8ad
  • panelTitle.activeBorder#d33682
  • panelTitle.activeForeground#b2b8ad
  • panelTitle.inactiveForeground#3b5a5d
  • peekView.border#073642
  • peekViewEditor.background#002b36
  • peekViewEditor.matchHighlightBackground#657b8380
  • peekViewResult.background#001c24
  • peekViewResult.fileForeground#b2b8ad
  • peekViewResult.lineForeground#b2b8ad
  • peekViewResult.matchHighlightBackground#657b8380
  • peekViewResult.selectionBackground#073642
  • peekViewResult.selectionForeground#b2b8ad
  • peekViewTitle.background#000e12
  • peekViewTitleDescription.foreground#3b5a5d
  • peekViewTitleLabel.foreground#b2b8ad
  • pickerGroup.border#268bd2
  • pickerGroup.foreground#2aa198
  • progressBar.background#d33682
  • scrollbar.shadow#444444
  • selection.background#268bd2
  • settings.checkboxBackground#001c24
  • settings.checkboxBorder#000e12
  • settings.checkboxForeground#b2b8ad
  • settings.dropdownBackground#001c24
  • settings.dropdownBorder#000e12
  • settings.dropdownForeground#b2b8ad
  • settings.headerForeground#b2b8ad
  • settings.modifiedItemIndicator#b58900
  • settings.numberInputBackground#001c24
  • settings.numberInputBorder#000e12
  • settings.numberInputForeground#b2b8ad
  • settings.textInputBackground#001c24
  • settings.textInputBorder#000e12
  • settings.textInputForeground#b2b8ad
  • sideBar.background#001c24
  • sideBarSectionHeader.background#002b36
  • sideBarSectionHeader.border#000e12
  • sideBarTitle.foreground#b2b8ad
  • statusBar.background#000e12
  • statusBar.debuggingBackground#dc322f
  • statusBar.debuggingForeground#000e12
  • statusBar.foreground#b2b8ad
  • statusBar.noFolderBackground#000e12
  • statusBar.noFolderForeground#b2b8ad
  • statusBarItem.prominentBackground#dc322f
  • statusBarItem.prominentHoverBackground#b58900
  • statusBarItem.remoteBackground#268bd2
  • statusBarItem.remoteForeground#002b36
  • tab.activeBackground#002b36
  • tab.activeBorderTop#d3368280
  • tab.activeForeground#b2b8ad
  • tab.border#000e12
  • tab.inactiveBackground#001c24
  • tab.inactiveForeground#3b5a5d
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#002b36
  • terminal.border#b2b8ad
  • terminal.foreground#b2b8ad
  • terminal.selectionBackground#07364250
  • textBlockQuote.background#001c24
  • titleBar.activeBackground#001c24
  • titleBar.activeForeground#b2b8ad
  • titleBar.inactiveBackground#000e12
  • titleBar.inactiveForeground#3b5a5d
  • walkThrough.embeddedEditorBackground#001c24
  • welcomePage.buttonBackground#073642
  • welcomePage.buttonHoverBackground#002b3675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#268bd2
source#b2b8ad
meta.diff, meta.diff.header#3b5a5d
markup.inserted#859900
markup.deleted#dc322f
markup.changed#b58900
invalid#dc322funderline italic
invalid.deprecated#b2b8adunderline italic
entity.name.filename#657b83
markup.error#dc322f
markup.underlineunderline
markup.bold#b58900bold
markup.heading#268bd2bold
markup.italic#657b83italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2aa198
markup.inline.raw, markup.raw.restructuredtext#859900
markup.underline.link, markup.underline.link.image#2aa198
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#d33682
entity.name.directive.restructuredtext, markup.quote#657b83italic
meta.separator.markdown#3b5a5d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#859900
punctuation.definition.constant.restructuredtext#268bd2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#268bd2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b2b8ad
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#657b83
entity.name.type.class, entity.name.class#2aa198normal
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#268bd2italic
entity.other.inherited-class#2aa198italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#3b5a5d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#d33682
comment.block.documentation entity.name.type#2aa198italic
comment.block.documentation entity.name.type punctuation.definition.bracket#2aa198
comment.block.documentation variable#b58900italic
constant, variable.other.constant#268bd2
constant.character.escape, constant.character.string.escape, constant.regexp#d33682
entity.name.tag#d33682
entity.other.attribute-name.parent-selector#d33682
entity.other.attribute-name#859900italic
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#859900
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#b58900italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#859900italic
meta.decorator variable.other.object#859900
keyword, punctuation.definition.keyword#d33682
keyword.control.new, keyword.operator.newbold
meta.selector#d33682
support#2aa198italic
support.function.magic, support.variable, variable.other.predefined#268bd2regular
support.function, support.type.property-nameregular
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#d33682
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#b2b8ad
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#d33682
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2aa198
constant.other.date, constant.other.timestamp#b58900
variable.other.alias.yaml#859900italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d33682regular
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#2aa198italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b58900
storage.modifier#d33682
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#657b83
punctuation.definition.group.capture.regexp#d33682
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#dc322f
punctuation.definition.character-class.regexp#2aa198
punctuation.definition.group.regexp#b58900
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#dc322f
meta.assertion.look-ahead.regexp#859900
string#657b83
punctuation.definition.string.begin, punctuation.definition.string.end#839496
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#268bd2
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#3b5a5d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b2b8ad
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#b58900italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b2b8adnormal
meta.selectionset.graphql variable#657b83
meta.selectionset.graphql meta.arguments variable#b2b8ad
entity.name.fragment.graphql, variable.fragment.graphql#2aa198
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#b2b8ad
source.shell variable.other#268bd2
support.constant#268bd2normal
meta.scope.prerequisites.makefile#657b83
meta.attribute-selector.scss#657b83
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b2b8ad
meta.preprocessor.haskell#3b5a5d
Tinted VSCode by Tinted Theming - VS Code Theme