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#19191F
  • activityBar.border#1e1e25
  • activityBar.dropBackground#20222c
  • activityBar.foreground#696c7e
  • activityBarBadge.background#48658a
  • activityBarBadge.foreground#fff
  • badge.background#48658a
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#acb0d0
  • breadcrumb.focusForeground#acb0d0
  • breadcrumb.foreground#787c99
  • breadcrumbPicker.background#16161b
  • button.background#455682DD
  • button.foreground#fff
  • button.hoverBackground#455682AA
  • debugExceptionWidget.background#1a1a20
  • debugExceptionWidget.border#1e1e25
  • debugToolBar.background#1a1a20
  • diffEditor.insertedTextBackground#1ABC9C11
  • diffEditor.removedTextBackground#C33C4A11
  • dropdown.background#16161b
  • dropdown.foreground#9b9fbc
  • editor.background#19191F
  • editor.findMatchBackground#ffca2811
  • editor.findMatchBorder#ffca28
  • editor.findMatchHighlightBackground#3d3d6955
  • editor.findRangeHighlightBackground#1c1c2366
  • editor.foreground#9699a8
  • editor.inactiveSelectionBackground#515c7e44
  • editor.lineHighlightBackground#1e1e25
  • editor.rangeHighlightBackground#1c1c23
  • editor.selectionBackground#515c7e44
  • editor.wordHighlightBackground#48658a33
  • editor.wordHighlightStrongBackground#48658a44
  • editorActiveLineNumber.foreground#696c7e
  • editorBracketMatch.border#ffca28
  • editorCodeLens.foreground#9b9fbc
  • editorCursor.foreground#d26b3e
  • editorError.foreground#ff3333
  • editorGroup.background#16161b
  • editorGroup.border#1e1e25
  • editorGroup.dropBackground#20222c
  • editorGroupHeader.noTabsBackground#16161b
  • editorGroupHeader.tabsBackground#16161b
  • editorGroupHeader.tabsBorder#1e1e25
  • editorGutter.addedBackground#0f8976
  • editorGutter.deletedBackground#cc0000
  • editorGutter.modifiedBackground#479ac4
  • editorHoverWidget.background#16161b
  • editorHoverWidget.border#1e1e25
  • editorIndentGuide.activeBackground#ce9c3d
  • editorIndentGuide.background#23232a
  • editorLineNumber.foreground#3d3f50
  • editorLink.activeForeground#7ed6f9
  • editorLink.foreground#6D3B66
  • editorMarkerNavigation.background#16161b
  • editorOverviewRuler.border#1e1e25
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.warningForeground#ffca28
  • editorRuler.foreground#1e1e25
  • editorSuggestWidget.background#16161b
  • editorSuggestWidget.border#1e1e25
  • editorSuggestWidget.highlightForeground#e73e54
  • editorSuggestWidget.selectedBackground#20222c
  • editorUnnecessary.foreground#ffffff
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#2c2c34
  • editorWidget.background#16161b
  • errorForeground#c97018
  • extensionButton.prominentBackground#455682DD
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#455682AA
  • focusBorder#696c7e8A
  • foreground#9b9fbc
  • gitDecoration.conflictingResourceForeground#C33C4A
  • gitDecoration.ignoredResourceForeground#52576e
  • gitDecoration.modifiedResourceForeground#6189bb
  • gitDecoration.untrackedResourceForeground#1ABC9C
  • gitlens.gutterForegroundColor#4c4f63
  • gitlens.gutterUncommittedForegroundColor#4c4f63
  • gitlens.trailingLineForegroundColor#4c4f63
  • input.background#191a22
  • input.border#20222c
  • input.foreground#9b9fbc
  • input.placeholderForeground#696c7e8A
  • inputOption.activeBorder#20222cff
  • inputValidation.errorBackground#19191F
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#19191F
  • inputValidation.infoBorder#50b4e6
  • inputValidation.warningBackground#19191F
  • inputValidation.warningBorder#ffca28
  • list.activeSelectionBackground#20222c
  • list.activeSelectionForeground#9b9fbc
  • list.focusAndSelectionBackground#20222c
  • list.focusAndSelectionForeground#9b9fbc
  • list.focusBackground#20222c
  • list.focusForeground#afbad4
  • list.highlightForeground#6189bb
  • list.hoverBackground#1f212a
  • list.hoverForeground#9699a8
  • list.inactiveFocusForeground#AFBDC4
  • list.inactiveSelectionBackground#20222c
  • list.inactiveSelectionForeground#acb0d0
  • list.invalidItemForeground#c97018
  • notification.background#1e1e25
  • panel.background#16161b
  • panel.border#1e1e25
  • panelTitle.activeBorder#6189bb
  • panelTitle.activeForeground#9699a8
  • panelTitle.inactiveForeground#696c7e
  • peekView.border#101013
  • peekViewEditor.background#16161b
  • peekViewEditor.matchHighlightBackground#48658a33
  • peekViewResult.background#16161b
  • peekViewResult.fileForeground#595d78
  • peekViewResult.lineForeground#9b9fbc
  • peekViewResult.matchHighlightBackground#48658a33
  • peekViewResult.selectionForeground#acb0d0
  • peekViewTitle.background#16161b
  • peekViewTitleDescription.foreground#595d78
  • peekViewTitleLabel.foreground#595d78
  • pickerGroup.border#1e1e25
  • pickerGroup.foreground#9b9fbc
  • progressBar.background#6D3B66
  • scrollbar.shadow#16161bff
  • scrollbarSlider.activeBackground#20222c
  • scrollbarSlider.background#20222c
  • scrollbarSlider.hoverBackground#20222c
  • selection.background#515c7e44
  • sideBar.background#16161b
  • sideBar.border#1e1e25
  • sideBar.foreground#787c99
  • sideBarSectionHeader.background#19191f
  • sideBarSectionHeader.foreground#acb0d0
  • sideBarTitle.foreground#696c7e
  • statusBar.background#16161b
  • statusBar.border#1e1e25
  • statusBar.debuggingBackground#16161b
  • statusBar.debuggingForeground#696c7e
  • statusBar.foreground#696c7e
  • statusBar.noFolderBackground#16161b
  • statusBarItem.activeBackground#1e1e25
  • statusBarItem.hoverBackground#20222c
  • statusBarItem.prominentBackground#1e1e25
  • statusBarItem.prominentHoverBackground#20222c
  • tab.activeBackground#16161b
  • tab.activeBorder#acb0d0
  • tab.activeForeground#acb0d0
  • tab.border#1e1e25
  • tab.inactiveBackground#16161b
  • tab.inactiveForeground#787c99
  • tab.unfocusedActiveBorder#595d78
  • tab.unfocusedActiveForeground#9699a8AA
  • tab.unfocusedHoverBorder#acb0d0
  • tab.unfocusedInactiveForeground#696c7e
  • terminal.ansiBlack#595d78
  • terminal.ansiBlue#50b4e6
  • terminal.ansiBrightBlack#595d78
  • terminal.ansiBrightBlue#6582af
  • terminal.ansiBrightCyan#7ed6f9
  • terminal.ansiBrightGreen#0f8976
  • terminal.ansiBrightMagenta#9D599D
  • terminal.ansiBrightRed#C33C4A
  • terminal.ansiBrightWhite#707386
  • terminal.ansiBrightYellow#ca9b55
  • terminal.ansiCyan#7ed6f9
  • terminal.ansiGreen#0f8976
  • terminal.ansiMagenta#6D3B66
  • terminal.ansiRed#C33C4A
  • terminal.ansiWhite#707386
  • terminal.ansiYellow#ca9b55
  • terminal.background#16161b
  • terminal.foreground#9699a8
  • textBlockQuote.background#16161b
  • textLink.activeForeground#7ed6f9
  • textLink.foreground#6189bb
  • textPreformat.foreground#9699a8
  • titleBar.activeBackground#1a1a20
  • titleBar.activeForeground#696c7e
  • titleBar.border#1e1e25
  • titleBar.inactiveBackground#19191F
  • titleBar.inactiveForeground#696c7e
  • walkThrough.embeddedEditorBackground#16161b
  • welcomeOverlay.foreground#9699a8
  • welcomePage.quickLinkBackground#20222c
  • welcomePage.quickLinkHoverBackground#1e1e25
  • widget.shadow#101013b3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#AFBAD4ff
