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#272727
  • activityBar.activeBorder#41B883
  • activityBar.background#171717
  • activityBar.border#121212
  • activityBar.foreground#E2E2E2
  • activityBar.inactiveForeground#204434
  • activityBarBadge.background#E2E2E2
  • activityBarBadge.foreground#121212
  • badge.background#555555
  • badge.foreground#E2E2E2
  • breadcrumb.activeSelectionForeground#E2E2E2
  • breadcrumb.background#171717
  • breadcrumb.focusForeground#E2E2E2
  • breadcrumb.foreground#454545
  • breadcrumbPicker.background#121212
  • button.background#323232
  • button.foreground#E2E2E2
  • button.hoverBackground#204434
  • checkbox.background#41B883
  • checkbox.border#E2E2E2
  • checkbox.foreground#E2E2E2
  • debugConsole.errorForeground#F55258
  • debugConsole.infoForeground#79B4E2
  • debugConsole.sourceForeground#79B4E2
  • debugConsole.warningForeground#F7E100
  • debugConsoleInputIcon.foreground#E2E2E2
  • debugExceptionWidget.background#121212
  • debugExceptionWidget.border#204434
  • debugIcon.breakpointCurrentStackframeForeground#E2E2E2
  • debugIcon.breakpointDisabledForeground#323232
  • debugIcon.breakpointForeground#E2E2E2
  • debugIcon.breakpointStackframeForeground#E2E2E240
  • debugIcon.breakpointUnverifiedForeground#808080
  • debugIcon.continueForeground#50CCD0
  • debugIcon.disconnectForeground#F55258
  • debugIcon.pauseForeground#50CCD0
  • debugIcon.restartForeground#41B883
  • debugIcon.startForeground#41B883
  • debugIcon.stepBackForeground#E2E2E2
  • debugIcon.stepIntoForeground#E2E2E2
  • debugIcon.stepOutForeground#E2E2E2
  • debugIcon.stepOverForeground#E2E2E2
  • debugIcon.stopForeground#F55258
  • debugToolBar.background#121212
  • debugToolBar.border#121212
  • descriptionForeground#79B4E2
  • diffEditor.insertedTextBackground#41B84740
  • diffEditor.removedTextBackground#F5525840
  • dropdown.background#121212
  • dropdown.border#E2E2E2
  • dropdown.foreground#E2E2E2
  • dropdown.listBackground#121212
  • editor.background#171717
  • editor.findMatchBackground#41B88380
  • editor.findMatchHighlightBackground#40404080
  • editor.findRangeHighlightBackground#20443460
  • editor.foldBackground#121212
  • editor.foreground#E2E2E2
  • editor.hoverHighlightBackground#121212
  • editor.lineHighlightBackground#222222
  • editor.rangeHighlightBackground#41B88380
  • editor.selectionBackground#323232
  • editor.selectionHighlightBackground#323232
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#41B847
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#204434
  • editor.wordHighlightBackground#40404080
  • editor.wordHighlightStrongBackground#41B88380
  • editorBracketHighlight.foreground1#F7E100
  • editorBracketHighlight.foreground2#F55258
  • editorBracketHighlight.foreground3#79B4E2
  • editorBracketHighlight.foreground4#41B883
  • editorBracketHighlight.foreground5#50CCD0
  • editorBracketHighlight.foreground6#E25698
  • editorBracketHighlight.unexpectedBracket.foreground#FB3F3F
  • editorBracketMatch.background#121212
  • editorBracketMatch.border#E2E2E2
  • editorCodeLens.foreground#454545
  • editorError.foreground#F55258
  • editorGhostText.foreground#323232
  • editorGroup.border#323232
  • editorGroup.dropBackground#20443460
  • editorGroupHeader.tabsBackground#121212
  • editorGutter.addedBackground#41B847
  • editorGutter.background#171717
  • editorGutter.deletedBackground#F55258
  • editorGutter.foldingControlForeground#E2E2E2
  • editorGutter.modifiedBackground#50CCD0
  • editorHint.foreground#F7E100
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#204434
  • editorIndentGuide.activeBackground#404040
  • editorIndentGuide.background#272727
  • editorInfo.foreground#79B4E2
  • editorLightBulb.foreground#F7E100
  • editorLineNumber.activeForeground#E2E2E2
  • editorLineNumber.foreground#454545
  • editorLink.activeForeground#50CCD0
  • editorMarkerNavigation.background#121212
  • editorMarkerNavigationError.background#F55258
  • editorMarkerNavigationError.headerBackground#F5525840
  • editorMarkerNavigationInfo.background#79B4E2
  • editorMarkerNavigationInfo.headerBackground#79B4E280
  • editorMarkerNavigationWarning.background#F7E100
  • editorMarkerNavigationWarning.headerBackground#F4F56480
  • editorOverviewRuler.addedForeground#41B84740
  • editorOverviewRuler.border#121212
  • editorOverviewRuler.commonContentForeground#E2E2E2
  • editorOverviewRuler.currentContentForeground#E2E2E2
  • editorOverviewRuler.deletedForeground#F5525840
  • editorOverviewRuler.errorForeground#F5525840
  • editorOverviewRuler.incomingContentForeground#E2E2E2
  • editorOverviewRuler.infoForeground#79B4E280
  • editorOverviewRuler.modifiedForeground#50CCD080
  • editorOverviewRuler.selectionHighlightForeground#E2E2E240
  • editorOverviewRuler.warningForeground#F4F56480
  • editorOverviewRuler.wordHighlightForeground#E2E2E240
  • editorOverviewRuler.wordHighlightStrongForeground#41B88380
  • editorRuler.foreground#27272740
  • editorSuggestWidget.background#121212
  • editorSuggestWidget.border#323232
  • editorSuggestWidget.focusHighlightForeground#41B883
  • editorSuggestWidget.foreground#E2E2E2
  • editorSuggestWidget.highlightForeground#79B4E2
  • editorSuggestWidget.selectedBackground#323232
  • editorSuggestWidget.selectedForeground#E2E2E2
  • editorSuggestWidget.selectedIconForeground#E2E2E2
  • editorUnnecessaryCode.opacity#000000C0
  • editorWarning.foreground#F4F564
  • editorWhitespace.foreground#454545
  • editorWidget.background#121212
  • editorWidget.border#41B883
  • editorWidget.foreground#E2E2E2
  • editorWidget.resizeBorder#41B883
  • errorForeground#F55258
  • extensionButton.prominentBackground#41B883
  • extensionButton.prominentForeground#121212
  • extensionButton.prominentHoverBackground#41B883
  • extensionIcon.preReleaseForeground#121212
  • extensionIcon.starForeground#F6A227
  • extensionIcon.verifiedForeground#50CCD0
  • focusBorder#41B883
  • foreground#E2E2E2
  • gitDecoration.conflictingResourceForeground#F6A227
  • gitDecoration.deletedResourceForeground#F55258
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#50CCD0
  • gitDecoration.untrackedResourceForeground#41B847
  • icon.foreground#E2E2E2
  • input.background#222222
  • input.border#404040
  • input.foreground#E2E2E2
  • input.placeholderForeground#808080
  • inputOption.activeBorder#41B883
  • inputValidation.errorBorder#F55258
  • inputValidation.errorForeground#F55258
  • inputValidation.infoBorder#E25698
  • inputValidation.infoForeground#E25698
  • inputValidation.warningBorder#F4F564
  • inputValidation.warningForeground#F4F564
  • keybindingLabel.background#272727
  • keybindingLabel.border#222222
  • keybindingLabel.bottomBorder#404040
  • keybindingLabel.foreground#AAAAAA
  • keybindingTable.headerBackground#323232
  • keybindingTable.rowsBackground#222222
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#E2E2E2
  • list.dropBackground#222222
  • list.errorForeground#F55258
  • list.filterMatchBackground#323232
  • list.focusBackground#222222
  • list.focusOutline#204434
  • list.highlightForeground#204434
  • list.hoverBackground#272727
  • list.inactiveSelectionBackground#222222
  • list.invalidItemForeground#F55258
  • list.warningForeground#F4F564
  • listFilterWidget.background#272727
  • listFilterWidget.noMatchesOutline#F55258
  • menubar.selectionBackground#E2E2E2
  • menubar.selectionForeground#171717
  • merge.commonContentBackground#79B4E280
  • merge.commonHeaderBackground#63A4DD80
  • merge.currentContentBackground#20443460
  • merge.currentHeaderBackground#41B88380
  • merge.incomingContentBackground#50CCD080
  • merge.incomingHeaderBackground#45C2CA80
  • notificationCenter.border#204434
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#E2E2E2
  • notificationLink.foreground#79B4E2
  • notifications.background#121212
  • notifications.border#204434
  • notifications.foreground#E2E2E2
  • notificationsErrorIcon.foreground#F55258
  • notificationsInfoIcon.foreground#79B4E2
  • notificationsWarningIcon.foreground#F7E100
  • notificationToast.border#204434
  • panel.background#171717
  • panel.border#41B883
  • panelTitle.activeBorder#41B883
  • panelTitle.activeForeground#E2E2E2
  • panelTitle.inactiveForeground#808080
  • peekView.border#204434
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#41B88380
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#E2E2E2
  • peekViewResult.lineForeground#AAAAAA
  • peekViewResult.matchHighlightBackground#41B88380
  • peekViewResult.selectionBackground#404040
  • peekViewResult.selectionForeground#E2E2E2
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#606060
  • peekViewTitleLabel.foreground#E2E2E2
  • pickerGroup.border#41B883
  • pickerGroup.foreground#E2E2E2
  • problemsErrorIcon.foreground#F55258
  • problemsInfoIcon.foreground#79B4E2
  • problemsWarningIcon.foreground#F4F564
  • progressBar.background#41B883
  • quickInput.background#121212
  • quickInput.foreground#E2E2E2
  • quickInputList.focusBackground#272727
  • quickInputList.focusForeground#E2E2E2
  • selection.background#41B88380
  • settings.checkboxBackground#121212
  • settings.checkboxBorder#41B883
  • settings.checkboxForeground#E2E2E2
  • settings.dropdownBackground#121212
  • settings.dropdownBorder#204434
  • settings.dropdownForeground#E2E2E2
  • settings.headerForeground#E2E2E2
  • settings.modifiedItemIndicator#50CCD0
  • settings.numberInputBackground#121212
  • settings.numberInputBorder#41B883
  • settings.numberInputForeground#E2E2E2
  • settings.rowHoverBackground#121212
  • settings.textInputBackground#121212
  • settings.textInputBorder#41B883
  • settings.textInputForeground#E2E2E2
  • sideBar.background#121212
  • sideBar.border#121212
  • sideBar.foreground#E2E2E2
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.border#121212
  • sideBarSectionHeader.foreground#E2E2E2
  • sideBarTitle.foreground#E2E2E2
  • statusBar.background#121212
  • statusBar.debuggingBackground#F55258
  • statusBar.debuggingBorder#F55258
  • statusBar.debuggingForeground#121212
  • statusBar.foreground#E2E2E2
  • statusBar.noFolderBackground#121212
  • statusBar.noFolderBorder#121212
  • statusBar.noFolderForeground#E2E2E2
  • statusBarItem.errorBackground#FB3F3F
  • statusBarItem.errorForeground#121212
  • statusBarItem.hoverBackground#40404080
  • statusBarItem.prominentBackground#41B883
  • statusBarItem.prominentForeground#121212
  • statusBarItem.prominentHoverBackground#40404080
  • statusBarItem.remoteBackground#50CCD0
  • statusBarItem.remoteForeground#121212
  • statusBarItem.warningBackground#F7E100
  • statusBarItem.warningForeground#121212
  • symbolIcon.arrayForeground#E2E2E2
  • symbolIcon.booleanForeground#E2E2E2
  • symbolIcon.classForeground#50CCD0
  • symbolIcon.colorForeground#E2E2E2
  • symbolIcon.constantForeground#E2E2E2
  • symbolIcon.constructorForeground#E25698
  • symbolIcon.enumeratorForeground#50CCD0
  • symbolIcon.enumeratorMemberForeground#79B4E2
  • symbolIcon.eventForeground#50CCD0
  • symbolIcon.fieldForeground#79B4E2
  • symbolIcon.fileForeground#E2E2E2
  • symbolIcon.folderForeground#E2E2E2
  • symbolIcon.functionForeground#E25698
  • symbolIcon.interfaceForeground#79B4E2
  • symbolIcon.keyForeground#E2E2E2
  • symbolIcon.keywordForeground#E2E2E2
  • symbolIcon.methodForeground#E25698
  • symbolIcon.moduleForeground#E2E2E2
  • symbolIcon.namespaceForeground#E2E2E2
  • symbolIcon.nullForeground#E2E2E2
  • symbolIcon.numberForeground#E2E2E2
  • symbolIcon.objectForeground#E2E2E2
  • symbolIcon.operatorForeground#E2E2E2
  • symbolIcon.packageForeground#E2E2E2
  • symbolIcon.propertyForeground#E2E2E2
  • symbolIcon.referenceForeground#E2E2E2
  • symbolIcon.snippetForeground#E2E2E2
  • symbolIcon.stringForeground#E2E2E2
  • symbolIcon.structForeground#E2E2E2
  • symbolIcon.textForeground#E2E2E2
  • symbolIcon.typeParameterForeground#E2E2E2
  • symbolIcon.unitForeground#E2E2E2
  • symbolIcon.variableForeground#79B4E2
  • tab.activeBackground#171717
  • tab.activeBorderTop#41B883
  • tab.activeForeground#E2E2E2
  • tab.border#121212
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#808080
  • tab.lastPinnedBorder#204434
  • tab.unfocusedActiveBorderTop#20443460
  • tab.unfocusedActiveForeground#272727
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#79B4E2
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#63A4DD
  • terminal.ansiBrightCyan#45C2CA
  • terminal.ansiBrightGreen#41B847
  • terminal.ansiBrightMagenta#E14985
  • terminal.ansiBrightRed#FB3F3F
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#F7E100
  • terminal.ansiCyan#50CCD0
  • terminal.ansiGreen#41B883
  • terminal.ansiMagenta#E25698
  • terminal.ansiRed#F55258
  • terminal.ansiWhite#E2E2E2
  • terminal.ansiYellow#F4F564
  • terminal.background#171717
  • terminal.foreground#E2E2E2
  • terminal.selectionBackground#323232
  • terminalCursor.background#171717
  • terminalCursor.foreground#E2E2E2
  • textLink.activeForeground#50CCD0
  • textLink.foreground#79B4E2
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#E2E2E2
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#E2E2E2
  • walkThrough.embeddedEditorBackground#121212

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#79B4E2
source#E2E2E2
meta.diff, meta.diff.header#454545
markup.inserted#41B847
markup.deleted#F55258
markup.changed#50CCD0
invalid, invalid.illegal#FB3F3Funderline italic
invalid.deprecated#E2E2E2underline italic
entity.name.filename#F4F564
markup.error#F55258
markup.underlineunderline
markup.bold#F6A227bold
markup.heading#41B883bold
markup.italic#F4F564italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#A87CCF
markup.inline.raw, markup.raw.restructuredtext#41B847
markup.underline.link, markup.underline.link.image#79B4E2
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#E25698
entity.name.directive.restructuredtext, markup.quote#F4F564italic
meta.separator.markdown#454545
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#41B847
punctuation.definition.constant.restructuredtext#79B4E2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#79B4E2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E2E2E2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#A87CCF
entity.name.type.class, entity.name.class#50CCD0normal
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#79B4E2italic
entity.other.inherited-class#50CCD0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#454545
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#E25698
comment.block.documentation entity.name.type#50CCD0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#50CCD0
comment.block.documentation variable#F6A227italic
constant, variable.other.constant#79B4E2
constant.character.escape, constant.character.string.escape, constant.regexp#E25698
entity.name.tag#E25698
entity.other.attribute-name.parent-selector#E25698
entity.other.attribute-name.id#50CCD0italic
support.type.property-name.css, meta.property-name.scss, meta.property-list.scss, source.css.scss#A87CCF
entity.other.attribute-name#41B883italic
meta.tag.inline source#F4F564
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#41B883
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#F6A227italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#41B883italic
meta.decorator variable.other.object#41B883
keyword, punctuation.definition.keyword#E25698
keyword.control.new, keyword.operator.newbold
meta.selector#E25698
support#50CCD0italic
support.function.magic, support.variable, variable.other.predefined#79B4E2regular
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#E25698
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#E2E2E2
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#E25698
meta.block variable.other#A87CCF
support.other.variable, string.other.link#A87CCF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#50CCD0
constant.other.date, constant.other.timestamp#F6A227
variable.other.alias.yaml#41B883italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#E25698regular
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#50CCD0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F6A227
storage.modifier#E25698
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F4F564
punctuation.definition.group.capture.regexp#E25698
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F55258
punctuation.definition.character-class.regexp#A87CCF
punctuation.definition.group.regexp#F6A227
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F55258
meta.assertion.look-ahead.regexp#41B883
string#F4F564
string.json, source.json#41B883
string.unquoted#E2E2E2
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#454545
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E2E2E2
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#F6A227italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E2E2E2normal
meta.selectionset.graphql variable#F4F564
meta.selectionset.graphql meta.arguments variable#E2E2E2
entity.name.fragment.graphql, variable.fragment.graphql#50CCD0
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#E2E2E2
source.shell variable.other#79B4E2
support.constant#79B4E2normal
meta.scope.prerequisites.makefile#F4F564
meta.attribute-selector.scss#F4F564
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#E2E2E2
meta.preprocessor.haskell#454545