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.background#212136
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#292A44
  • button.background#404754
  • debugToolBar.background#292A44
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#292A44
  • editor.editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#F1EFF7
  • editor.lineHighlightBackground#333454
  • editor.selectionBackground#4F528A
  • editor.selectionHighlightBackground#484e5b
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#484e5b
  • editorCursor.foreground#94F2E7
  • editorError.foreground#c24038
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#292A44
  • editorHoverWidget.background#292A44
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#292A44
  • editorRuler.foreground#333454
  • editorSuggestWidget.background#292A44
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#363759
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#292A44
  • input.background#1d1f23
  • list.activeSelectionBackground#363759
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#363759
  • list.inactiveSelectionBackground#363759
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#292A44
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#212136
  • sideBarSectionHeader.background#212136
  • statusBar.background#212136
  • statusBar.debuggingBackground#212136
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#212136
  • statusBarItem.hoverBackground#363759
  • tab.activeBackground#363759
  • tab.border#181A1F
  • tab.inactiveBackground#212136
  • titleBar.activeBackground#212136
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#212136
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#6DFEDF
variable.parameter.function#F1EFF7
comment, punctuation.definition.comment#6D6DB5italic
comment#6D6DB5italic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#6DFEDF
markup.deleted.diff#FF6F9F
meta.function.c#FF6F9F
keyword.control.cpp#e5c07b
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#F1EFF7
punctuation.separator.key-value#bbbbbb
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
keyword.operator.expression.import#2DE0A7
support.constant.math#e5c07b
support.constant.property.math#AE81FF
variable.other.constant#AE81FF
storage.type.annotation.java#e5c07b
source.java#FF6F9F
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java#F1EFF7
meta.method.java#2DE0A7
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#FF6F9F
keyword.operator.logical.js#7AA5FF
keyword.operator.quantifier.regexp#7AA5FF
keyword.operator.bitwise#7AA5FF
support.constant.property-value.scss,support.constant.property-value.css#66D9EF
punctuation.separator.list.comma.css#b9c0ca
support.type.vendored.property-name.css, support.type.property-name.css#66D9EF
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#FF6F9F
support.module.node,support.type.object.module,support.module.node#7AA5FF
support.type.primitive, entity.name.type.entity.name.type.js.meta.type.annotation.js, entity.name.type.entity.name.type.js.meta.return.type.js#66D9EF
keyword.operator.type.annotation, keyword.operator.optional, meta.return.type.js#7AA5FF
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.node#FF6F9F
support.variable.object.process, support.variable.property.process#66D9EF
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#AE81FF
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#7AA5FF
support.type.object.console#FF6F9F
entity.name.function,support.function.console#2DE0A7
keyword.operator#2DE0A7
support.type.object.dom#2DE0A7
support.variable.dom,support.variable.property.dom#66D9EF
keyword.operator.arithmetic,keyword.operator.comparison#7AA5FF
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#7AA5FF
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#AE81FF
support.type.python#2DE0A7
keyword.operator.logical.python#7AA5FF
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#F1EFF7
meta.function-call.generic.python#2DE0A7
keyword.operator.misc.rust#7AA5FF
punctuation.definition.comment#5C6370
none#A6B2C0
keyword.operator#F1EFF7
keyword#7AA5FF
variable#FF6F9F
token.variable.parameter.java#F1EFF7
import.storage.java#e5c07b
token.package.keyword#7AA5FF
token.package#F1EFF7
entity.name.function, meta.require, support.function.any-method#2DE0A7
entity.name.type.namespace#66D9EF
support.class#66D9EF
entity.other.inherited-class#678BDC
entity.name.class.identifier.namespace.type, entity.name.type.class#678BDC
entity.name.class#2DE0A7
entity.name.type#2DE0A7
keyword.control#7AA5FF
control.elements, keyword.operator.less#AE81FF
keyword.other.special-method#2DE0A7
storage#ED4781
token.storage#7AA5FF
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#7AA5FF
token.storage.type.java#e5c07b
support.function#66D9EF
support.type.property-name#F1EFF7
support.constant.property-value#F1EFF7
support.constant.font-name#AE81FF
meta.tag#F1EFF7
string#6DFEDF
constant.other.symbol#2DE0A7
constant.numeric#FFDB7D
none#AE81FF
none#AE81FF
constant#AE81FF
constant.language.import-export-all#7AA5FF
punctuation.definition.constant#AE81FF
entity.name.tag#66D9EF
entity.other.attribute-name#F92672
entity.other.attribute-name.id#2DE0A7normal
entity.other.attribute-name.class.css#F92672normal
meta.selector#7AA5FF
none#D2945D
markup.heading, markup.heading punctuation.definition.heading, entity.name.section#2DE0A7
keyword.other.unit#7AA5FF
markup.bold,todo.bold#AE81FFbold
punctuation.definition.bold#e5c07b
markup.italic, punctuation.definition.italic,todo.emphasis#7AA5FF
emphasis md#7AA5FF
entity.name.section.markdown#2DE0A7
punctuation.definition.heading.markdown#2DE0A7
markup.heading.setext#F1EFF7
punctuation.definition.bold.markdown#AE81FF
markup.inline.raw.markdown#6D6DB5
beginning.punctuation.definition.list.markdown#FF6F9F
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#F1EFF7
punctuation.definition.metadata.markdown#7AA5FF
markup.underline.link.markdown,markup.underline.link.image.markdown#6DFEDF
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.italic.markdownitalic
markup.bold.markdownbold
meta.paragraph.markdown#F1EFF7
string.regexp#6DFEDF
constant.character.escape#AE81FF
punctuation.section.embedded, variable.interpolation#FF6F9F
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#FF6F9F
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FF6F9F
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#6DFEDF
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2DE0A7
support.type.property-name.json#AE81FF
support.type.property-name.json punctuation#6D6DB5
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ED4781
punctuation.definition.string.begin.json ,punctuation.definition.string.end.json#6D6DB5
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php#e5c07b
keyword.operator.error-control.php#7AA5FF
keyword.operator.type.php#7AA5FF
punctuation.section.array.begin.php#F1EFF7
punctuation.section.array.end.php#F1EFF7
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e5c07b
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#2DE0A7
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#AE81FF
entity.name.goto-label.php,support.other.php#2DE0A7
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2DE0A7
keyword.operator.regexp.php#7AA5FF
keyword.operator.comparison.php#2DE0A7
punctuation.definition.variable.php#FF6F9F
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#7AA5FF
meta.function.decorator.python#2DE0A7
support.token.decorator.python,meta.function.decorator.identifier.python#2DE0A7
function.parameter#AE81FF
function.parameter#F1EFF7
function.brace#F1EFF7
function.parameter.ruby, function.parameter.cs#F1EFF7
rgb-value#2DE0A7
inline-color-decoration rgb-value#AE81FF
less rgb-value#AE81FF
selector.sass#FF6F9F
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#FF6F9Fitalic
support.type.primitive.ts,support.type.builtin.ts#FF6F9F
block.scope.end,block.scope.begin#F1EFF7
entity.name.variable.local.cs#FF6F9F
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#AE81FF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6