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#0f897611
  • 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#ce9c3d
  • 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#0f8976
  • 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#ce9c3d
  • terminal.ansiCyan#7ed6f9
  • terminal.ansiGreen#0f8976
  • terminal.ansiMagenta#6D3B66
  • terminal.ansiRed#C33C4A
  • terminal.ansiWhite#707386
  • terminal.ansiYellow#ce9c3d
  • 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
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
variable, variable.other.readwrite, meta.property.object.js variable.other.object.js, variable.less, variable.other.normal, punctuation.definition.variable, variable.other.bracket.shell, embedding, meta.embedded.block variable.other, meta.property.object, source.python, source.ruby, keyword.other.name.sublime-settings, constant.other.php, variable.other.dollar, meta.variable.assigned, meta.function-call variable.other#B376B3regular
entity.name.class, meta.array.literal variable.other.readwrite, entity.name.type.class, support.type, support.class, entity.name.type.namespace, variable.other.global punctuation.definition.variable, variable.other.class.js, variable.other.global, variable.other.constant.object, meta.object.member meta.function-call variable.other.object, meta.objectliteral meta.object.member variable.other.object#9D599D
variable.other.property#B376B3
entity.name.tag support.class.component#6189bb
variable.other.object.property, entity.name.type.module#B376B3
entity.name.function, meta.object-literal.key entity.name.function, meta.block entity.name.function, meta.function meta.definition.function entity.name.function, meta.var.expr new.expr entity.name.type, meta.function.php, support.function.magic.php, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.end.bracket.round.php#09C295
meta.object-literal.key#B376B3
support.variable.property.dom#B376B3normal
meta.function.parameters, meta.function.parameters punctuation.definition.variable, meta.function.parameters variable.other#65dbbd
meta.method-call.static.php entity.name.function.php#B376B3
meta.property-list variable.scss, meta.property-list variable.less, meta.property-list variable.css, meta.property-list variable.other.less, meta.property-list variable.other.scss, meta.property-list variable.other.css#CCA1D6
meta.definition.variable.scss variable.scss, meta.definition.variable.less variable.less, meta.definition.variable.css variable.css, meta.definition.variable.less variable.other.less, meta.definition.variable.scss variable.other.scss, meta.definition.variable.css variable.other.css#6189bb
meta.definition.variable.scss constant.numeric.css#B376B3
support.other.variable#F2777A
string.other.link#CCA1D6
support.type.object.dom#50B4DCitalic
string.unquoted.label.js#B376B3regular
keyword, storage.modifier#50B4DC
keyword.other.newitalic
keyword.control.import.includenormal
keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, entity.name.label, keyword.control.at-rulenormal
keyword.control.flowitalic
keyword.control.flow.pythonnormal
storage.type#50B4DC
storage.type.functionnormal
variable.language, variable.language punctuation.definition.variable#50B4DCitalic
keyword.operator, constant.other.object.key, punctuation.accessor#50B4DC
keyword.operator.logical, keyword.control.flow.return#50B4DC
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#50B4DC
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#50B4DC
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
punctuation.definition.arguments.shell#09C295
meta.function-call entity.name.function, meta.block meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, meta.block-level, meta.group.braces.round.function.arguments, support.variable.property.js#CCA1D6regular
meta.class-method, variable.function.constructor, punctuation.definition.arguments.shell#50B4DC
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, variable.parameter.php punctuation.definition.variable.php#09C294
variable.parameteritalic
constant.language.json#6189BB
variable.parameter.function#09C294italic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, meta.group.braces.curly#6189bbnormal
support.other.namespace.use.php, meta.use.php, support.other.namespace.php#6189bb
entity.name.module.js, variable.import.parameter.js#9D599D
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, entity.name.tag.inline.any.html#50B4DC
entity.other.attribute-name.html, meta.tag.attributes entity.other.attribute-name#9D599D
entity.other.attribute-name.id.html, entity.other.attribute-name.style.html, entity.other.attribute-name.event.html#09C295
entity.other.attribute-name.class.html#B376B3
meta.tag.sgml.html, punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#4a75ab
entity.name.tag.inline.form, entity.name.tag.block.form#5bb9df
text.html, text.plain, source.env, meta.tag meta.jsx.children#AFBAD4
text.html.markdown meta.dummy.line-break#4f4f5e
markup.heading#09C295bold
markup.italic#89B3E7italic
markup.boldbold
string.other.link.title, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#B376B3
markup.underline.link#9D599Dunderline
markup.quote#89B3E7italic
markup.raw.inline, punctuation.definition.raw#B376B3
markup.list#879FD1
markup.raw.block.markdown#B376B3
meta.separator#2c2d35bold
variable.other.scss, variable.other.less#ca9eca
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#B376B3
meta.set.variable, meta.set.variable support.constant.property-value.scss#6189bb
meta.attribute-selector string.quoted punctuation.definition.string.begin, meta.attribute-selector string.quoted punctuation.definition.string.end, meta.selector meta.attribute-selector string.quoted.single punctuation.definition.string.begin, meta.selector meta.attribute-selector string.quoted.single punctuation.definition.string.end#65DBBD
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#0f8976
meta.property-value keyword.operator.scss, meta.property-value keyword.operator.css, meta.property-value meta.attribute-selector keyword.operator.less#B376B3
keyword.operator.logic.media.css#09C294italic
meta.at-rule.media.scss support.function.misc.scss, meta.at-rule.include.scss support.function.misc.scss, entity.name.function.scss, support.constant.media.css, support.type.property-name.media.css#50B4DC
meta.at-rule.media#50B4DC
entity.other.attribute-name#09C295
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#0f8976
meta.at-rule.mixin.scss, punctuation.section.property-list, punctuation.separator.parameters.scss#AFBAD4
variable.parameter.url#B376B3normal
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#119f91
meta.property-list constant.numeric, meta.property-list constant.other#09C294
meta.at-rule.include keyword.other.unit#0f8976
meta.property-list.scss punctuation.section.function.begin.bracket.round.css, meta.property-list.scss punctuation.section.function.end.bracket.round.css#0f8976
meta.property-value punctuation.definition.string.begin.scss, meta.property-value punctuation.definition.string.begin.less#9D599D
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#B376B3
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, support.constant.property-value, support.constant.mathematical-symbols.scss, support.constant.mathematical-symbols.less, support.constant.mathematical-symbols.css#B376B3
constant.other.color.rgb-value#767D8E
entity.name.tag.css, entity.name.tag.reference, entity.name.tag.scss, keyword.control.html.elements#65DBBD
punctuation.separator.key-value#50B4DC
keyword.other.unit, constant.other.unit#9D599D
keyword.other.important.scss, keyword.other.important.css#50B4DC
source.css.scss meta.property-list.css entity.name.tag.scss, support.type.property-name, meta.property-name, support.type.vendor-prefix#6189bb
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#B376B3
meta.property-value constant.numeric.scss, meta.property-value constant.numeric.css, meta.property-value constant.numeric.less, support.constant.font-name#B376B3
support.constant.handlebars#09C295
variable.parameter.handlebars#09C294
meta.function.inline.other.handlebars#09C295
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#09C295
meta.method-call.php, meta.method-call.php entity.name.function.php#CCA1D6
meta.array support.function#50B4DC
keyword.blade, 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, variable.parameter.smarty, punctuation.definition.tag.output.twig#09C295
source.smarty, variable.other.twig, variable.other.smarty, meta.tag.expression.twig, entity.name.tag.twig, meta.tag.output.twig, keyword.control.smarty, keyword.control.twig, punctuation.definition.variable.smarty, text.html.twig meta.tag.template.value.twig#09C294
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#09C294
keyword.operator.smarty#09C295
string.quoted.single.twig, string.quoted.double.twig, string.quoted.single.smarty, string.quoted.double.smarty#09C294
punctuation.definition.array.begin.php, punctuation.definition.array.end.php#AFBAD4
source.apacheconf, string.path.apacheconf#6189bb
string.value.apacheconf#09C294
keyword.access.apacheconf#09C294
source.apacheconf string.replacement.apacheconf#AFBAD4
entity.tag.apacheconf#50B4DC
storage.type.context.nginx#09C295
punctuation.definition.variable.nginx, entity.name.context.location.nginx#6189bb
storage.type.context.location.nginx#50B4DC
string.ipaddress.nginx#09C294
variable.other.nginx#B376B3
variable.other.bracket.shell, variable.other.normal.shell, punctuation.definition.variable.shell#B376B3regular
support.function.builtin, support.function.external.shell#50B4DC
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*#CCA1D6underline
constant.numeric.line-number.find-in-files - match#9A5490
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
keyword.other.special-method, variable.function, meta.block-level, support.function#cca1d6
support.variable.dom#50B4DCitalic
meta.structure.dictionary.json support.type.property-name.json#65DBBD
meta meta.structure.dictionary.value.json support.type.property-name.json#B376B3
meta meta meta meta meta meta meta support.type.property-name.json#50b4dc
meta meta meta meta meta meta meta meta meta support.type.property-name.json#9D599D
meta meta meta meta meta meta meta meta meta meta meta meta support.type.property-name.json#B376B3

Shiki preview

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

Loading...

Enki - Coding Theme