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#b5b5d310
  • activityBar.activeBorder#ff479c80
  • activityBar.background#343746
  • activityBar.foreground#f6f6f4
  • activityBar.inactiveForeground#5d5d63
  • activityBarBadge.background#ff479c
  • activityBarBadge.foreground#f6f6f4
  • badge.background#272735
  • badge.foreground#f6f6f4
  • breadcrumb.activeSelectionForeground#f6f6f4
  • breadcrumb.background#161620
  • breadcrumb.focusForeground#f6f6f4
  • breadcrumb.foreground#5d5d63
  • breadcrumbPicker.background#0d0d14
  • button.background#272735
  • button.foreground#f6f6f4
  • contrastBorder#0d0d14
  • debugToolBar.background#0a0a10
  • diffEditor.insertedTextBackground#9191e620
  • diffEditor.removedTextBackground#8be9fd50
  • dropdown.background#343746
  • dropdown.border#0d0d14
  • dropdown.foreground#f6f6f4
  • editor.background#161620
  • editor.findMatchBackground#15ff7c80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#0a0a10
  • editor.foreground#f6f6f4
  • editor.hoverHighlightBackground#ff8f2150
  • editor.lineHighlightBorder#272735
  • editor.rangeHighlightBackground#b5b5d315
  • editor.selectionBackground#272735
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#161620
  • editor.snippetFinalTabstopHighlightBorder#9191e6
  • editor.snippetTabstopHighlightBackground#161620
  • editor.snippetTabstopHighlightBorder#5d5d63
  • editor.wordHighlightBackground#ff8f2150
  • editor.wordHighlightStrongBackground#9191e650
  • editorCodeLens.foreground#5d5d63
  • editorError.foreground#8be9fd
  • editorGroup.border#b5b5d3
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0d0d14
  • editorGutter.addedBackground#9191e680
  • editorGutter.deletedBackground#8be9fd80
  • editorGutter.modifiedBackground#ff8f2180
  • editorHoverWidget.background#161620
  • editorHoverWidget.border#5d5d63
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#5d5d63
  • editorLink.activeForeground#ff8f21
  • editorMarkerNavigation.background#0a0a10
  • editorOverviewRuler.addedForeground#9191e680
  • editorOverviewRuler.border#0d0d14
  • editorOverviewRuler.currentContentForeground#9191e6
  • editorOverviewRuler.deletedForeground#8be9fd80
  • editorOverviewRuler.errorForeground#8be9fd80
  • editorOverviewRuler.incomingContentForeground#b5b5d3
  • editorOverviewRuler.infoForeground#ff8f2180
  • editorOverviewRuler.modifiedForeground#ff8f2180
  • editorOverviewRuler.selectionHighlightForeground#15ff7c
  • editorOverviewRuler.warningForeground#15ff7c80
  • editorOverviewRuler.wordHighlightForeground#ff8f21
  • editorOverviewRuler.wordHighlightStrongForeground#9191e6
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#0a0a10
  • editorSuggestWidget.foreground#f6f6f4
  • editorSuggestWidget.selectedBackground#272735
  • editorWarning.foreground#ff8f21
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#0a0a10
  • errorForeground#8be9fd
  • extensionButton.prominentBackground#9191e690
  • extensionButton.prominentForeground#f6f6f4
  • extensionButton.prominentHoverBackground#9191e660
  • focusBorder#5d5d63
  • foreground#f6f6f4
  • gitDecoration.conflictingResourceForeground#15ff7c
  • gitDecoration.deletedResourceForeground#8be9fd
  • gitDecoration.ignoredResourceForeground#5d5d63
  • gitDecoration.modifiedResourceForeground#ff8f21
  • gitDecoration.untrackedResourceForeground#9191e6
  • input.background#161620
  • input.border#0d0d14
  • input.foreground#f6f6f4
  • input.placeholderForeground#5d5d63
  • inputOption.activeBorder#b5b5d3
  • inputValidation.errorBorder#8be9fd
  • inputValidation.infoBorder#ff479c
  • inputValidation.warningBorder#15ff7c
  • list.activeSelectionBackground#272735
  • list.activeSelectionForeground#f6f6f4
  • list.dropBackground#272735
  • list.errorForeground#8be9fd
  • list.focusBackground#44475A75
  • list.highlightForeground#ff8f21
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#15ff7c
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#8be9fd
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#9191e690
  • merge.incomingHeaderBackground#b5b5d390
  • notification.background#161620
  • notification.buttonBackground#272735
  • notification.buttonForeground#f6f6f4
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#8be9fd
  • notification.errorForeground#f6f6f4
  • notification.foreground#f6f6f4
  • notification.infoBackground#ff8f21
  • notification.infoForeground#161620
  • notification.warningBackground#15ff7c
  • notification.warningForeground#161620
  • panel.background#161620
  • panel.border#b5b5d3
  • panelTitle.activeBorder#ff479c
  • panelTitle.activeForeground#f6f6f4
  • panelTitle.inactiveForeground#5d5d63
  • peekView.border#272735
  • peekViewEditor.background#161620
  • peekViewEditor.matchHighlightBackground#5f5f9a80
  • peekViewResult.background#0a0a10
  • peekViewResult.fileForeground#f6f6f4
  • peekViewResult.lineForeground#f6f6f4
  • peekViewResult.matchHighlightBackground#5f5f9a80
  • peekViewResult.selectionBackground#272735
  • peekViewResult.selectionForeground#f6f6f4
  • peekViewTitle.background#0d0d14
  • peekViewTitleDescription.foreground#5d5d63
  • peekViewTitleLabel.foreground#f6f6f4
  • pickerGroup.border#b5b5d3
  • pickerGroup.foreground#ff8f21
  • progressBar.background#ff479c
  • selection.background#b5b5d3
  • settings.checkboxBackground#0a0a10
  • settings.checkboxBorder#0d0d14
  • settings.checkboxForeground#f6f6f4
  • settings.dropdownBackground#0a0a10
  • settings.dropdownBorder#0d0d14
  • settings.dropdownForeground#f6f6f4
  • settings.headerForeground#f6f6f4
  • settings.modifiedItemForeground#15ff7c
  • settings.modifiedItemIndicator#15ff7c
  • settings.numberInputBackground#0a0a10
  • settings.numberInputBorder#0d0d14
  • settings.numberInputForeground#f6f6f4
  • settings.textInputBackground#0a0a10
  • settings.textInputBorder#0d0d14
  • settings.textInputForeground#f6f6f4
  • sideBar.background#0a0a10
  • sideBar.foreground#5a6a98
  • sideBarSectionHeader.background#161620
  • sideBarSectionHeader.border#0d0d14
  • sideBarTitle.foreground#f6f6f4
  • statusBar.background#0d0d14
  • statusBar.debuggingBackground#8be9fd
  • statusBar.debuggingForeground#0d0d14
  • statusBar.foreground#f6f6f4
  • statusBar.noFolderBackground#0d0d14
  • statusBar.noFolderForeground#f6f6f4
  • statusBarItem.prominentBackground#8be9fd
  • statusBarItem.prominentHoverBackground#15ff7c
  • statusBarItem.remoteBackground#b5b5d3
  • statusBarItem.remoteForeground#f6f6f4
  • tab.activeBackground#161620
  • tab.activeBorderTop#ff479c80
  • tab.activeForeground#f6f6f4
  • tab.border#0d0d14
  • tab.inactiveBackground#0a0a10
  • tab.inactiveForeground#5d5d63
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#bf9eee
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#2b90de
  • terminal.ansiGreen#e9a436
  • terminal.ansiMagenta#ed5baf
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e7ee98
  • terminal.background#161620
  • terminal.foreground#f6f6f4
  • titleBar.activeBackground#0a0a10
  • titleBar.activeForeground#f6f6f4
  • titleBar.inactiveBackground#0d0d14
  • titleBar.inactiveForeground#5d5d63
  • walkThrough.embeddedEditorBackground#0a0a10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#b5b5d3—
