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#1B2738
  • activityBar.foreground#5c73a1
  • activityBarBadge.background#42557B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#282c34
  • button.background#223043
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#98c37920
  • diffEditor.removedTextBackground#FF999920
  • dropdown.background#0D1C2B
  • dropdown.border#0D1C2B
  • editor.background#1B2738
  • editor.findMatchHighlightBackground#42557BAA
  • editor.lineHighlightBackground#33426533
  • editor.selectionBackground#4D6390
  • editor.selectionHighlightBackground#4D639088
  • editor.wordHighlightBackground#42557B77
  • editor.wordHighlightStrongBackground#4D6390
  • editorBracketMatch.background#42557B77
  • editorBracketMatch.border#FFFFFF00
  • editorCursor.foreground#FFFFFF
  • editorError.foreground#FF4C4C
  • editorGroup.background#1B2738
  • editorGroup.border#1E2C3F
  • editorGroupHeader.tabsBackground#182333
  • editorGutter.addedBackground#66FF8A50
  • editorGutter.deletedBackground#FF88FF50
  • editorGutter.modifiedBackground#66A6FF40
  • editorHoverWidget.background#0D1C2B
  • editorHoverWidget.border#0D1C2B
  • editorIndentGuide.background#2B3E5A
  • editorInfo.foreground#4C97FF88
  • editorLineNumber.foreground#2C415C95
  • editorMarkerNavigation.background#4D6390
  • editorOverviewRuler.addedForeground#66FF8A50
  • editorOverviewRuler.border#1E2C3F
  • editorOverviewRuler.deletedForeground#FF88FF80
  • editorOverviewRuler.errorForeground#FF4C4C
  • editorOverviewRuler.findMatchForeground#FFFFFF20
  • editorOverviewRuler.infoForeground#4C97FF
  • editorOverviewRuler.modifiedForeground#66A6FF40
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF20
  • editorOverviewRuler.warningForeground#FF7733
  • editorRuler.foreground#1E2C3F
  • editorSuggestWidget.background#182333
  • editorSuggestWidget.border#1B2738
  • editorSuggestWidget.selectedBackground#273951
  • editorWarning.foreground#4CFF7688
  • editorWhitespace.foreground#2B3E5A
  • editorWidget.background#1B2738
  • extensionButton.prominentBackground#FFFFFF
  • extensionButton.prominentForeground#182333
  • extensionButton.prominentHoverBackground#FFFFFF99
  • gitDecoration.conflictingResourceForeground#FF4C4C
  • gitDecoration.deletedResourceForeground#FF9999AA
  • gitDecoration.ignoredResourceForeground#CAE1FF66
  • gitDecoration.modifiedResourceForeground#66A6FFAA
  • gitDecoration.untrackedResourceForeground#85CC95CC
  • input.background#0D1C2B
  • input.border#0D1C2B
  • list.activeSelectionBackground#1B2738
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1B2738
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#1B2738
  • list.inactiveSelectionBackground#1B2738
  • list.inactiveSelectionForeground#FFFFFF
  • notification.background#0D1C2B
  • panel.border#1B2738
  • panelTitle.inactiveForeground#5F7899
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewTitle.background#0D1C2B
  • scrollbar.shadow#1B273800
  • scrollbarSlider.activeBackground#4D639033
  • scrollbarSlider.background#4D639033
  • scrollbarSlider.hoverBackground#4D639077
  • selection.background#4D6390
  • sideBar.background#182333
  • sideBar.border#182333
  • sideBarSectionHeader.background#182333
  • statusBar.background#182333
  • statusBar.debuggingBackground#182333
  • statusBar.foreground#475366
  • statusBar.noFolderBackground#182333
  • statusBarItem.hoverBackground#182333
  • tab.activeBackground#1B2738
  • tab.activeForeground#E7EFFA
  • tab.border#1B2738
  • tab.inactiveBackground#182333
  • tab.inactiveForeground#E7EFFAAA
  • titleBar.activeBackground#1B2738
  • titleBar.activeForeground#D3DEEE99
  • titleBar.inactiveBackground#182333
  • titleBar.inactiveForeground#D3DEEE66
  • widget.shadow#1B273800

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#85CC95
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#3D5A7Fitalic
comment markup.link#496C99
markup.changed.diff#e0c28550
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd650
markup.inserted.diff#85CC9550
markup.deleted.diff#CCA3A3AA
meta.function.c#FF9999
keyword.control.cpp#FFB38C
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#abb2bf
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#7FB5FF
support.constant.math#FFB38C
support.constant.property.math#FFB38C
variable.other.constant#FFB38C
storage.type.annotation.java#FFB38C
source.java#FF9999
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#abb2bf
meta.method.java#7FB5FF
storage.modifier.import.java,storage.type.java#FFB38C
meta.definition.variable.name.java#FF9999
keyword.operator.logical.js#70C2CC
keyword.operator.bitwise#70C2CC
support.constant.property-value.scss,support.constant.property-value.css#FFB38C
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#FFB38C
punctuation.separator.list.comma.css#7293C3
support.constant.color.w3c-standard-color-name.css#FFB38C
support.type.vendored.property-name.css#70C2CC
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#FF9999
support.module.node,support.type.object.module,support.module.node#FFB38C
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#D9E9FFAA
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#FFB38C
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#DDB3FF
support.type.object.console#FF9999
support.variable.property.process#FFB38C
entity.name.function,support.function.console#7FB5FF
keyword.operator#70C2CC
support.type.object.dom#70C2CC
support.variable.dom,support.variable.property.dom#FF9999
keyword.operator.arithmetic,keyword.operator.comparison#70C2CC
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#DDB3FFff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#DDB3FF
variable.parameter.function.language.python#FFB38C
support.type.python#70C2CC
keyword.operator.logical.python#DDB3FF
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#abb2bf
meta.function-call.generic.python#7FB5FF
constant.character.format.placeholder.other.python#85CC95
none#A6B2C0
keyword.operator#abb2bf
keyword#DDB3FF
variable#FF9999
token.variable.parameter.java#abb2bf
import.storage.java#FFB38C
token.package.keyword#DDB3FF
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#7FB5FF
entity.name.type.namespace#FFB38C
support.class, entity.name.type.class#FFB38C
entity.name.class.identifier.namespace.type#FFB38C
entity.name.class#7FB5FF
entity.name.type#FFB38C
keyword.control#DDB3FF
control.elements, keyword.operator.less#FFB38C
keyword.other.special-method#7FB5FF
storage#DDB3FF
token.storage#DDB3FF
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#DDB3FF
token.storage.type.java#FFB38C
support.function#70C2CC
support.type.property-name#abb2bf
support.constant.property-value#C1CCE1
support.constant.font-name#FFB38C
meta.tag#9AA8C3
string, entity.other.inherited-class#85CC95
constant.other.symbol#70C2CC
constant.numeric#FFB38C
none#FFB38C
none#FFB38C
constant#FFB38C
punctuation.definition.constant#FFB38C
entity.name.tag#FF9999
entity.other.attribute-name#FFB38C
entity.other.attribute-name.id#7FB5FF
entity.other.attribute-name.class.css#FFB38C
meta.selector#DDB3FF
none#D2945D
markup.heading#FF9999bold
markup.heading punctuation.definition.heading, entity.name.section#7FB5FF
keyword.other.unit#FFB38C
markup.bold,todo.bold#FFB38Cbold
punctuation.definition.bold#FFB38C
markup.italic, punctuation.definition.italic,todo.emphasis#DDB3FF
emphasis md#DDB3FF
entity.name.section.markdown#FF9999
punctuation.definition.heading.markdown#FF9999
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#FFB38C
markup.inline.raw.markdown#85CC95
beginning.punctuation.definition.list.markdown#FF9999
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#DDB3FF
markup.underline.link.markdown,markup.underline.link.image.markdown#DDB3FF
string.other.link.title.markdown,string.other.link.description.markdown#7FB5FF
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#FF9999
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FF9999
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#85CC95
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#70C2CC
support.type.property-name.json#FF9999
support.type.property-name.json punctuation#FF9999
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#FFB38C
keyword.operator.error-control.php#DDB3FF
keyword.operator.type.php#DDB3FF
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#FFB38C
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#7FB5FF
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#FFB38C
entity.name.goto-label.php,support.other.php#7FB5FF
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#70C2CC
keyword.operator.regexp.php#DDB3FF
keyword.operator.comparison.php#70C2CC
punctuation.definition.variable.php#FF9999
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#DDB3FF
meta.function.decorator.python#7FB5FF
support.token.decorator.python,meta.function.decorator.identifier.python#70C2CC
function.parameter#FFB38C
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#70C2CC
inline-color-decoration rgb-value#FFB38C
less rgb-value#FFB38C
selector.sass#FF9999
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#FFB38Citalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#FFB38C
block.scope.end,block.scope.begin#abb2bf
entity.name.variable.local.cs#FF9999
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...