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#2472c810
  • activityBar.activeBorder#bc3fbc80
  • activityBar.background#0e0e0e
  • activityBar.foreground#c5c5c5
  • activityBar.inactiveForeground#858585
  • activityBarBadge.background#bc3fbc
  • activityBarBadge.foreground#0e0e0e
  • badge.background#000000
  • badge.foreground#c5c5c5
  • breadcrumb.activeSelectionForeground#c5c5c5
  • breadcrumb.background#0e0e0e
  • breadcrumb.focusForeground#c5c5c5
  • breadcrumb.foreground#858585
  • breadcrumbPicker.background#222222
  • button.background#444444
  • button.foreground#c5c5c5
  • checkbox.background#444444
  • checkbox.border#222222
  • checkbox.foreground#c5c5c5
  • contrastBorder#222222
  • debugToolBar.background#444444
  • diffEditor.insertedTextBackground#0dbc7920
  • diffEditor.removedTextBackground#cd313150
  • dropdown.background#0e0e0e
  • dropdown.border#222222
  • dropdown.foreground#c5c5c5
  • editor.background#0e0e0e
  • editor.findMatchBackground#e5e51080
  • editor.findMatchHighlightBackground#e5e5e540
  • editor.findRangeHighlightBackground#66666675
  • editor.foldBackground#444444
  • editor.foreground#c5c5c5
  • editor.hoverHighlightBackground#222222
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#2472c815
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#0e0e0e
  • editor.snippetFinalTabstopHighlightBorder#0dbc79
  • editor.snippetTabstopHighlightBackground#0e0e0e
  • editor.snippetTabstopHighlightBorder#858585
  • editor.wordHighlightBackground#11a8cd50
  • editor.wordHighlightStrongBackground#0dbc7950
  • editorCodeLens.foreground#858585
  • editorError.foreground#cd3131
  • editorGroup.border#2472c8
  • editorGroup.dropBackground#66666670
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#0dbc7980
  • editorGutter.deletedBackground#cd313180
  • editorGutter.modifiedBackground#11a8cd80
  • editorHoverWidget.background#0e0e0e
  • editorHoverWidget.border#858585
  • editorIndentGuide.activeBackground#e5e5e545
  • editorIndentGuide.background#e5e5e51A
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#11a8cd
  • editorMarkerNavigation.background#444444
  • editorOverviewRuler.addedForeground#0dbc7980
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.currentContentForeground#0dbc79
  • editorOverviewRuler.deletedForeground#cd313180
  • editorOverviewRuler.errorForeground#cd313180
  • editorOverviewRuler.incomingContentForeground#2472c8
  • editorOverviewRuler.infoForeground#11a8cd80
  • editorOverviewRuler.modifiedForeground#11a8cd80
  • editorOverviewRuler.selectionHighlightForeground#e5e510
  • editorOverviewRuler.warningForeground#e5e51080
  • editorOverviewRuler.wordHighlightForeground#11a8cd
  • editorOverviewRuler.wordHighlightStrongForeground#0dbc79
  • editorRuler.foreground#e5e5e51A
  • editorSuggestWidget.background#444444
  • editorSuggestWidget.foreground#c5c5c5
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#e5e510
  • editorWhitespace.foreground#e5e5e51A
  • editorWidget.background#444444
  • errorForeground#cd3131
  • extensionButton.prominentBackground#0dbc7990
  • extensionButton.prominentForeground#c5c5c5
  • extensionButton.prominentHoverBackground#0dbc7960
  • focusBorder#858585
  • foreground#c5c5c5
  • gitDecoration.conflictingResourceForeground#e5e510
  • gitDecoration.deletedResourceForeground#cd3131
  • gitDecoration.ignoredResourceForeground#858585
  • gitDecoration.modifiedResourceForeground#11a8cd
  • gitDecoration.untrackedResourceForeground#0dbc79
  • input.background#0e0e0e
  • input.border#222222
  • input.foreground#c5c5c5
  • input.placeholderForeground#858585
  • inputOption.activeBorder#2472c8
  • inputValidation.errorBackground#0e0e0e
  • inputValidation.errorBorder#cd3131
  • inputValidation.errorForeground#cd3131
  • inputValidation.infoBackground#0e0e0e
  • inputValidation.infoBorder#2472c8
  • inputValidation.infoForeground#2472c8
  • inputValidation.warningBackground#0e0e0e
  • inputValidation.warningBorder#e5e510
  • inputValidation.warningForeground#e5e510
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#c5c5c5
  • list.dropBackground#000000
  • list.errorForeground#cd3131
  • list.focusBackground#66666675
  • list.highlightForeground#11a8cd
  • list.hoverBackground#66666675
  • list.inactiveSelectionBackground#66666675
  • list.warningForeground#e5e510
  • listFilterWidget.background#0e0e0e
  • listFilterWidget.noMatchesOutline#cd3131
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#0dbc7990
  • merge.incomingHeaderBackground#2472c890
  • notification.background#0e0e0e
  • notification.buttonBackground#000000
  • notification.buttonForeground#c5c5c5
  • notification.buttonHoverBackground#66666675
  • notification.errorBackground#cd3131
  • notification.errorForeground#0e0e0e
  • notification.foreground#c5c5c5
  • notification.infoBackground#2472c8
  • notification.infoForeground#0e0e0e
  • notification.warningBackground#e5e510
  • notification.warningForeground#0e0e0e
  • notificationCenter.border#444444
  • notificationCenterHeader.background#0e0e0e
  • notificationCenterHeader.foreground#c5c5c5
  • notificationLink.foreground#11a8cd
  • notifications.background#0e0e0e
  • notifications.border#444444
  • notifications.foreground#c5c5c5
  • notificationsErrorIcon.foreground#cd3131
  • notificationsInfoIcon.foreground#2472c8
  • notificationsWarningIcon.foreground#e5e510
  • notificationToast.border#444444
  • panel.background#0e0e0e
  • panel.border#2472c8
  • panelInput.border#c5c5c5
  • panelTitle.activeBorder#bc3fbc
  • panelTitle.activeForeground#c5c5c5
  • panelTitle.inactiveForeground#858585
  • peekView.border#000000
  • peekViewEditor.background#0e0e0e
  • peekViewEditor.matchHighlightBackground#f5f54380
  • peekViewResult.background#444444
  • peekViewResult.fileForeground#c5c5c5
  • peekViewResult.lineForeground#c5c5c5
  • peekViewResult.matchHighlightBackground#f5f54380
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#c5c5c5
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#858585
  • peekViewTitleLabel.foreground#c5c5c5
  • pickerGroup.border#2472c8
  • pickerGroup.foreground#11a8cd
  • progressBar.background#bc3fbc
  • scrollbar.shadow#444444
  • selection.background#2472c8
  • settings.checkboxBackground#444444
  • settings.checkboxBorder#222222
  • settings.checkboxForeground#c5c5c5
  • settings.dropdownBackground#444444
  • settings.dropdownBorder#222222
  • settings.dropdownForeground#c5c5c5
  • settings.headerForeground#c5c5c5
  • settings.modifiedItemIndicator#e5e510
  • settings.numberInputBackground#444444
  • settings.numberInputBorder#222222
  • settings.numberInputForeground#c5c5c5
  • settings.textInputBackground#444444
  • settings.textInputBorder#222222
  • settings.textInputForeground#c5c5c5
  • sideBar.background#444444
  • sideBarSectionHeader.background#0e0e0e
  • sideBarSectionHeader.border#222222
  • sideBarTitle.foreground#c5c5c5
  • statusBar.background#222222
  • statusBar.debuggingBackground#cd3131
  • statusBar.debuggingForeground#222222
  • statusBar.foreground#c5c5c5
  • statusBar.noFolderBackground#222222
  • statusBar.noFolderForeground#c5c5c5
  • statusBarItem.prominentBackground#cd3131
  • statusBarItem.prominentHoverBackground#e5e510
  • statusBarItem.remoteBackground#2472c8
  • statusBarItem.remoteForeground#0e0e0e
  • tab.activeBackground#0e0e0e
  • tab.activeBorderTop#bc3fbc80
  • tab.activeForeground#c5c5c5
  • tab.border#222222
  • tab.inactiveBackground#444444
  • tab.inactiveForeground#858585
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.background#0e0e0e
  • terminal.border#c5c5c5
  • terminal.foreground#c5c5c5
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#444444
  • titleBar.activeBackground#444444
  • titleBar.activeForeground#c5c5c5
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#858585
  • walkThrough.embeddedEditorBackground#444444
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#66666675
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2472c8
source#c5c5c5
meta.diff, meta.diff.header#858585
markup.inserted#0dbc79
markup.deleted#cd3131
markup.changed#e5e510
invalid#cd3131underline italic
invalid.deprecated#c5c5c5underline italic
entity.name.filename#f5f543
markup.error#cd3131
markup.underlineunderline
markup.bold#e5e510bold
markup.heading#2472c8bold
markup.italic#f5f543italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#11a8cd
markup.inline.raw, markup.raw.restructuredtext#0dbc79
markup.underline.link, markup.underline.link.image#11a8cd
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bc3fbc
entity.name.directive.restructuredtext, markup.quote#f5f543italic
meta.separator.markdown#858585
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#0dbc79
punctuation.definition.constant.restructuredtext#2472c8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2472c8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c5c5c5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f5f543
entity.name.type.class, entity.name.class#11a8cdnormal
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#2472c8italic
entity.other.inherited-class#11a8cditalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#858585
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bc3fbc
comment.block.documentation entity.name.type#11a8cditalic
comment.block.documentation entity.name.type punctuation.definition.bracket#11a8cd
comment.block.documentation variable#e5e510italic
constant, variable.other.constant#2472c8
constant.character.escape, constant.character.string.escape, constant.regexp#bc3fbc
entity.name.tag#bc3fbc
entity.other.attribute-name.parent-selector#bc3fbc
entity.other.attribute-name#0dbc79italic
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#0dbc79
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#e5e510italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#0dbc79italic
meta.decorator variable.other.object#0dbc79
keyword, punctuation.definition.keyword#bc3fbc
keyword.control.new, keyword.operator.newbold
meta.selector#bc3fbc
support#11a8cditalic
support.function.magic, support.variable, variable.other.predefined#2472c8regular
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#bc3fbc
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#c5c5c5
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#bc3fbc
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#11a8cd
constant.other.date, constant.other.timestamp#e5e510
variable.other.alias.yaml#0dbc79italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bc3fbcregular
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#11a8cditalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e5e510
storage.modifier#bc3fbc
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f5f543
punctuation.definition.group.capture.regexp#bc3fbc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cd3131
punctuation.definition.character-class.regexp#11a8cd
punctuation.definition.group.regexp#e5e510
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cd3131
meta.assertion.look-ahead.regexp#0dbc79
string#f5f543
punctuation.definition.string.begin, punctuation.definition.string.end#3b8eea
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2472c8
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#858585
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c5c5c5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e5e510italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c5c5c5normal
meta.selectionset.graphql variable#f5f543
meta.selectionset.graphql meta.arguments variable#c5c5c5
entity.name.fragment.graphql, variable.fragment.graphql#11a8cd
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#c5c5c5
source.shell variable.other#2472c8
support.constant#2472c8normal
meta.scope.prerequisites.makefile#f5f543
meta.attribute-selector.scss#f5f543
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c5c5c5
meta.preprocessor.haskell#858585
Tinted VSCode by Tinted Theming - VS Code Theme