source#f6f6f4—
meta.diff, meta.diff.header#5d5d63—
markup.inserted#9191e6—
markup.deleted#8be9fd—
markup.changed#15ff7c—
invalid#8be9fdunderline italic
invalid.deprecated#f6f6f4underline italic
entity.name.filename#5f5f9a—
markup.error#8be9fd—
markup.underline—underline
markup.bold#15ff7cbold
markup.heading#b5b5d3bold
markup.italic#5f5f9aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ff8f21—
markup.inline.raw, markup.raw.restructuredtext#9191e6—
markup.underline.link, markup.underline.link.image#ff8f21—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff479c—
entity.name.directive.restructuredtext, markup.quote#5f5f9aitalic
meta.separator.markdown#5d5d63—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#9191e6—
punctuation.definition.constant.restructuredtext#b5b5d3—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b5b5d3—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f4—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#5f5f9a—
entity.name.type.class, entity.name.class#ff8f21normal
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#b5b5d3italic
entity.other.inherited-class#ff8f21italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5d5d63—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff479c—
comment.block.documentation entity.name.type#ff8f21italic
comment.block.documentation entity.name.type punctuation.definition.bracket#ff8f21—
comment.block.documentation variable#15ff7citalic
constant, variable.other.constant#b5b5d3—
constant.character.escape, constant.character.string.escape, constant.regexp#ff479c—
entity.name.tag#ff479c—
entity.other.attribute-name.parent-selector#ff479c—
entity.other.attribute-name#9191e6italic
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#9191e6—
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#15ff7citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9191e6italic
meta.decorator variable.other.object#9191e6—
keyword, punctuation.definition.keyword#ff479c—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff479c—
support#ff8f21italic
support.function.magic, support.variable, variable.other.predefined#b5b5d3regular
support.function, support.type.property-name—regular
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#ff479c—
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#f6f6f4—
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#ff479c—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ff8f21—
constant.other.date, constant.other.timestamp#15ff7c—
variable.other.alias.yaml#9191e6italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff479cregular
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#ff8f21italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#15ff7c—
storage.modifier#ff479c—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#5f5f9a—
punctuation.definition.group.capture.regexp#ff479c—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#8be9fd—
punctuation.definition.character-class.regexp#ff8f21—
punctuation.definition.group.regexp#15ff7c—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#8be9fd—
meta.assertion.look-ahead.regexp#9191e6—
string#5f5f9a—
punctuation.definition.string.begin, punctuation.definition.string.end#5d5d63—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2—
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#5d5d63—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f6f6f4—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#15ff7citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f6f6f4normal
meta.selectionset.graphql variable#5f5f9a—
meta.selectionset.graphql meta.arguments variable#f6f6f4—
entity.name.fragment.graphql, variable.fragment.graphql#ff8f21—
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#f6f6f4—
source.shell variable.other#b5b5d3—
support.constant#b5b5d3normal
meta.scope.prerequisites.makefile#5f5f9a—
meta.attribute-selector.scss#5f5f9a—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4—
meta.preprocessor.haskell#5d5d63—
Dev_logue Theme by Dev_logue - VS Code Theme