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#1c6b48
  • activityBar.background#ffffff
  • activityBar.border#f0f0f0
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#393a3450
  • activityBarBadge.background#4e4f47
  • activityBarBadge.foreground#ffffff
  • badge.background#393a3490
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#586069
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#ffffff
  • button.background#1c6b48
  • button.foreground#ffffff
  • button.hoverBackground#1c6b48
  • checkbox.background#f5f5f5
  • checkbox.border#d1d5da
  • debugToolBar.background#ffffff
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#1c6b4815
  • diffEditor.removedTextBackground#ab595910
  • dropdown.background#ffffff
  • dropdown.border#f0f0f0
  • dropdown.foreground#393a34
  • dropdown.listBackground#f5f5f5
  • editor.background#ffffff
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#ffffff
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#22222210
  • editor.lineHighlightBackground#f5f5f5
  • editor.selectionBackground#22222210
  • editor.selectionHighlightBackground#22222215
  • editor.stackFrameHighlightBackground#fffbdd
  • 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#1c6b4820
  • editorError.foreground#ab5959
  • editorGroup.border#f0f0f0
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1c6b48
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#393a3490
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1c6b48
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#296aa3
  • editorLineNumber.activeForeground#4e4f47
  • editorLineNumber.foreground#393a3450
  • editorOverviewRuler.border#fff
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#00000015
  • editorWidget.background#ffffff
  • errorForeground#ab5959
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#1c6b48
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#f5f5f5
  • input.border#f0f0f0
  • input.foreground#393a34
  • input.placeholderForeground#393a3490
  • list.activeSelectionBackground#f5f5f5
  • list.activeSelectionForeground#393a34
  • list.focusBackground#f5f5f5
  • list.hoverBackground#f5f5f5
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • list.inactiveSelectionForeground#393a34
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#ffffff
  • notifications.border#f0f0f0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#ffffff
  • panel.border#f0f0f0
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#1c6b48
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#6a737d
  • peekViewEditor.background#ffffff
  • peekViewResult.background#ffffff
  • pickerGroup.border#e1e4e8
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#1c6b48
  • quickInput.background#ffffff
  • quickInput.foreground#393a34
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#393a3450
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3450
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#1c6b48
  • sideBar.background#ffffff
  • sideBar.border#f0f0f0
  • sideBar.foreground#4e4f47
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#ffffff
  • statusBar.border#f0f0f0
  • statusBar.debuggingBackground#f5f5f5
  • statusBar.debuggingForeground#4e4f47
  • statusBar.foreground#4e4f47
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.prominentBackground#f5f5f5
  • tab.activeBackground#ffffff
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#393a3490
  • tab.activeForeground#393a34
  • tab.border#f0f0f0
  • tab.hoverBackground#f5f5f5
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#121212
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1c6b48
  • terminal.ansiBrightMagenta#b05a78
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#dbd7ca
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1c6b48
  • terminal.ansiMagenta#b05a78
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#dbd7ca
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#ffffff
  • textLink.activeForeground#1c6b48
  • textLink.foreground#1c6b48
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#4e4f47
  • titleBar.border#f5f5f5
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a1a1a1italic
comment.block.documentation storage.type.class.jsdoc#e94949italic
constant.other.php#0f9473bold
keyword.operator.class.php#a55c20
variable, string constant.other.placeholder, variable.other.property, variable.other.readwrite, support.variable.property, punctuation.definition.variable#302121
meta.object-literal.key#5a5a5a
meta.brace.round#978473
constant.other.color#080101
invalid, invalid.illegal#ff2225
keyword#796641
keyword.operator.new#b68500italic
storage.type#c54646italic
storage.type.enum.ts, storage.type.enum.tsx#6a3d74
entity.name.type.enum.ts, entity.name.type.enum.tsx#5f4072bold
entity.name.label.ts, entity.name.label.tsx#778369
keyword.operator.expression.of#888734
storage.type.function.arrow#ed143d
storage.type.property#ff4444italic
storage.modifier#7a4b3fitalic
meta.brace.square#6a886b
storage.modifier.async#14a86f
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#966146
variable.interpolation
keyword.operator.ternary#d089ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#a66fb3
keyword.control punctuation.definition.keyword.css, keyword.control, meta.tag#359259
entity.other.keyframe-offset.css#bdc94d
keyword.control.require#63c57a
keyword.control.switch#bd4eae
keyword.control.as#946438
keyword.control.flow.python, keyword.control.conditional#008b92
keyword.control.loop#a3a111
keyword.controlitalic
keyword.control.return, keyword.control.flow#299200italic
keyword.control.trycatch#f31a1aitalic
support.class.builtin#48b17abold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, source.vue entity.name.tag, entity.name.tag.html#019c63bold
keyword.otheritalic
support.other.variable, string.other.link#0a1e27
constant.numeric#be5828
keyword.other.unit#bd472a
keyword.other.unit.px#1b776f
keyword.other.unit.em#8a612e
keyword.other.unit.rem#a5a31a
constant.language.infinity#5411c0
constant.language.null#728681
constant.language.undefined#678379
keyword.operator.expression.void#575757italic
constant.language.boolean.true#0fb459
constant.language.boolean.false#8f6278
keyword.other.unit
constant.language, support.constant, constant.character, constant.escape, keyword.other, constant.other.caps#00885b
keyword.operator.optional, punctuation.accessor.optional#cc3535
keyword.operator.arithmetic#a14033
keyword.operator.logical#df8805
keyword.operator.relational, keyword.operator.comparison#80a357
keyword.operator.assignment#ac5050
keyword.operator.expression#b65e5eitalic
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#e46330
punctuation.definition.string.template#1d1f86
punctuation.terminator.statement#a1a1a1
keyword.operator.rest#b34a20
meta.attribute string.quoted, meta.tag.attributes string.quoted#e08721
support.function.construct.output#469285italic
keyword.generator.asterisk#4d7cffbold
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#b68b2d
entity.name.property#b68419bold
entity.name.function, meta.definition.method, meta.definition.function, variable.function, support.function, keyword.other.special-method#f83030
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#e21515italic
meta.function-call support.function#d35d3a
variable.parameter#b17056
support.class, support.constantbold
support.class.console#616161bold
variable.other.readwrite support.class.error, support.class.error#f00000bold
meta.decorator#51a06fitalic
variable.other.constant#4aa895bold
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#cc9c35italic 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#8c9441italic underline
meta.interface.ts entity.other.inherited-class#bb5a19italic underline
meta.type.annotation string.quoted#a77032
meta.var.expr meta.brace.round#696969
punctuation.definition.string#c48f53
punctuation.definition.block#a18567
meta.arrow punctuation.definition.block#505050
meta.objectliteral punctuation.definition.block#b8793f
meta.objectliteral meta.method.declaration punctuation.definition.block#835e50
punctuation.section.embedded#aa6241
text.html.php.blade punctuation.section.embedded, meta.embedded.block.php punctuation.section.embedded#6c488b
punctuation.definition.binding-pattern.array#5f99818ebold
punctuation.definition.binding-pattern.object#bd845ebold
entity.name.type.module.ts, entity.name.type.module.tsx#caa849bold 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#aa7f47
keyword.operator.type.annotation, meta.type.annotation.tsx#aa7a3c
meta.type.annotation meta.brace.square#ad7d3e
meta.type.annotation meta.field.declaration meta.definition.property variable.object.property#9c7542
support.type.primitive.ts, support.type.primitive.tsx#c49353italic underline
keyword.operator.spread#c46c65italic
keyword.operator.of#4ead91italic
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#dfa300bold
new.expr.ts meta.type.parameters.ts entity.name.type.ts#bb9761italic 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#396b5f
meta.property-list entity.name.tag#00b170
support.type.vendored.property-name#1e9b5c
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#2b3b3f
support.constant.color.w3c-standard-color-name.css#161c3d
keyword.other.important#f12f21bold
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#000000italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#1f8338
variable.other.class.jsbold
entity.name.type.instance.js#b48c07bold
variable.language.this#b39985
entity.name.method.js#305bb8italic
meta.decorator variable.other.readwrite, punctuation.decorator#5a8a6c
meta.embedded.expression variable.other.readwrite, meta.embedded.expression punctuation.section.embedded.begin, meta.embedded.expression punctuation.section.embedded.end, meta.embedded.expression#423926
meta.class-method.js entity.name.function.js, variable.function.constructor#659438
entity.other.attribute-name#ac5330
source.js constant.other.object.key.js string#8b5b33
source.vue text.html.vue-html string#0c1f2c
source.directive.vue variable#040a14
expression.embedded.vue variable#050d1a
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#0d081b
entity.other.attribute-name.class punctuation.definition.entity.css, entity.other.attribute-name.class#C07938
entity.name.tag.reference.scss#d86f55
punctuation.section.property-list#7e524b
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation#855018
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#098d61bold
meta.property-value.css support.constant#0b1e29
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#01913d
markup.inserted#5c7a2f
markup.deleted#d11f3d
markup.changed#72349b
string.regexp#e42ebc
string.regexp punctuation#7341e7
keyword.control.anchor.regexp#07af93
constant.character.numeric.regexp#e07aaa
constant.character.escape.backslash.regexp#9e58df
string.regexp punctuation.definition.string, string.regexp keyword.operator#745cff
constant.character.escape#62a594
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#687eaditalic
keyword.begin.blade, keyword.end.blade, keyword.blade#ac5757italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#f04d4d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7c4a3a
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#627177
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#c48d3c
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#818821
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#279c58
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#177c17
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#59807a
text.html.markdown, punctuation.definition.list_item.markdown#1a3c42
text.html.markdown markup.inline.raw.markdown#7532a1
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#476074
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#b61c1c
markup.italic#062835italic
markup.bold, markup.bold string#0e323dbold
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#163836italic bold
markup.underline#c54017underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#359661
string.other.link.description.title.markdown#734194
constant.other.reference.link.markdown#b67806
markup.raw.block#753f99
markup.raw.block.fenced.markdown#00000050
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#ed143d
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#0e1725
variable.language.fenced.markdown#344857
meta.separator#65737Ebold
markup.table#1d3844

Shiki preview

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

Loading...

Akagami Color Theme - Coding Theme