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.activeBorder#4d9375
  • activityBar.background#121212
  • activityBar.border#181818
  • activityBar.foreground#dbd7ca
  • activityBar.inactiveForeground#dedcd530
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#121212
  • badge.background#dedcd590
  • badge.foreground#121212
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#dbd7ca
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#121212
  • button.background#4d9375
  • button.foreground#121212
  • button.hoverBackground#4d9375
  • checkbox.background#181818
  • checkbox.border#111
  • debugToolBar.background#121212
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#121212
  • dropdown.border#181818
  • dropdown.foreground#dbd7ca
  • dropdown.listBackground#181818
  • editor.background#121212
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#121212
  • editor.foreground#dbd7ca
  • editor.inactiveSelectionBackground#eeeeee10
  • editor.lineHighlightBackground#181818
  • editor.selectionBackground#eeeeee10
  • editor.selectionHighlightBackground#eeeeee15
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#a87839
  • editorBracketHighlight.foreground2#7fa712
  • editorBracketHighlight.foreground3#db3b26
  • editorBracketHighlight.foreground4#167e9e
  • editorBracketHighlight.foreground5#da42ac
  • editorBracketHighlight.foreground6#1f7c70
  • editorBracketHighlight.unexpectedBracket.foreground#ff3232
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#181818
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#181818
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd530
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd530
  • editorOverviewRuler.border#111
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#121212
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7ca
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd530
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#181818
  • input.border#181818
  • input.foreground#dbd7ca
  • input.placeholderForeground#dedcd590
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#dbd7ca
  • list.focusBackground#181818
  • list.hoverBackground#181818
  • list.hoverForeground#dbd7ca
  • list.inactiveFocusBackground#121212
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#dbd7ca
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#959da5
  • notifications.background#121212
  • notifications.border#181818
  • notifications.foreground#dbd7ca
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#121212
  • panel.border#181818
  • panelInput.border#2f363d
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7ca
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#121212
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#dbd7ca
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#121212
  • quickInput.foreground#dbd7ca
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#dedcd530
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd530
  • settings.headerForeground#dbd7ca
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#121212
  • sideBar.border#181818
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#dbd7ca
  • sideBarTitle.foreground#dbd7ca
  • statusBar.background#121212
  • statusBar.border#181818
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#121212
  • statusBarItem.prominentBackground#181818
  • tab.activeBackground#121212
  • tab.activeBorder#181818
  • tab.activeBorderTop#dedcd590
  • tab.activeForeground#dbd7ca
  • tab.border#181818
  • tab.hoverBackground#181818
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#181818
  • tab.unfocusedActiveBorderTop#181818
  • tab.unfocusedHoverBackground#121212
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#393a34
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#db889a
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#db889a
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7ca
  • textBlockQuote.background#121212
  • textBlockQuote.border#181818
  • textCodeBlock.background#121212
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#181818
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#494e58italic
comment.block.documentation storage.type.class.jsdoc#93b478italic
constant.other.php#0f9473bold
keyword.operator.class.php#ca8750
variable, string constant.other.placeholder, variable.other.property, variable.other.readwrite, support.variable.property, punctuation.definition.variable#f0ccaf
meta.object-literal.key#ca9a72
meta.brace.round#a1866f
constant.other.color#ffffff
invalid, invalid.illegal#c74017
keyword#978d7a
keyword.operator.new#b89e59italic
storage.type#b46c67italic
storage.type.enum.ts, storage.type.enum.tsx#a887af
entity.name.type.enum.ts, entity.name.type.enum.tsx#a076b9bold
entity.name.label.ts, entity.name.label.tsx#9ba58f
keyword.operator.expression.of#BBB958
storage.type.function.arrow#cc5b53
storage.type.property#e76f37italic
storage.modifier#a56b5ditalic
meta.brace.square#71a773bold
storage.modifier.async#3ea072
constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, keyword.other.template, keyword.other.substitution#ce967cab
variable.interpolation
keyword.operator.ternary#987ebb
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#95729c
keyword.control punctuation.definition.keyword.css, keyword.control, meta.tag#68ad83
entity.other.keyframe-offset.css#bdc94d
keyword.control.require#63c57a
keyword.control.switch#a87ea8
keyword.control.as#a5672d
keyword.control.flow.python, keyword.control.conditional#5bb177
keyword.control.loop#bbb958
keyword.controlitalic
keyword.control.return, keyword.control.flow#259252italic
keyword.control.trycatch#ff6219italic
support.class.builtin#37aa71bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.vue entity.name.tag, entity.name.tag.html#05a168bold
keyword.otheritalic
support.other.variable, string.other.link#d89962
constant.numeric#e47559
keyword.other.unit#c56c56
keyword.other.unit.px#3f8b85
keyword.other.unit.em#aa865a
keyword.other.unit.rem#b8b655
constant.language.infinity#9871d6
constant.language.null#738b85
constant.language.undefined#878f8c
keyword.operator.expression.void#575757italic
constant.language.boolean.true#38cf4c
constant.language.boolean.false#be7598
keyword.other.unit
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#17c78c
keyword.operator.optional, punctuation.accessor.optional#bb4d4d
keyword.operator.arithmetic#b87e76
keyword.operator.logical#dd982f
keyword.operator.relational, keyword.operator.comparison#94b66e
keyword.operator.assignment#c76f6f
keyword.operator.expression#ca6969italic
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#e68a48
punctuation.definition.string.template#ffd6bb
punctuation.terminator.statement#614d40
keyword.operator.rest#d86e44
meta.attribute string.quoted, meta.tag.attributes string.quoted#e9b066
support.function.construct.output#69a097italic
keyword.generator.asterisk#496affbold
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#d1b361
entity.name.property#be9233bold
entity.name.function, meta.definition.method, meta.definition.function, variable.function, support.function, keyword.other.special-method#d85932
meta.object-literal.key entity.name.function, variable.other.constant entity.name.function, meta.field.declaration entity.name.function, meta.definition.method, meta.definition.functionbold
meta.function-call entity.name.function, meta.function-call support.function, support.function.misc.css, support.function.misc.scss#e6663fitalic
meta.function-call support.function#e05126
variable.parameter#d38a6d
support.class, support.constantbold
support.class.console#616161bold
variable.other.readwrite support.class.error, support.class.error#d31121bold
meta.decorator#95b6a1italic
variable.other.constant#91bda2bold
entity.name.type.ts, entity.name.type.tsx, meta.interface.ts entity.name.type, meta.interface.tsx entity.name.type, meta.type.declaration.ts entity.name.type, meta.type.declaration.tsx entity.name.type, meta.type.annotation.ts entity.name.type, meta.type.annotation.tsx entity.name.type, meta.type.annotation.ts meta.brace.square.ts, meta.type.annotation.tsx meta.brace.square.tsx, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.return.type.ts entity.name.type, meta.return.type.tsx entity.name.type, new.expr.ts meta.type.annotation.ts entity.name.type.ts, new.expr.tsx meta.type.annotation.tsx entity.name.type.tsx, support.type.builtin.ts, support.type.builtin.tsx#cfa54aitalic underline
meta.type.annotation.ts meta.type.parameters.ts entity.name.type.ts, meta.type.annotation.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.parameters.ts meta.type.annotation.ts meta.type.parameters.ts entity.name.type.ts, meta.parameters.tsx meta.type.annotation.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.type.declaration.ts meta.type.parameters.ts entity.name.type.ts, meta.type.declaration.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.interface.ts meta.type.parameters.ts entity.name.type.ts, meta.interface.tsx meta.type.parameters.tsx entity.name.type.tsx, new.expr.ts meta.type.parameters.ts entity.name.type.ts, new.expr.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.objectliteral.ts meta.type.parameters.ts entity.name.type.ts, meta.objectliteral.tsx meta.type.parameters.tsx entity.name.type.tsx, meta.return.type.ts meta.type.parameters.ts entity.name.type.ts, meta.return.type.tsx meta.type.parameters.tsx entity.name.type.tsx#91946citalic underline
meta.interface.ts entity.other.inherited-class#bb5a19italic underline
meta.type.annotation string.quoted#b68145
meta.var.expr meta.brace.round#835d31
punctuation.definition.string#aa7a43
punctuation.definition.block#8d7255
meta.arrow punctuation.definition.block#99796e
meta.objectliteral punctuation.definition.block#b97638
meta.objectliteral meta.method.declaration punctuation.definition.block#7a5242
punctuation.section.embedded#ad6949
text.html.php.blade punctuation.section.embedded, meta.embedded.block.php punctuation.section.embedded#866d9c
punctuation.definition.binding-pattern.array#2a6d51bold
punctuation.definition.binding-pattern.object#8d491bbold
entity.name.type.module.ts, entity.name.type.module.tsx#d1a427bold italic underline
keyword.operator.type.ts, keyword.operator.type.tsx#a3740e
meta.object.type punctuation.definition.block, meta.type.declaration meta.brace.square, punctuation.definition.typeparameters, meta.type.annotation punctuation.accessor, meta.type.annotation meta.brace.square#a57f4d
keyword.operator.type.annotation, meta.type.annotation.tsx#b68d58
meta.type.annotation meta.brace.square#d6b386
meta.type.annotation meta.field.declaration meta.definition.property variable.object.property#9b7057
support.type.primitive.ts, support.type.primitive.tsx#be7617italic underline
keyword.operator.spread#974842italic
keyword.operator.of#6dddbbitalic
keyword.operator.expression.delete#d13c31italic
entity.name.type.class, support.class.component, entity.name.type.module, entity.other.inherited-class, new.expr.ts entity.name.type.ts, new.expr.tsx entity.name.type.tsx#e2a128bold
new.expr.ts meta.type.parameters.ts entity.name.type.ts#9b6b23italic underline
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#84bd95
meta.property-list entity.name.tag#72c58b
support.type.vendored.property-name#70dba5
source.css support.constant.property-value.css, source.sass support.constant.property-value.css, source.scss support.constant.property-value.css, source.less support.constant.property-value.css, source.stylus support.constant.property-value.css, source.postcss support.constant.property-value.css#eeae94
support.constant.color.w3c-standard-color-name.css#ecc4b3
keyword.other.important#992219bold
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#ffe8cditalic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#53ac69
variable.other.class.jsbold
entity.name.type.instance.js#e6b515bold
variable.language.this#a37651
entity.name.method.js#82AAFFitalic
meta.decorator variable.other.readwrite, punctuation.decorator#99bda6
meta.embedded.expression variable.other.readwrite, meta.embedded.expression punctuation.section.embedded.begin, meta.embedded.expression punctuation.section.embedded.end, meta.embedded.expression#dfa57c
meta.class-method.js entity.name.function.js, variable.function.constructor#88bd58
entity.other.attribute-name#d4864d
source.js constant.other.object.key.js string#bba38f
source.vue text.html.vue-html string#d4b49a
source.directive.vue variable#e9dfcc
expression.embedded.vue variable#e9dfcc
meta.tag.metadata.doctype entity.name.tag.html, meta.tag.structure.html entity.name.tag.html, meta.tag.structure.head entity.name.tag.html, meta.tag.structure.body entity.name.tag.html, text.html.php.blade entity.name.tag.htmlbold
meta.tag.metadata.script entity.name.tag.html, meta.tag.metadata.style entity.name.tag.html, meta.tag.structure.template entity.name.tag.html
meta.jsx.children.tsx#DDCAC1
entity.other.attribute-name.class punctuation.definition.entity.css, entity.other.attribute-name.class#ff754b
entity.name.tag.reference.scss#b44529
punctuation.section.property-list#aa766e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation#e28f37
meta.attribute.id.html entity.other.attribute-name.html, entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.id.css#1dc78ebold
meta.property-value.css support.constant#bba38f
source.css keyword.control, source.scss keyword.control, source.sass keyword.control, source.css keyword.control punctuation.definition.keyword.scss, source.scss keyword.control punctuation.definition.keyword.scss, source.sass keyword.control punctuation.definition.keyword.scss#00a043
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#d46fbe
string.regexp punctuation#6c4db4
keyword.control.anchor.regexp#55d4bf
constant.character.numeric.regexp#e07aaa
constant.character.escape.backslash.regexp#9e58df
string.regexp punctuation.definition.string, string.regexp keyword.operator#7a64f7
constant.character.escape#62a594
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
keyword.begin.blade, keyword.end.blade, keyword.blade#c25656italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#77c484
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f0805e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#cf9d8e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ca8e33
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#adb462
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3fad6d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3aa33a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ad4120
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#849996
text.html.markdown, punctuation.definition.list_item.markdown#f5d8c3
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#da5656
markup.italic#ddc2a8italic
markup.bold, markup.bold string#e9ded7bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#dfd4bfitalic bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#5ece91
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#e4b969
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#55c788
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f5d8c3
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#f5d8c3

Shiki preview

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

Loading...

Akagami Color Theme - Coding Theme