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#7a7ab810
  • activityBar.activeBorder#b87ab880
  • activityBar.background#0d1926
  • activityBar.foreground#acacac
  • activityBar.inactiveForeground#525252
  • activityBarBadge.background#b87ab8
  • activityBarBadge.foreground#0d1926
  • badge.background#000000
  • badge.foreground#acacac
  • breadcrumb.activeSelectionForeground#acacac
  • breadcrumb.background#0d1926
  • breadcrumb.focusForeground#acacac
  • breadcrumb.foreground#525252
  • breadcrumbPicker.background#0c0c0c
  • button.background#191919
  • button.foreground#acacac
  • checkbox.background#191919
  • checkbox.border#0c0c0c
  • checkbox.foreground#acacac
  • contrastBorder#0c0c0c
  • debugToolBar.background#191919
  • diffEditor.insertedTextBackground#7ab87a20
  • diffEditor.removedTextBackground#b87a7a50
  • dropdown.background#0d1926
  • dropdown.border#0c0c0c
  • dropdown.foreground#acacac
  • editor.background#0d1926
  • editor.findMatchBackground#b8b87a80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#26262675
  • editor.foldBackground#191919
  • editor.foreground#acacac
  • editor.hoverHighlightBackground#0c0c0c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#7a7ab815
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#0d1926
  • editor.snippetFinalTabstopHighlightBorder#7ab87a
  • editor.snippetTabstopHighlightBackground#0d1926
  • editor.snippetTabstopHighlightBorder#525252
  • editor.wordHighlightBackground#7ab8b850
  • editor.wordHighlightStrongBackground#7ab87a50
  • editorCodeLens.foreground#525252
  • editorError.foreground#b87a7a
  • editorGroup.border#7a7ab8
  • editorGroup.dropBackground#26262670
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGutter.addedBackground#7ab87a80
  • editorGutter.deletedBackground#b87a7a80
  • editorGutter.modifiedBackground#7ab8b880
  • editorHoverWidget.background#0d1926
  • editorHoverWidget.border#525252
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#525252
  • editorLink.activeForeground#7ab8b8
  • editorMarkerNavigation.background#191919
  • editorOverviewRuler.addedForeground#7ab87a80
  • editorOverviewRuler.border#0c0c0c
  • editorOverviewRuler.currentContentForeground#7ab87a
  • editorOverviewRuler.deletedForeground#b87a7a80
  • editorOverviewRuler.errorForeground#b87a7a80
  • editorOverviewRuler.incomingContentForeground#7a7ab8
  • editorOverviewRuler.infoForeground#7ab8b880
  • editorOverviewRuler.modifiedForeground#7ab8b880
  • editorOverviewRuler.selectionHighlightForeground#b8b87a
  • editorOverviewRuler.warningForeground#b8b87a80
  • editorOverviewRuler.wordHighlightForeground#7ab8b8
  • editorOverviewRuler.wordHighlightStrongForeground#7ab87a
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#191919
  • editorSuggestWidget.foreground#acacac
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#b8b87a
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#191919
  • errorForeground#b87a7a
  • extensionButton.prominentBackground#7ab87a90
  • extensionButton.prominentForeground#acacac
  • extensionButton.prominentHoverBackground#7ab87a60
  • focusBorder#525252
  • foreground#acacac
  • gitDecoration.conflictingResourceForeground#b8b87a
  • gitDecoration.deletedResourceForeground#b87a7a
  • gitDecoration.ignoredResourceForeground#525252
  • gitDecoration.modifiedResourceForeground#7ab8b8
  • gitDecoration.untrackedResourceForeground#7ab87a
  • input.background#0d1926
  • input.border#0c0c0c
  • input.foreground#acacac
  • input.placeholderForeground#525252
  • inputOption.activeBorder#7a7ab8
  • inputValidation.errorBackground#0d1926
  • inputValidation.errorBorder#b87a7a
  • inputValidation.errorForeground#b87a7a
  • inputValidation.infoBackground#0d1926
  • inputValidation.infoBorder#7a7ab8
  • inputValidation.infoForeground#7a7ab8
  • inputValidation.warningBackground#0d1926
  • inputValidation.warningBorder#b8b87a
  • inputValidation.warningForeground#b8b87a
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#acacac
  • list.dropBackground#000000
  • list.errorForeground#b87a7a
  • list.focusBackground#26262675
  • list.highlightForeground#7ab8b8
  • list.hoverBackground#26262675
  • list.inactiveSelectionBackground#26262675
  • list.warningForeground#b8b87a
  • listFilterWidget.background#0d1926
  • listFilterWidget.noMatchesOutline#b87a7a
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#7ab87a90
  • merge.incomingHeaderBackground#7a7ab890
  • notification.background#0d1926
  • notification.buttonBackground#000000
  • notification.buttonForeground#acacac
  • notification.buttonHoverBackground#26262675
  • notification.errorBackground#b87a7a
  • notification.errorForeground#0d1926
  • notification.foreground#acacac
  • notification.infoBackground#7a7ab8
  • notification.infoForeground#0d1926
  • notification.warningBackground#b8b87a
  • notification.warningForeground#0d1926
  • notificationCenter.border#191919
  • notificationCenterHeader.background#0d1926
  • notificationCenterHeader.foreground#acacac
  • notificationLink.foreground#7ab8b8
  • notifications.background#0d1926
  • notifications.border#191919
  • notifications.foreground#acacac
  • notificationsErrorIcon.foreground#b87a7a
  • notificationsInfoIcon.foreground#7a7ab8
  • notificationsWarningIcon.foreground#b8b87a
  • notificationToast.border#191919
  • panel.background#0d1926
  • panel.border#7a7ab8
  • panelInput.border#acacac
  • panelTitle.activeBorder#b87ab8
  • panelTitle.activeForeground#acacac
  • panelTitle.inactiveForeground#525252
  • peekView.border#000000
  • peekViewEditor.background#0d1926
  • peekViewEditor.matchHighlightBackground#dbdbbd80
  • peekViewResult.background#191919
  • peekViewResult.fileForeground#acacac
  • peekViewResult.lineForeground#acacac
  • peekViewResult.matchHighlightBackground#dbdbbd80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#acacac
  • peekViewTitle.background#0c0c0c
  • peekViewTitleDescription.foreground#525252
  • peekViewTitleLabel.foreground#acacac
  • pickerGroup.border#7a7ab8
  • pickerGroup.foreground#7ab8b8
  • progressBar.background#b87ab8
  • scrollbar.shadow#444444
  • selection.background#7a7ab8
  • settings.checkboxBackground#191919
  • settings.checkboxBorder#0c0c0c
  • settings.checkboxForeground#acacac
  • settings.dropdownBackground#191919
  • settings.dropdownBorder#0c0c0c
  • settings.dropdownForeground#acacac
  • settings.headerForeground#acacac
  • settings.modifiedItemIndicator#b8b87a
  • settings.numberInputBackground#191919
  • settings.numberInputBorder#0c0c0c
  • settings.numberInputForeground#acacac
  • settings.textInputBackground#191919
  • settings.textInputBorder#0c0c0c
  • settings.textInputForeground#acacac
  • sideBar.background#191919
  • sideBarSectionHeader.background#0d1926
  • sideBarSectionHeader.border#0c0c0c
  • sideBarTitle.foreground#acacac
  • statusBar.background#0c0c0c
  • statusBar.debuggingBackground#b87a7a
  • statusBar.debuggingForeground#0c0c0c
  • statusBar.foreground#acacac
  • statusBar.noFolderBackground#0c0c0c
  • statusBar.noFolderForeground#acacac
  • statusBarItem.prominentBackground#b87a7a
  • statusBarItem.prominentHoverBackground#b8b87a
  • statusBarItem.remoteBackground#7a7ab8
  • statusBarItem.remoteForeground#0d1926
  • tab.activeBackground#0d1926
  • tab.activeBorderTop#b87ab880
  • tab.activeForeground#acacac
  • tab.border#0c0c0c
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#525252
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7a7ab8
  • terminal.ansiBrightBlack#262626
  • terminal.ansiBrightBlue#bdbddb
  • terminal.ansiBrightCyan#bddbdb
  • terminal.ansiBrightGreen#bddbbd
  • terminal.ansiBrightMagenta#dbbddb
  • terminal.ansiBrightRed#dbbdbd
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#dbdbbd
  • terminal.ansiCyan#7ab8b8
  • terminal.ansiGreen#7ab87a
  • terminal.ansiMagenta#b87ab8
  • terminal.ansiRed#b87a7a
  • terminal.ansiWhite#d9d9d9
  • terminal.ansiYellow#b8b87a
  • terminal.background#0d1926
  • terminal.border#acacac
  • terminal.foreground#acacac
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#191919
  • titleBar.activeBackground#191919
  • titleBar.activeForeground#acacac
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#525252
  • walkThrough.embeddedEditorBackground#191919
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#26262675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#7a7ab8
source#acacac
meta.diff, meta.diff.header#525252
markup.inserted#7ab87a
markup.deleted#b87a7a
markup.changed#b8b87a
invalid#b87a7aunderline italic
invalid.deprecated#acacacunderline italic
entity.name.filename#dbdbbd
markup.error#b87a7a
markup.underlineunderline
markup.bold#b8b87abold
markup.heading#7a7ab8bold
markup.italic#dbdbbditalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7ab8b8
markup.inline.raw, markup.raw.restructuredtext#7ab87a
markup.underline.link, markup.underline.link.image#7ab8b8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b87ab8
entity.name.directive.restructuredtext, markup.quote#dbdbbditalic
meta.separator.markdown#525252
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7ab87a
punctuation.definition.constant.restructuredtext#7a7ab8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7a7ab8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#acacac
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dbdbbd
entity.name.type.class, entity.name.class#7ab8b8normal
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#7a7ab8italic
entity.other.inherited-class#7ab8b8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#525252
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b87ab8
comment.block.documentation entity.name.type#7ab8b8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#7ab8b8
comment.block.documentation variable#b8b87aitalic
constant, variable.other.constant#7a7ab8
constant.character.escape, constant.character.string.escape, constant.regexp#b87ab8
entity.name.tag#b87ab8
entity.other.attribute-name.parent-selector#b87ab8
entity.other.attribute-name#7ab87aitalic
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#7ab87a
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#b8b87aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#7ab87aitalic
meta.decorator variable.other.object#7ab87a
keyword, punctuation.definition.keyword#b87ab8
keyword.control.new, keyword.operator.newbold
meta.selector#b87ab8
support#7ab8b8italic
support.function.magic, support.variable, variable.other.predefined#7a7ab8regular
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#b87ab8
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#acacac
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#b87ab8
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7ab8b8
constant.other.date, constant.other.timestamp#b8b87a
variable.other.alias.yaml#7ab87aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b87ab8regular
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#7ab8b8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#b8b87a
storage.modifier#b87ab8
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dbdbbd
punctuation.definition.group.capture.regexp#b87ab8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b87a7a
punctuation.definition.character-class.regexp#7ab8b8
punctuation.definition.group.regexp#b8b87a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b87a7a
meta.assertion.look-ahead.regexp#7ab87a
string#dbdbbd
punctuation.definition.string.begin, punctuation.definition.string.end#bdbddb
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7a7ab8
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#525252
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#acacac
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#b8b87aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#acacacnormal
meta.selectionset.graphql variable#dbdbbd
meta.selectionset.graphql meta.arguments variable#acacac
entity.name.fragment.graphql, variable.fragment.graphql#7ab8b8
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#acacac
source.shell variable.other#7a7ab8
support.constant#7a7ab8normal
meta.scope.prerequisites.makefile#dbdbbd
meta.attribute-selector.scss#dbdbbd
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#acacac
meta.preprocessor.haskell#525252
Tinted VSCode by Tinted Theming - VS Code Theme