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.

  • actionBar.toggledBackground#dddddd
  • activityBarBadge.background#007acc
  • checkbox.border#919191
  • diffEditor.unchangedRegionBackground#f8f8f8
  • editor.background#ffffff
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.selectionHighlightBackground#add6ff80
  • editorBracketHighlight.foreground1#B39800
  • editorBracketHighlight.foreground2#B830B4
  • editorBracketHighlight.foreground3#0073C4
  • editorIndentGuide.activeBackground1#939393
  • editorIndentGuide.background1#d3d3d3
  • editorSuggestWidget.background#f3f3f3
  • input.placeholderForeground#767676
  • list.activeSelectionIconForeground#ffffff
  • list.focusAndSelectionOutline#90c2f9
  • list.hoverBackground#e8e8e8
  • menu.border#d4d4d4
  • notebook.cellBorderColor#e8e8e8
  • notebook.selectedCellBackground#c8ddf150
  • ports.iconRunningProcessForeground#369432
  • searchEditor.textInputBorder#cecece
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#61616130
  • sideBarTitle.foreground#6f6f6f
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.lastPinnedBorder#61616130
  • tab.selectedBackground#ffffffa5
  • tab.selectedForeground#333333b3
  • terminal.inactiveSelectionBackground#e5ebf1
  • widget.border#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#571DA7
meta.diff, meta.diff.header#7B7F8B
markup.inserted#158C33
markup.deleted#FF5555
markup.changed#B35C00
invalid#FF5555underline italic
invalid.deprecated#09090Bunderline italic
entity.name.filename#97A31A
markup.error#FF5555
markup.underlineunderline
markup.bold#B35C00bold
markup.heading#571DA7bold
markup.italic#97A31Aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#178FAA
markup.inline.raw, markup.raw.restructuredtext#158C33
markup.underline.link, markup.underline.link.image#178FAA
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#A81267
entity.name.directive.restructuredtext, markup.quote#97A31Aitalic
meta.separator.markdown#7B7F8B
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#158C33
punctuation.definition.constant.restructuredtext#571DA7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#571DA7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#09090B
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#97A31A
entity.name.type.class, entity.name.class#178FAAnormal
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#571DA7italic
entity.other.inherited-class#178FAAitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7B7F8B
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#A81267
comment.block.documentation entity.name.type#178FAAitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#178FAA
comment.block.documentation variable#B35C00italic
constant, variable.other.constant#571DA7
constant.character.escape, constant.character.string.escape, constant.regexp#A81267
entity.name.tag#A81267
entity.other.attribute-name.parent-selector#A81267
punctuation.definition.entity.css#A81267
entity.other.attribute-name#178FAAitalic
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#158C33
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#B35C00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#158C33italic
meta.decorator variable.other.object#158C33
keyword, punctuation.definition.keyword#A81267
keyword.control.new, keyword.operator.newbold
meta.selector#A81267
support#178FAAitalic
support.function.magic, support.variable, variable.other.predefined#571DA7regular
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#A81267
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#09090B
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#A81267
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#178FAA
constant.other.date, constant.other.timestamp#B35C00
variable.other.alias.yaml#158C33italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#A81267regular
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#178FAAitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B35C00
storage.modifier#A81267
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#97A31A
punctuation.definition.group.capture.regexp#A81267
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#178FAA
punctuation.definition.group.regexp#B35C00
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#158C33
string#A7B608
punctuation.definition.string.begin, punctuation.definition.string.end#A7B608
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2EC4E5
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#09090B
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#B35C00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#09090Bnormal
meta.selectionset.graphql variable#A7B608
meta.selectionset.graphql meta.arguments variable#09090B
entity.name.fragment.graphql, variable.fragment.graphql#178FAA
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#09090B
source.shell variable.other#571DA7
support.constant#571DA7normal
meta.scope.prerequisites.makefile#A7B608
meta.attribute-selector.scss#A7B608
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#09090B
meta.preprocessor.haskell#7B7F8B
log.error#FF5555bold
log.warning#A7B608bold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Dracula Highlighting by Mopsgamer - VS Code Theme