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