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#0351E610
  • activityBar.activeBorder#0351E680
  • activityBar.background#22242c
  • activityBar.foreground#4682B4
  • activityBar.inactiveForeground#7b7f8b
  • activityBarBadge.background#0351E6
  • activityBarBadge.foreground#4682B4
  • badge.background#444444
  • badge.foreground#4682B4
  • breadcrumb.activeSelectionForeground#4682B4
  • breadcrumb.background#151515
  • breadcrumb.focusForeground#4682B4
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#191A21
  • button.background#444444
  • button.foreground#4682B4
  • button.secondaryBackground#151515
  • button.secondaryForeground#4682B4
  • button.secondaryHoverBackground#22242c
  • debugToolBar.background#262626
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#22242c
  • dropdown.border#191A21
  • dropdown.foreground#4682B4
  • editor.background#151515
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#262626
  • editor.foreground#4682B4
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#444444
  • editor.rangeHighlightBackground#0351E615
  • editor.selectionBackground#444444
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#151515
  • editor.snippetFinalTabstopHighlightBorder#62e884
  • editor.snippetTabstopHighlightBackground#151515
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorBracketHighlight.foreground1#4682B4
  • editorBracketHighlight.foreground2#0351E6
  • editorBracketHighlight.foreground3#97e1f1
  • editorBracketHighlight.foreground4#62e884
  • editorBracketHighlight.foreground5#0351E6
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#ee6666
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#ee6666
  • editorGroup.border#0351E6
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#97e1f1
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#62e884
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#0351E6
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#97e1f1
  • editorOverviewRuler.wordHighlightStrongForeground#62e884
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.foreground#4682B4
  • editorSuggestWidget.selectedBackground#444444
  • editorWarning.foreground#97e1f1
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#262626
  • errorForeground#ee6666
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#4682B4
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#7b7f8b
  • foreground#4682B4
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#97e1f1
  • gitDecoration.untrackedResourceForeground#62e884
  • input.background#151515
  • input.border#191A21
  • input.foreground#4682B4
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#0351E6
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#0351E6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#444444
  • list.activeSelectionForeground#4682B4
  • list.dropBackground#444444
  • list.errorForeground#ee6666
  • list.focusBackground#44475A75
  • list.highlightForeground#97e1f1
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#22242c
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#0351E690
  • panel.background#151515
  • panel.border#0351E6
  • panelTitle.activeBorder#0351E6
  • panelTitle.activeForeground#4682B4
  • panelTitle.inactiveForeground#7b7f8b
  • peekView.border#444444
  • peekViewEditor.background#151515
  • peekViewEditor.matchHighlightBackground#f7d56080
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#4682B4
  • peekViewResult.lineForeground#4682B4
  • peekViewResult.matchHighlightBackground#f7d56080
  • peekViewResult.selectionBackground#444444
  • peekViewResult.selectionForeground#4682B4
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#7b7f8b
  • peekViewTitleLabel.foreground#4682B4
  • pickerGroup.border#0351E6
  • pickerGroup.foreground#97e1f1
  • progressBar.background#0351E6
  • selection.background#0351E6
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#4682B4
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#4682B4
  • settings.headerForeground#4682B4
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#4682B4
  • settings.textInputBackground#262626
  • settings.textInputBorder#191A21
  • settings.textInputForeground#4682B4
  • sideBar.background#262626
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#4682B4
  • statusBar.background#191A21
  • statusBar.debuggingBackground#ee6666
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#4682B4
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#4682B4
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#0351E6
  • statusBarItem.remoteForeground#151515
  • tab.activeBackground#151515
  • tab.activeBorderTop#0351E680
  • tab.activeForeground#4682B4
  • tab.border#191A21
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#7b7f8b
  • 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#97e1f1
  • terminal.ansiGreen#62e884
  • terminal.ansiMagenta#f286c4
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#e6cc71
  • terminal.background#151515
  • terminal.foreground#4682B4
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#4682B4
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#0351E6
meta.diff, meta.diff.header#7b7f8b
markup.inserted#62e884
markup.deleted#ee6666
markup.changed#FFB86C
invalid#ee6666underline italic
invalid.deprecated#4682B4underline italic
entity.name.filename#e6cc71
markup.error#ee6666
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#0351E6bold
markup.italic#e6cc71italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#97e1f1
markup.inline.raw, markup.raw.restructuredtext#62e884
markup.underline.link, markup.underline.link.image#97e1f1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#0351E6
entity.name.directive.restructuredtext, markup.quote#e6cc71italic
meta.separator.markdown#7b7f8b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#62e884
punctuation.definition.constant.restructuredtext#0351E6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#0351E6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#4682B4
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e6cc71
entity.name.type.class, entity.name.class#97e1f1normal
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#0351E6italic
entity.other.inherited-class#97e1f1italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#0351E6
comment.block.documentation entity.name.type#97e1f1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#97e1f1
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#0351E6
constant.character.escape, constant.character.string.escape, constant.regexp#0351E6
entity.name.tag#0351E6
entity.other.attribute-name.parent-selector#0351E6
entity.other.attribute-name#62e884italic
entity.name.function, 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#62e884
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#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#62e884italic
meta.decorator variable.other.object#62e884
keyword, punctuation.definition.keyword#0351E6
keyword.control.new, keyword.operator.newbold
meta.selector#0351E6
support#97e1f1italic
support.function.magic, support.variable, variable.other.predefined#0351E6regular
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#0351E6
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#4682B4
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#0351E6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#97e1f1
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#62e884italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#0351E6regular
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#97e1f1italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#0351E6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e6cc71
punctuation.definition.group.capture.regexp#0351E6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666
punctuation.definition.character-class.regexp#97e1f1
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666
meta.assertion.look-ahead.regexp#62e884
string#e6cc71
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
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#7b7f8b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#4682B4
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#4682B4normal
meta.selectionset.graphql variable#e6cc71
meta.selectionset.graphql meta.arguments variable#4682B4
entity.name.fragment.graphql, variable.fragment.graphql#97e1f1
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#4682B4
source.shell variable.other#0351E6
support.constant#0351E6normal
meta.scope.prerequisites.makefile#e6cc71
meta.attribute-selector.scss#e6cc71
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#4682B4
meta.preprocessor.haskell#7b7f8b
log.error#ee6666bold
log.warning#e6cc71bold
Dyonic Theme by Dyonic - VS Code Theme