Skip to main content
CodingTheme

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.background#020202
  • activityBar.border#202020
  • activityBar.foreground#b125f1
  • activityBar.inactiveForeground#505050
  • activityBarBadge.background#7400aa
  • activityBarBadge.foreground#ffffff
  • badge.background#8d1515
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7400aaa1
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#7400aad5
  • breadcrumb.foreground#a8a8a8
  • breadcrumbPicker.background#111111
  • button.background#12122c
  • button.hoverBackground#2b2b5a
  • debugToolBar.background#191936
  • debugToolBar.border#191936
  • diffEditor.insertedTextBackground#1eff0013
  • diffEditor.removedTextBackground#ff027822
  • dropdown.background#000000
  • dropdown.border#999999
  • editor.background#000000
  • editor.findMatchBackground#ff802bcc
  • editor.findMatchBorder#ff802b
  • editor.findMatchHighlightBackground#ff2b7c8e
  • editor.findMatchHighlightBorder#ff4444aa
  • editor.findRangeHighlightBackground#3a3a3a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#2b2b2b50
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#3a3a3a
  • editor.selectionBackground#00c3ff3a
  • editor.selectionForeground#eff8ff
  • editor.selectionHighlightBackground#6241a450
  • editor.selectionHighlightBorder#e18cc9
  • editor.wordHighlightBackground#575757
  • editorBracketMatch.background#ffffff13
  • editorCursor.background#5f3b23
  • editorCursor.foreground#ffffff
  • editorGroup.border#666666
  • editorGroup.dropBackground#2b2b5acc
  • editorGroupHeader.tabsBackground#000
  • editorGutter.addedBackground#7400aa
  • editorGutter.background#050505
  • editorGutter.commentRangeForeground#f1ff28
  • editorGutter.deletedBackground#ff0055
  • editorGutter.modifiedBackground#9765c9
  • editorOverviewRuler.bracketMatchForeground#985bd143
  • editorWhitespace.foreground#ffffff40
  • editorWidget.background#000000
  • editorWidget.border#ffffff
  • focusBorder#223344
  • gitDecoration.addedResourceForeground#7400aa
  • gitDecoration.conflictingResourceForeground#ff62b1
  • gitDecoration.ignoredResourceForeground#31cfff
  • gitDecoration.modifiedResourceForeground#ba66ff
  • gitDecoration.untrackedResourceForeground#4bf53c
  • icon.foreground#ffffff
  • input.background#151515
  • input.border#7400aa
  • input.foreground#ffffff
  • input.placeholderForeground#7d7d7dd0
  • list.activeSelectionBackground#7400aa
  • list.activeSelectionForeground#fff
  • list.dropBackground#a183d333
  • list.errorForeground#ca0d36
  • list.hoverBackground#2c145f7a
  • menu.background#000000
  • menu.foreground#fff
  • panel.background#000000
  • panel.border#7400aa
  • panelSection.dropBackground#310303
  • panelTitle.activeBorder#7400aa
  • panelTitle.activeForeground#ffffff
  • peekView.border#0000ff
  • peekViewEditor.background#000033
  • peekViewEditorGutter.background#00074b
  • peekViewResult.background#090b13
  • peekViewResult.fileForeground#7998fd
  • peekViewTitle.background#1a1a58
  • progressBar.background#ff5500
  • sideBar.background#000
  • sideBar.border#525252
  • sideBar.foreground#b4b4b4
  • sideBarSectionHeader.background#7400aa
  • sideBarSectionHeader.border#888888
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#7400aa
  • statusBar.border#080808
  • statusBar.debuggingBackground#292949
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#7400aa
  • statusBarItem.activeBackground#2c2c62
  • statusBarItem.remoteBackground#312915
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0f0f0f
  • tab.activeBorder#7400aa
  • tab.activeForeground#e0e0e0
  • tab.border#070707
  • tab.hoverBackground#303030
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#000
  • tab.inactiveForeground#969696
  • tab.inactiveModifiedBorder#ffcc00
  • terminal.background#000000
  • terminal.border#7400aa
  • textLink.activeForeground#fffee6
  • textLink.foreground#7400aa
  • titleBar.activeBackground#7400aa
  • titleBar.activeForeground#fff
  • titleBar.border#000000
  • titleBar.inactiveBackground#7400aa
  • titleBar.inactiveForeground#fff
  • tree.indentGuidesStroke#808080
  • welcomePage.background#000000
  • welcomePage.buttonBackground#424242
  • welcomePage.buttonHoverBackground#1b1b35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis
strongbold
header#CBFFAD
source#F3FCEE
meta.diff, meta.diff.header#5A3485
markup.inserted#3DEB1E
markup.deleted#F72343
markup.changed#FD7623
invalid#F72343underline
invalid.deprecated#F3FCEEunderline
entity.name.filename#E8A2F6
markup.error#F72343
markup.underlineunderline
markup.bold#FD7623bold
markup.heading#CBFFADbold
markup. #E8A2F6
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#b125f1
markup.inline.raw, markup.raw.restructuredtext#3DEB1E
markup.underline.link, markup.underline.link.image#b125f1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D145ED
entity.name.directive.restructuredtext, markup.quote#E8A2F6
meta.separator.markdown#5A3485
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3DEB1E
punctuation.definition.constant.restructuredtext#CBFFAD
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CBFFAD
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F3FCEE
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E8A2F6
entity.name.type.class, entity.name.class#b125f1normal
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#CBFFAD
entity.other.inherited-class#b125f1
comment, punctuation.definition.comment, unused.comment, wildcard.comment#a0a0a0
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D145ED
comment.block.documentation entity.name.type#b125f1
comment.block.documentation entity.name.type punctuation.definition.bracket#b125f1
comment.block.documentation variable#FD7623
constant, variable.other.constant#CBFFAD
constant.character.escape, constant.character.string.escape, constant.regexp#D145ED
entity.name.tag#D145ED
entity.other.attribute-name.parent-selector#D145ED
entity.other.attribute-name#3DEB1E
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#3DEB1E
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#FD7623
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3DEB1E
meta.decorator variable.other.object#3DEB1E
keyword, punctuation.definition.keyword#D145ED
keyword.control.new, keyword.operator.newbold
meta.selector#D145ED
support#b125f1
support.function.magic, support.variable, variable.other.predefined#CBFFADregular
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#D145ED
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#F3FCEE
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#D145ED
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#b125f1
constant.other.date, constant.other.timestamp#FD7623
variable.other.alias.yaml#3DEB1E underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D145EDregular
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#b125f1
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FD7623
storage.modifier#D145ED
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E8A2F6
punctuation.definition.group.capture.regexp#D145ED
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F72343
punctuation.definition.character-class.regexp#b125f1
punctuation.definition.group.regexp#FD7623
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F72343
meta.assertion.look-ahead.regexp#3DEB1E
string#E8A2F6
punctuation.definition.string.begin, punctuation.definition.string.end#E8A2F6
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7159C1
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#5A3485
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F3FCEE
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FD7623
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F3FCEEnormal
meta.selectionset.graphql variable#E8A2F6
meta.selectionset.graphql meta.arguments variable#F3FCEE
entity.name.fragment.graphql, variable.fragment.graphql#b125f1
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#F3FCEE
source.shell variable.other#CBFFAD
support.constant#CBFFADnormal
meta.scope.prerequisites.makefile#E8A2F6
meta.attribute-selector.scss#E8A2F6
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F3FCEE
meta.preprocessor.haskell#5A3485

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...