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#008df810
  • activityBar.activeBorder#6c43a580
  • activityBar.background#0d0f18
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#727272
  • activityBarBadge.background#6c43a5
  • activityBarBadge.foreground#0d0f18
  • badge.background#222222
  • badge.foreground#d0d0d0
  • breadcrumb.activeSelectionForeground#d0d0d0
  • breadcrumb.background#0d0f18
  • breadcrumb.focusForeground#d0d0d0
  • breadcrumb.foreground#727272
  • breadcrumbPicker.background#161616
  • button.background#2d2d2d
  • button.foreground#d0d0d0
  • checkbox.background#2d2d2d
  • checkbox.border#161616
  • checkbox.foreground#d0d0d0
  • contrastBorder#161616
  • debugToolBar.background#2d2d2d
  • diffEditor.insertedTextBackground#8ce00a20
  • diffEditor.removedTextBackground#ff000f50
  • dropdown.background#0d0f18
  • dropdown.border#161616
  • dropdown.foreground#d0d0d0
  • editor.background#0d0f18
  • editor.findMatchBackground#ffb90080
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#44444475
  • editor.foldBackground#2d2d2d
  • editor.foreground#d0d0d0
  • editor.hoverHighlightBackground#161616
  • editor.lineHighlightBorder#222222
  • editor.rangeHighlightBackground#008df815
  • editor.selectionBackground#222222
  • editor.selectionHighlightBackground#222222
  • editor.snippetFinalTabstopHighlightBackground#0d0f18
  • editor.snippetFinalTabstopHighlightBorder#8ce00a
  • editor.snippetTabstopHighlightBackground#0d0f18
  • editor.snippetTabstopHighlightBorder#727272
  • editor.wordHighlightBackground#00d7eb50
  • editor.wordHighlightStrongBackground#8ce00a50
  • editorCodeLens.foreground#727272
  • editorError.foreground#ff000f
  • editorGroup.border#008df8
  • editorGroup.dropBackground#44444470
  • editorGroupHeader.tabsBackground#161616
  • editorGutter.addedBackground#8ce00a80
  • editorGutter.deletedBackground#ff000f80
  • editorGutter.modifiedBackground#00d7eb80
  • editorHoverWidget.background#0d0f18
  • editorHoverWidget.border#727272
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#727272
  • editorLink.activeForeground#00d7eb
  • editorMarkerNavigation.background#2d2d2d
  • editorOverviewRuler.addedForeground#8ce00a80
  • editorOverviewRuler.border#161616
  • editorOverviewRuler.currentContentForeground#8ce00a
  • editorOverviewRuler.deletedForeground#ff000f80
  • editorOverviewRuler.errorForeground#ff000f80
  • editorOverviewRuler.incomingContentForeground#008df8
  • editorOverviewRuler.infoForeground#00d7eb80
  • editorOverviewRuler.modifiedForeground#00d7eb80
  • editorOverviewRuler.selectionHighlightForeground#ffb900
  • editorOverviewRuler.warningForeground#ffb90080
  • editorOverviewRuler.wordHighlightForeground#00d7eb
  • editorOverviewRuler.wordHighlightStrongForeground#8ce00a
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#2d2d2d
  • editorSuggestWidget.foreground#d0d0d0
  • editorSuggestWidget.selectedBackground#222222
  • editorWarning.foreground#ffb900
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#2d2d2d
  • errorForeground#ff000f
  • extensionButton.prominentBackground#8ce00a90
  • extensionButton.prominentForeground#d0d0d0
  • extensionButton.prominentHoverBackground#8ce00a60
  • focusBorder#727272
  • foreground#d0d0d0
  • gitDecoration.conflictingResourceForeground#ffb900
  • gitDecoration.deletedResourceForeground#ff000f
  • gitDecoration.ignoredResourceForeground#727272
  • gitDecoration.modifiedResourceForeground#00d7eb
  • gitDecoration.untrackedResourceForeground#8ce00a
  • input.background#0d0f18
  • input.border#161616
  • input.foreground#d0d0d0
  • input.placeholderForeground#727272
  • inputOption.activeBorder#008df8
  • inputValidation.errorBackground#0d0f18
  • inputValidation.errorBorder#ff000f
  • inputValidation.errorForeground#ff000f
  • inputValidation.infoBackground#0d0f18
  • inputValidation.infoBorder#008df8
  • inputValidation.infoForeground#008df8
  • inputValidation.warningBackground#0d0f18
  • inputValidation.warningBorder#ffb900
  • inputValidation.warningForeground#ffb900
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#d0d0d0
  • list.dropBackground#222222
  • list.errorForeground#ff000f
  • list.focusBackground#44444475
  • list.highlightForeground#00d7eb
  • list.hoverBackground#44444475
  • list.inactiveSelectionBackground#44444475
  • list.warningForeground#ffb900
  • listFilterWidget.background#0d0f18
  • listFilterWidget.noMatchesOutline#ff000f
  • listFilterWidget.outline#222222
  • merge.currentHeaderBackground#8ce00a90
  • merge.incomingHeaderBackground#008df890
  • notification.background#0d0f18
  • notification.buttonBackground#222222
  • notification.buttonForeground#d0d0d0
  • notification.buttonHoverBackground#44444475
  • notification.errorBackground#ff000f
  • notification.errorForeground#0d0f18
  • notification.foreground#d0d0d0
  • notification.infoBackground#008df8
  • notification.infoForeground#0d0f18
  • notification.warningBackground#ffb900
  • notification.warningForeground#0d0f18
  • notificationCenter.border#2d2d2d
  • notificationCenterHeader.background#0d0f18
  • notificationCenterHeader.foreground#d0d0d0
  • notificationLink.foreground#00d7eb
  • notifications.background#0d0f18
  • notifications.border#2d2d2d
  • notifications.foreground#d0d0d0
  • notificationsErrorIcon.foreground#ff000f
  • notificationsInfoIcon.foreground#008df8
  • notificationsWarningIcon.foreground#ffb900
  • notificationToast.border#2d2d2d
  • panel.background#0d0f18
  • panel.border#008df8
  • panelInput.border#d0d0d0
  • panelTitle.activeBorder#6c43a5
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#727272
  • peekView.border#222222
  • peekViewEditor.background#0d0f18
  • peekViewEditor.matchHighlightBackground#ffd14180
  • peekViewResult.background#2d2d2d
  • peekViewResult.fileForeground#d0d0d0
  • peekViewResult.lineForeground#d0d0d0
  • peekViewResult.matchHighlightBackground#ffd14180
  • peekViewResult.selectionBackground#222222
  • peekViewResult.selectionForeground#d0d0d0
  • peekViewTitle.background#161616
  • peekViewTitleDescription.foreground#727272
  • peekViewTitleLabel.foreground#d0d0d0
  • pickerGroup.border#008df8
  • pickerGroup.foreground#00d7eb
  • progressBar.background#6c43a5
  • scrollbar.shadow#444444
  • selection.background#008df8
  • settings.checkboxBackground#2d2d2d
  • settings.checkboxBorder#161616
  • settings.checkboxForeground#d0d0d0
  • settings.dropdownBackground#2d2d2d
  • settings.dropdownBorder#161616
  • settings.dropdownForeground#d0d0d0
  • settings.headerForeground#d0d0d0
  • settings.modifiedItemIndicator#ffb900
  • settings.numberInputBackground#2d2d2d
  • settings.numberInputBorder#161616
  • settings.numberInputForeground#d0d0d0
  • settings.textInputBackground#2d2d2d
  • settings.textInputBorder#161616
  • settings.textInputForeground#d0d0d0
  • sideBar.background#2d2d2d
  • sideBarSectionHeader.background#0d0f18
  • sideBarSectionHeader.border#161616
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#161616
  • statusBar.debuggingBackground#ff000f
  • statusBar.debuggingForeground#161616
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#161616
  • statusBar.noFolderForeground#d0d0d0
  • statusBarItem.prominentBackground#ff000f
  • statusBarItem.prominentHoverBackground#ffb900
  • statusBarItem.remoteBackground#008df8
  • statusBarItem.remoteForeground#0d0f18
  • tab.activeBackground#0d0f18
  • tab.activeBorderTop#6c43a580
  • tab.activeForeground#d0d0d0
  • tab.border#161616
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#727272
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#008df8
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#0092ff
  • terminal.ansiBrightCyan#67ffef
  • terminal.ansiBrightGreen#abe05a
  • terminal.ansiBrightMagenta#9a5feb
  • terminal.ansiBrightRed#ff273f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd141
  • terminal.ansiCyan#00d7eb
  • terminal.ansiGreen#8ce00a
  • terminal.ansiMagenta#6c43a5
  • terminal.ansiRed#ff000f
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffb900
  • terminal.background#0d0f18
  • terminal.border#d0d0d0
  • terminal.foreground#d0d0d0
  • terminal.selectionBackground#22222250
  • textBlockQuote.background#2d2d2d
  • titleBar.activeBackground#2d2d2d
  • titleBar.activeForeground#d0d0d0
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#727272
  • walkThrough.embeddedEditorBackground#2d2d2d
  • welcomePage.buttonBackground#222222
  • welcomePage.buttonHoverBackground#44444475
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#008df8
source#d0d0d0
meta.diff, meta.diff.header#727272
markup.inserted#8ce00a
markup.deleted#ff000f
markup.changed#ffb900
invalid#ff000funderline italic
invalid.deprecated#d0d0d0underline italic
entity.name.filename#ffd141
markup.error#ff000f
markup.underlineunderline
markup.bold#ffb900bold
markup.heading#008df8bold
markup.italic#ffd141italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00d7eb
markup.inline.raw, markup.raw.restructuredtext#8ce00a
markup.underline.link, markup.underline.link.image#00d7eb
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#6c43a5
entity.name.directive.restructuredtext, markup.quote#ffd141italic
meta.separator.markdown#727272
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#8ce00a
punctuation.definition.constant.restructuredtext#008df8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#008df8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d0d0d0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffd141
entity.name.type.class, entity.name.class#00d7ebnormal
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#008df8italic
entity.other.inherited-class#00d7ebitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#727272
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#6c43a5
comment.block.documentation entity.name.type#00d7ebitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00d7eb
comment.block.documentation variable#ffb900italic
constant, variable.other.constant#008df8
constant.character.escape, constant.character.string.escape, constant.regexp#6c43a5
entity.name.tag#6c43a5
entity.other.attribute-name.parent-selector#6c43a5
entity.other.attribute-name#8ce00aitalic
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#8ce00a
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#ffb900italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#8ce00aitalic
meta.decorator variable.other.object#8ce00a
keyword, punctuation.definition.keyword#6c43a5
keyword.control.new, keyword.operator.newbold
meta.selector#6c43a5
support#00d7ebitalic
support.function.magic, support.variable, variable.other.predefined#008df8regular
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#6c43a5
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#d0d0d0
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#6c43a5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00d7eb
constant.other.date, constant.other.timestamp#ffb900
variable.other.alias.yaml#8ce00aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#6c43a5regular
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#00d7ebitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffb900
storage.modifier#6c43a5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffd141
punctuation.definition.group.capture.regexp#6c43a5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff000f
punctuation.definition.character-class.regexp#00d7eb
punctuation.definition.group.regexp#ffb900
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff000f
meta.assertion.look-ahead.regexp#8ce00a
string#ffd141
punctuation.definition.string.begin, punctuation.definition.string.end#0092ff
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#008df8
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#727272
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d0d0d0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffb900italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d0d0d0normal
meta.selectionset.graphql variable#ffd141
meta.selectionset.graphql meta.arguments variable#d0d0d0
entity.name.fragment.graphql, variable.fragment.graphql#00d7eb
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#d0d0d0
source.shell variable.other#008df8
support.constant#008df8normal
meta.scope.prerequisites.makefile#ffd141
meta.attribute-selector.scss#ffd141
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d0d0d0
meta.preprocessor.haskell#727272
Tinted VSCode by Tinted Theming - VS Code Theme