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#FF4C4C20
  • dropdown.background#0D1C2B
  • dropdown.border#0D1C2B
  • editor.background#1B2738
  • editor.findMatchHighlightBackground#111C2B
  • editor.lineHighlightBackground#1E2C3F
  • editor.selectionBackground#334265
  • editor.selectionHighlightBackground#111C2B
  • editor.wordHighlightBackground#42557B
  • editor.wordHighlightStrongBackground#42557B
  • editorBracketMatch.background#42557B
  • 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#182333
  • editorHoverWidget.border#1E2C3F
  • editorIndentGuide.background#2B3E5A
  • editorLineNumber.foreground#2C415C95
  • editorMarkerNavigation.background#1E2C3F
  • editorOverviewRuler.addedForeground#66FF8A50
  • editorOverviewRuler.border#1E2C3F
  • editorOverviewRuler.deletedForeground#FF88FF80
  • editorOverviewRuler.errorForeground#FF0000
  • editorOverviewRuler.findMatchForeground#FFFFFF20
  • editorOverviewRuler.infoForeground#006AFF
  • editorOverviewRuler.modifiedForeground#66A6FF40
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF20
  • editorOverviewRuler.warningForeground#FFEE00
  • editorRuler.foreground#1E2C3F
  • editorSuggestWidget.background#182333
  • editorSuggestWidget.border#1B2738
  • editorSuggestWidget.selectedBackground#273951
  • 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#747D9180
  • panel.border#1B2738
  • panelTitle.inactiveForeground#273951
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbar.shadow#1B273800
  • scrollbarSlider.activeBackground#4D639033
  • scrollbarSlider.background#4D639033
  • scrollbarSlider.hoverBackground#4D639077
  • sideBar.background#182333
  • sideBarSectionHeader.background#182333
  • statusBar.background#182333
  • statusBar.debuggingBackground#182333
  • statusBar.foreground#475366
  • statusBar.noFolderBackground#182333
  • statusBarItem.hoverBackground#182333
  • tab.activeBackground#1B2738
  • tab.border#1B2738
  • tab.inactiveBackground#182333
  • titleBar.activeBackground#273951
  • titleBar.activeForeground#C8D5E4
  • titleBar.inactiveBackground#273951
  • titleBar.inactiveForeground#5E82B3
  • widget.shadow#1B273800

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin,punctuation.definition.string.end#4CFF76
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#4CFF7650
markup.deleted.diff#CCA3A3AA
meta.function.c#FF4C4C
keyword.control.cpp#FF7733
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#4C97FF
support.constant.math#FF7733
support.constant.property.math#FF7733
variable.other.constant#FF7733
storage.type.annotation.java#FF7733
source.java#FF4C4C
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#4C97FF
storage.modifier.import.java,storage.type.java#FF7733
meta.definition.variable.name.java#FF4C4C
keyword.operator.logical.js#4CEBFF
keyword.operator.bitwise#4CEBFF
support.constant.property-value.scss,support.constant.property-value.css#FF7733
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#FF7733
punctuation.separator.list.comma.css#7293C3
support.constant.color.w3c-standard-color-name.css#FF7733
support.type.vendored.property-name.css#4CEBFF
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#FF4C4C
support.module.node,support.type.object.module,support.module.node#FF7733
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#FF7733
keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary#BA66FF
support.type.object.console#FF4C4C
support.variable.property.process#FF7733
entity.name.function,support.function.console#4C97FF
keyword.operator#4CEBFF
support.type.object.dom#4CEBFF
support.variable.dom,support.variable.property.dom#FF4C4C
keyword.operator.arithmetic,keyword.operator.comparison#4CEBFF
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c#BA66FFff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#BA66FF
variable.parameter.function.language.python#FF7733
support.type.python#4CEBFF
keyword.operator.logical.python#BA66FF
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#4C97FF
constant.character.format.placeholder.other.python#4CFF76
none#A6B2C0
keyword.operator#abb2bf
keyword#BA66FF
variable#FF4C4C
token.variable.parameter.java#abb2bf
import.storage.java#FF7733
token.package.keyword#BA66FF
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method#4C97FF
entity.name.type.namespace#FF7733
support.class, entity.name.type.class#FF7733
entity.name.class.identifier.namespace.type#FF7733
entity.name.class#4C97FF
entity.name.type#FF7733
keyword.control#BA66FF
control.elements, keyword.operator.less#FF7733
keyword.other.special-method#4C97FF
storage#BA66FF
token.storage#BA66FF
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#BA66FF
token.storage.type.java#FF7733
support.function#4CEBFF
support.type.property-name#abb2bf
support.constant.property-value#C1CCE1
support.constant.font-name#FF7733
meta.tag#9AA8C3
string, entity.other.inherited-class#4CFF76
constant.other.symbol#4CEBFF
constant.numeric#FF7733
none#FF7733
none#FF7733
constant#FF7733
punctuation.definition.constant#FF7733
entity.name.tag#FF4C4C
entity.other.attribute-name#FF7733
entity.other.attribute-name.id#4C97FF
entity.other.attribute-name.class.css#FF7733
meta.selector#BA66FF
none#D2945D
markup.heading#FF4C4Cbold
markup.heading punctuation.definition.heading, entity.name.section#4C97FF
keyword.other.unit#FF7733
markup.bold,todo.bold#FF7733bold
punctuation.definition.bold#FF7733
markup.italic, punctuation.definition.italic,todo.emphasis#BA66FF
emphasis md#BA66FF
entity.name.section.markdown#FF4C4C
punctuation.definition.heading.markdown#FF4C4C
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#FF7733
markup.inline.raw.markdown#4CFF76
beginning.punctuation.definition.list.markdown#FF4C4C
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#BA66FF
markup.underline.link.markdown,markup.underline.link.image.markdown#BA66FF
string.other.link.title.markdown,string.other.link.description.markdown#4C97FF
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#FF4C4C
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#FF4C4C
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#4CFF76
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#4CEBFF
support.type.property-name.json#FF4C4C
support.type.property-name.json punctuation#FF4C4C
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#FF7733
keyword.operator.error-control.php#BA66FF
keyword.operator.type.php#BA66FF
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#FF7733
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#4C97FF
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#FF7733
entity.name.goto-label.php,support.other.php#4C97FF
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#4CEBFF
keyword.operator.regexp.php#BA66FF
keyword.operator.comparison.php#4CEBFF
punctuation.definition.variable.php#FF4C4C
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#BA66FF
meta.function.decorator.python#4C97FF
support.token.decorator.python,meta.function.decorator.identifier.python#4CEBFF
function.parameter#FF7733
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#4CEBFF
inline-color-decoration rgb-value#FF7733
less rgb-value#FF7733
selector.sass#FF4C4C
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#FF7733italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#FF7733
block.scope.end,block.scope.begin#abb2bf
entity.name.variable.local.cs#FF4C4C
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...

Mirage - Coding Theme