comment, punctuation.definition.comment, comment.block.documentation, comment.block.documentation variable.other, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block, keyword.other.phpdoc.php#51546aitalic
entity.name.class, entity.name.type.class, variable.other.global punctuation.definition.variable#EB606B
variable, variable.other.readwrite, variable.other.object, meta.property.object.js variable.other.object.js, variable.less, variable.other.normal, punctuation.definition.variable, variable.other.bracket.shell, embedding.php, variable.other.php, meta.property.object, source.python, source.ruby, keyword.other.name.sublime-settings, constant.other.php, meta.object-literal.key, variable.other.dollar, support.variable.property.js#1ABC9Cregular
entity.name.class, meta.array.literal variable.other.readwrite, entity.name.type.class, support.type, support.class, entity.name.type.namespace, variable.other.global, variable.other.global punctuation.definition.variable, variable.other.class.js, variable.other.constant.object#078c7c
entity.name.tag support.class.component#C33C4A
variable.other.object.property, entity.name.type.module#1ABC9C
variable.scss, variable.less, variable.other.less, variable.other.scss#65dbbdregular
support.other.variable, string.other.link#6189bb
support.type.object.dom.js#EB606Bitalic
string.unquoted.label.js#1ABC9Cregular
constant.other.object.key.js#EB606Bregular
keyword, storage.modifier#ca9b55
keyword.other.newitalic
keyword.control.import.includeitalic
keyword.control.if, keyword.control.endif, keyword.control.else, keyword.control.foreach, keyword.control.endforeach, keyword.control.while, keyword.control.endwhile, keyword.control.switch, keyword.control.endswitch, keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch, entity.name.label, keyword.control.at-rule#ca9b55normal
storage.type#F99157
storage.type.function#F99157normal
variable.language, variable.language punctuation.definition.variable#EB606Bitalic
keyword.operator#50B4DC
keyword.operator.logical, keyword.control.flow.return#FAC863
punctuation.terminator.statement, punctuation.terminator.rule#767D8E
punctuation.separator.key-value, meta.tag.preprocessor#AFBAD4
punctuation.definition.group, punctuation.definition.group.begin, punctuation.definition.group.end, punctuation.section.function, punctuation.definition.parameters, meta.brace.round.begin, meta.brace.round.end, meta.brace.round, punctuation.section.group, punctuation.section.arguments.begin, punctuation.section.arguments.end, meta.group.braces.round.function, punctuation.section.array.begin.php, punctuation.section.array.end.php#AFBAD4
punctuation.definition.parameters.begin, punctuation.definition.parameters.end#F99157
punctuation.definition.dictionary.begin, punctuation.definition.dictionary.end, punctuation.definition.dictionary, punctuation.definition.class.body.begin, punctuation.definition.class.body.end, punctuation.definition.class.body, meta.brace.curly.begin, meta.brace.curly.end, meta.brace.curly, punctuation.definition.block, punctuation.section.scope, source.json#AFBAD4
punctuation.section.embedded.begin, punctuation.section.embedded.end#6189bb
punctuation.definition.array.begin, punctuation.definition.array.end, punctuation.definition.array, meta.group.braces.square, meta.brace.square.begin, meta.brace.square.end, meta.brace.square, punctuation.section.array.begin, punctuation.section.array.end, punctuation.section.array, punctuation.definition.brackets, punctuation.section.brackets.begin, punctuation.section.brackets.end#AFBAD4
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#AFBAD4
meta.function-call, meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level, meta.group.braces.round.function.arguments#65dbbdnormal
meta.method-call entity.name.function, meta.method-call.php, meta.method-call.php entity.name.function.php#EB606Bnormal
support.variable.dom.js#EB606Bitalic
support.variable.property.dom#6189bbnormal
meta.class-method, variable.function.constructor, punctuation.definition.arguments.shell, entity.name.function.shell#EB606B
entity.name.function, support.function.magic#FF435B
punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php#FF435B
meta.function.parameters variable.other.php, meta.function.parameters punctuation.definition.variable#EB606B
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, variable.parameter.php punctuation.definition.variable.php#ca9b55
constant.numeric.json#83AADA
variable.parameter.function#faa16fitalic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly#6189bbnormal
string.quoted.double.json#6189bb
support.other.namespace.use.php, meta.use.php, support.other.namespace.php#6189bb
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#EB606B
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.inline.any.html#EB606B
entity.other.attribute-name.html, meta.tag.attributes entity.other.attribute-name#078c7c
entity.other.attribute-name.id.html#F99157
entity.other.attribute-name.class.html#1ABC9C
meta.tag.sgml.html, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#D24D57
entity.name.tag.inline.form, entity.name.tag.block.form#EB8060
text.html, text.plain, source.env, meta.tag meta.jsx.children#AFBAD4
text.html.markdown meta.dummy.line-break#202127
markup.heading#F99157bold
markup.italic#89B3E7italic
markup.bold#89B3E7bold
string.other.link.title, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#1ABC9C
markup.underline.link#0f8976underline
markup.quote#89B3E7italic
markup.raw.inline, punctuation.definition.raw#EB8060italic
markup.list#879FD1
markup.raw.block.markdown#EB8060
meta.separator#2c2d35bold
support.function.misc.scss, support.function.misc.css, support.function.misc.less, support.function.less, support.function.url.css, source.css meta.property-list.css, support.function.shape.css, support.function.shape.scss, support.function.shape.less, support.function.color.css, support.function.transform.css#F99157
meta.at-rule.include entity.name.function#ca9b55
meta.set.variable, meta.set.variable support.constant.property-value.scss#6189bb
meta.attribute-selector keyword.operator.scss, keyword.operator.css, meta.selector meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.pattern, meta.attribute-selector keyword.operator.less#C33C4A
meta.property-value keyword.operator.scss, meta.property-value keyword.operator.css, meta.property-value meta.attribute-selector keyword.operator.less#F99157
meta.at-rule.include punctuation.definition.parameters.begin.bracket.round, meta.at-rule.include punctuation.definition.parameters.end.bracket.round#ca9b55
keyword.operator.logic.media.css#F99157italic
constant.numeric.css, constant.numeric.scss, constant.numeric.less, support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#F99157
meta.at-rule.include.scss support.function.misc.scss, support.constant.media.css, support.type.property-name.media.css#FAC863
meta.at-rule.media#ca9b55
entity.other.attribute-name#FF435B
entity.name.tag.reference, punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector#ea5560
meta.property-list.scss, meta.at-rule.mixin.scss, punctuation.section.property-list, punctuation.separator.parameters.scss#AFBAD4
variable.parameter.url#F99157normal
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.pseudo-class, entity.other.pseudo-element, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.begin.css, meta.selector.css meta.function-call.css meta.group.css punctuation.definition.group.end.css, entity.other.pseudo-element.css support.type.vendor-prefix.css, meta.property-list meta.attribute-selector string.quoted, meta.property-list punctuation.definition.pseudo-class.begin.bracket.round, meta.property-list punctuation.definition.pseudo-class.end.bracket.round#C33C4A
punctuation.definition.string.begin.scss, punctuation.definition.string.end.scss, punctuation.definition.string.begin.css, punctuation.definition.string.end.css, punctuation.definition.string.begin.less, punctuation.definition.string.end.less, meta.function-call.css meta.group.css#E16325
meta.property-list meta.property-value string.quoted.single.scss, meta.property-list meta.property-value string.quoted.double.scss, meta.property-list meta.property-value string.quoted.single.less, meta.property-list meta.property-value string.quoted.double.less, meta.property-list.css meta.property-value.css meta.function.url.css string.quoted.single.css#F99157
punctuation.definition.entity, punctuationctuation.definition.entity, meta.attribute-selector, keyword.operator.less, keyword.operator.attribute-selector, meta.attribute-selector.scss entity.other.attribute-name.attribute.scss, meta.attribute-selector.less entity.other.attribute-name.attribute.less, meta.selector.css meta.attribute-selector.css string.quoted.single.css#c33c4a
meta.property-list.scss meta.property-value.scss, meta.property-list.scss meta.property-list.scss meta.property-value.scss, source.scss meta.property-list.scss meta.property-list.scss meta.property-value.scss support.function.misc.scss#F99157
constant.other.color.rgb-value#767D8E
entity.name.tag.css, entity.name.tag.scss, keyword.control.html.elements#EB606B
punctuation.separator.key-value#50B4DC
keyword.other.unit, constant.other.unit#E16325
keyword.other.important.scss, keyword.other.important.css#50B4DC
support.type.property-name, meta.property-name, support.type.vendor-prefix#6189bb
meta.property-list.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss#159b81
meta.property-list.scss meta.property-list.scss meta.at-rule.return.scss variable.parameter.url.scss, source.scss meta.property-list.scss meta.property-value.scss variable.parameter.url.scss#1ABC9C
entity.name.method.js#6699cc
support.constant.handlebars#FAC863
variable.parameter.handlebars#F99157
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FAC863
punctuation.definition.variable.smarty, punctuation.section.embedded.begin.smarty, punctuation.section.embedded.end.smarty, meta.tag.template.value.twig, punctuation.section.tag.twig, meta.tag.expression.twig, punctuation.definition.tag.expression.twig, punctuation.definition.tag.output.twig#FAC863
source.smarty, variable.other.twig, variable.other.smarty, meta.tag.expression.twig, entity.name.tag.twig, meta.tag.output.twig#ca9b55
variable.other.property.twig, support.function.twig, meta.function-call.twig, keyword.control.twig, keyword.operator.other.twig, keyword.operator.comparison.twig, support.function.functions.twig, support.function.functions.twig, keyword.operator.assignment.twig, support.function.filters.twig, support.function.built-in.smarty, keyword.operator.smarty#ca9b55
string.quoted.single.twig, string.quoted.double.twig, string.quoted.single.smarty, string.quoted.double.smarty#DBC08A
punctuation.definition.array.begin.php, punctuation.definition.array.end.php#AFBAD4
sublimelinter.mark.warning#DDB700
sublimelinter.mark.error#D93232
sublimelinter.gutter-mark#FFFFFF
brackethighlighter.default#6189bb
brackethighlighter.unmatched#D93232
brackethighlighter.curly, brackethighlighter.square, brackethighlighter.round, brackethighlighter.quote, brackethighlighter.tag, brackethighlighter.c_define, brackethighlighter.angle#ffa300
markup.changed, markup.changed.git_gutter#6189bb
markup.deleted, markup.deleted.git_gutter#D93232
markup.inserted, markup.inserted.git_gutter#1ABC9C
markup.ignored, markup.ignored.git_gutter#3F414D
markup.untracked, markup.untracked.git_gutter#666666
source.apacheconf, string.path.apacheconf#6189bb
string.value.apacheconf#F99157
keyword.access.apacheconf#1ABC9C
source.apacheconf string.replacement.apacheconf#83AADA
entity.tag.apacheconf#EB606B
storage.type.context.nginx#FF435B
source.nginx punctuation.definition.variable, entity.name.context.location.nginx#83AADA
storage.type.context.location.nginx#EB606B
string.ipaddress.nginx#F99157
variable.other.nginx#1ABC9C
source.apacheconf, string.path.apacheconf#6189bb
string.value.apacheconf#F99157
keyword.access.apacheconf#1ABC9C
source.apacheconf string.replacement.apacheconf#83AADA
entity.tag.apacheconf#EB606B
storage.type.context.nginx#FF435B
punctuation.definition.variable.nginx, entity.name.context.location.nginx#83AADA
storage.type.context.location.nginx#EB606B
string.ipaddress.nginx#F99157
variable.other.nginx#1ABC9C
variable.other.bracket.shell, variable.other.normal.shell, punctuation.definition.variable.shell#1ABC9Cregular
support.function.builtin, support.function.external.shell#ca9b55
meta.structure.array.shell, punctuation.definition.array.begin.shell, punctuation.definition.array.end.shell, meta.scope.subshell.shell, punctuation.definition.subshell.shell#6189bb
string.regexp#1ABC9C
constant.character.escape#6189bbitalic
*url*, *link*, *uri*#83AADAunderline
constant.numeric.line-number.find-in-files - match#455682
entity.name.filename.find-in-files#6189bb
source.yaml string.unquoted.plain.out.yaml#AFBAD4
invalid, invalid.illegal, invalid.broken#ffffff
invalid.deprecated#ffffff
string.quoted.double.html invalid.illegal.bad-ampersand.html, string.quoted.single.html invalid.illegal.bad-ampersand.html#6189bb
invalid.unimplemented#ffffff
meta.structure.dictionary.json support.type.property-name.json#FF435B
meta meta.structure.dictionary.value.json support.type.property-name.json#1ABC9C
meta meta meta meta meta meta meta support.type.property-name.json#F99157
meta meta meta meta meta meta meta meta meta support.type.property-name.json#078c7c
meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name.json#50B4DC

Shiki preview

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

Loading...

Enki - Coding Theme