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#1d80ef10
  • activityBar.activeBorder#8800a080
  • activityBar.background#1c262b
  • activityBar.foreground#989898
  • activityBar.inactiveForeground#818181
  • activityBarBadge.background#8800a0
  • activityBarBadge.foreground#1c262b
  • badge.background#000000
  • badge.foreground#989898
  • breadcrumb.activeSelectionForeground#989898
  • breadcrumb.background#1c262b
  • breadcrumb.focusForeground#989898
  • breadcrumb.foreground#818181
  • breadcrumbPicker.background#272727
  • button.background#4e4e4e
  • button.foreground#989898
  • checkbox.background#4e4e4e
  • checkbox.border#272727
  • checkbox.foreground#989898
  • contrastBorder#272727
  • debugToolBar.background#4e4e4e
  • diffEditor.insertedTextBackground#3fa33f20
  • diffEditor.removedTextBackground#ee2a2950
  • dropdown.background#1c262b
  • dropdown.border#272727
  • dropdown.foreground#989898
  • editor.background#1c262b
  • editor.findMatchBackground#fee92e80
  • editor.findMatchHighlightBackground#fffefe40
  • editor.findRangeHighlightBackground#76767675
  • editor.foldBackground#4e4e4e
  • editor.foreground#989898
  • editor.hoverHighlightBackground#272727
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#1d80ef15
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#1c262b
  • editor.snippetFinalTabstopHighlightBorder#3fa33f
  • editor.snippetTabstopHighlightBackground#1c262b
  • editor.snippetTabstopHighlightBorder#818181
  • editor.wordHighlightBackground#16aec950
  • editor.wordHighlightStrongBackground#3fa33f50
  • editorCodeLens.foreground#818181
  • editorError.foreground#ee2a29
  • editorGroup.border#1d80ef
  • editorGroup.dropBackground#76767670
  • editorGroupHeader.tabsBackground#272727
  • editorGutter.addedBackground#3fa33f80
  • editorGutter.deletedBackground#ee2a2980
  • editorGutter.modifiedBackground#16aec980
  • editorHoverWidget.background#1c262b
  • editorHoverWidget.border#818181
  • editorIndentGuide.activeBackground#fffefe45
  • editorIndentGuide.background#fffefe1A
  • editorLineNumber.foreground#818181
  • editorLink.activeForeground#16aec9
  • editorMarkerNavigation.background#4e4e4e
  • editorOverviewRuler.addedForeground#3fa33f80
  • editorOverviewRuler.border#272727
  • editorOverviewRuler.currentContentForeground#3fa33f
  • editorOverviewRuler.deletedForeground#ee2a2980
  • editorOverviewRuler.errorForeground#ee2a2980
  • editorOverviewRuler.incomingContentForeground#1d80ef
  • editorOverviewRuler.infoForeground#16aec980
  • editorOverviewRuler.modifiedForeground#16aec980
  • editorOverviewRuler.selectionHighlightForeground#fee92e
  • editorOverviewRuler.warningForeground#fee92e80
  • editorOverviewRuler.wordHighlightForeground#16aec9
  • editorOverviewRuler.wordHighlightStrongForeground#3fa33f
  • editorRuler.foreground#fffefe1A
  • editorSuggestWidget.background#4e4e4e
  • editorSuggestWidget.foreground#989898
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#fee92e
  • editorWhitespace.foreground#fffefe1A
  • editorWidget.background#4e4e4e
  • errorForeground#ee2a29
  • extensionButton.prominentBackground#3fa33f90
  • extensionButton.prominentForeground#989898
  • extensionButton.prominentHoverBackground#3fa33f60
  • focusBorder#818181
  • foreground#989898
  • gitDecoration.conflictingResourceForeground#fee92e
  • gitDecoration.deletedResourceForeground#ee2a29
  • gitDecoration.ignoredResourceForeground#818181
  • gitDecoration.modifiedResourceForeground#16aec9
  • gitDecoration.untrackedResourceForeground#3fa33f
  • input.background#1c262b
  • input.border#272727
  • input.foreground#989898
  • input.placeholderForeground#818181
  • inputOption.activeBorder#1d80ef
  • inputValidation.errorBackground#1c262b
  • inputValidation.errorBorder#ee2a29
  • inputValidation.errorForeground#ee2a29
  • inputValidation.infoBackground#1c262b
  • inputValidation.infoBorder#1d80ef
  • inputValidation.infoForeground#1d80ef
  • inputValidation.warningBackground#1c262b
  • inputValidation.warningBorder#fee92e
  • inputValidation.warningForeground#fee92e
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#989898
  • list.dropBackground#000000
  • list.errorForeground#ee2a29
  • list.focusBackground#76767675
  • list.highlightForeground#16aec9
  • list.hoverBackground#76767675
  • list.inactiveSelectionBackground#76767675
  • list.warningForeground#fee92e
  • listFilterWidget.background#1c262b
  • listFilterWidget.noMatchesOutline#ee2a29
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#3fa33f90
  • merge.incomingHeaderBackground#1d80ef90
  • notification.background#1c262b
  • notification.buttonBackground#000000
  • notification.buttonForeground#989898
  • notification.buttonHoverBackground#76767675
  • notification.errorBackground#ee2a29
  • notification.errorForeground#1c262b
  • notification.foreground#989898
  • notification.infoBackground#1d80ef
  • notification.infoForeground#1c262b
  • notification.warningBackground#fee92e
  • notification.warningForeground#1c262b
  • notificationCenter.border#4e4e4e
  • notificationCenterHeader.background#1c262b
  • notificationCenterHeader.foreground#989898
  • notificationLink.foreground#16aec9
  • notifications.background#1c262b
  • notifications.border#4e4e4e
  • notifications.foreground#989898
  • notificationsErrorIcon.foreground#ee2a29
  • notificationsInfoIcon.foreground#1d80ef
  • notificationsWarningIcon.foreground#fee92e
  • notificationToast.border#4e4e4e
  • panel.background#1c262b
  • panel.border#1d80ef
  • panelInput.border#989898
  • panelTitle.activeBorder#8800a0
  • panelTitle.activeForeground#989898
  • panelTitle.inactiveForeground#818181
  • peekView.border#000000
  • peekViewEditor.background#1c262b
  • peekViewEditor.matchHighlightBackground#fef06380
  • peekViewResult.background#4e4e4e
  • peekViewResult.fileForeground#989898
  • peekViewResult.lineForeground#989898
  • peekViewResult.matchHighlightBackground#fef06380
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#989898
  • peekViewTitle.background#272727
  • peekViewTitleDescription.foreground#818181
  • peekViewTitleLabel.foreground#989898
  • pickerGroup.border#1d80ef
  • pickerGroup.foreground#16aec9
  • progressBar.background#8800a0
  • scrollbar.shadow#444444
  • selection.background#1d80ef
  • settings.checkboxBackground#4e4e4e
  • settings.checkboxBorder#272727
  • settings.checkboxForeground#989898
  • settings.dropdownBackground#4e4e4e
  • settings.dropdownBorder#272727
  • settings.dropdownForeground#989898
  • settings.headerForeground#989898
  • settings.modifiedItemIndicator#fee92e
  • settings.numberInputBackground#4e4e4e
  • settings.numberInputBorder#272727
  • settings.numberInputForeground#989898
  • settings.textInputBackground#4e4e4e
  • settings.textInputBorder#272727
  • settings.textInputForeground#989898
  • sideBar.background#4e4e4e
  • sideBarSectionHeader.background#1c262b
  • sideBarSectionHeader.border#272727
  • sideBarTitle.foreground#989898
  • statusBar.background#272727
  • statusBar.debuggingBackground#ee2a29
  • statusBar.debuggingForeground#272727
  • statusBar.foreground#989898
  • statusBar.noFolderBackground#272727
  • statusBar.noFolderForeground#989898
  • statusBarItem.prominentBackground#ee2a29
  • statusBarItem.prominentHoverBackground#fee92e
  • statusBarItem.remoteBackground#1d80ef
  • statusBarItem.remoteForeground#1c262b
  • tab.activeBackground#1c262b
  • tab.activeBorderTop#8800a080
  • tab.activeForeground#989898
  • tab.border#272727
  • tab.inactiveBackground#4e4e4e
  • tab.inactiveForeground#818181
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1d80ef
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#53a4f3
  • terminal.ansiBrightCyan#42c6d9
  • terminal.ansiBrightGreen#70be71
  • terminal.ansiBrightMagenta#a94dbb
  • terminal.ansiBrightRed#dc5b60
  • terminal.ansiBrightWhite#fffefe
  • terminal.ansiBrightYellow#fef063
  • terminal.ansiCyan#16aec9
  • terminal.ansiGreen#3fa33f
  • terminal.ansiMagenta#8800a0
  • terminal.ansiRed#ee2a29
  • terminal.ansiWhite#a4a4a4
  • terminal.ansiYellow#fee92e
  • terminal.background#1c262b
  • terminal.border#989898
  • terminal.foreground#989898
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#4e4e4e
  • titleBar.activeBackground#4e4e4e
  • titleBar.activeForeground#989898
  • titleBar.inactiveBackground#272727
  • titleBar.inactiveForeground#818181
  • walkThrough.embeddedEditorBackground#4e4e4e
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#76767675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#1d80ef
source#989898
meta.diff, meta.diff.header#818181
markup.inserted#3fa33f
markup.deleted#ee2a29
markup.changed#fee92e
invalid#ee2a29underline italic
invalid.deprecated#989898underline italic
entity.name.filename#fef063
markup.error#ee2a29
markup.underlineunderline
markup.bold#fee92ebold
markup.heading#1d80efbold
markup.italic#fef063italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#16aec9
markup.inline.raw, markup.raw.restructuredtext#3fa33f
markup.underline.link, markup.underline.link.image#16aec9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8800a0
entity.name.directive.restructuredtext, markup.quote#fef063italic
meta.separator.markdown#818181
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3fa33f
punctuation.definition.constant.restructuredtext#1d80ef
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#1d80ef
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#989898
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fef063
entity.name.type.class, entity.name.class#16aec9normal
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#1d80efitalic
entity.other.inherited-class#16aec9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#818181
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8800a0
comment.block.documentation entity.name.type#16aec9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#16aec9
comment.block.documentation variable#fee92eitalic
constant, variable.other.constant#1d80ef
constant.character.escape, constant.character.string.escape, constant.regexp#8800a0
entity.name.tag#8800a0
entity.other.attribute-name.parent-selector#8800a0
entity.other.attribute-name#3fa33fitalic
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#3fa33f
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#fee92eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3fa33fitalic
meta.decorator variable.other.object#3fa33f
keyword, punctuation.definition.keyword#8800a0
keyword.control.new, keyword.operator.newbold
meta.selector#8800a0
support#16aec9italic
support.function.magic, support.variable, variable.other.predefined#1d80efregular
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#8800a0
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#989898
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#8800a0
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#16aec9
constant.other.date, constant.other.timestamp#fee92e
variable.other.alias.yaml#3fa33fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8800a0regular
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#16aec9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fee92e
storage.modifier#8800a0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fef063
punctuation.definition.group.capture.regexp#8800a0
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee2a29
punctuation.definition.character-class.regexp#16aec9
punctuation.definition.group.regexp#fee92e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee2a29
meta.assertion.look-ahead.regexp#3fa33f
string#fef063
punctuation.definition.string.begin, punctuation.definition.string.end#53a4f3
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#1d80ef
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#818181
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#989898
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fee92eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#989898normal
meta.selectionset.graphql variable#fef063
meta.selectionset.graphql meta.arguments variable#989898
entity.name.fragment.graphql, variable.fragment.graphql#16aec9
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#989898
source.shell variable.other#1d80ef
support.constant#1d80efnormal
meta.scope.prerequisites.makefile#fef063
meta.attribute-selector.scss#fef063
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#989898
meta.preprocessor.haskell#818181
Tinted VSCode by Tinted Theming - VS Code Theme