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#0E131B
  • activityBarBadge.background#48bdb1
  • activityBarBadge.foreground#0E131B
  • badge.background#53c6ba
  • badge.foreground#0E131B
  • button.background#53c6bad5
  • button.foreground#0E131B
  • debugToolBar.background#0E131Bd2
  • debugToolBar.border#b38098
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#131c2a
  • dropdown.border#181A1F
  • editor.background#0E131B
  • editor.findMatchBackground#f386bf55
  • editor.findMatchHighlightBackground#f386bf33
  • editor.foreground#c8d1df
  • editor.lineHighlightBackground#131c2a
  • editor.selectionBackground#2a3b5a
  • editor.selectionHighlightBackground#2a3b5a77
  • editor.wordHighlightBackground#484e5b33
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#e6a36fdd
  • editorBracketHighlight.foreground2#88abf9dd
  • editorBracketHighlight.foreground3#53c6bacc
  • editorBracketHighlight.foreground4#ba7bcc
  • editorBracketMatch.background#131c2a
  • editorBracketMatch.border#6c8093c5
  • editorBracketPairGuide.activeBackground1#e6a36fdd
  • editorBracketPairGuide.activeBackground2#88abf9dd
  • editorBracketPairGuide.activeBackground3#53c6bacc
  • editorBracketPairGuide.activeBackground4#ba7bcc
  • editorCursor.background#c8d1df
  • editorCursor.foreground#88abf9
  • editorError.foreground#d1696980
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#0E131B
  • editorGroupHeader.tabsBackground#111722
  • editorGutter.addedBackground#98c379
  • editorGutter.deletedBackground#ba7bcc
  • editorGutter.modifiedBackground#88abf9d5
  • editorHoverWidget.background#0E131Bd2
  • editorHoverWidget.border#6c8093
  • editorIndentGuide.activeBackground1#6c8093
  • editorIndentGuide.background2#1e293e
  • editorLightBulb.foreground#88abf9
  • editorLightBulbAutoFix.foreground#e8c37d
  • editorLineNumber.activeForeground#a8b6cc
  • editorLineNumber.foreground#6c809370
  • editorMarkerNavigation.background#0E131B
  • editorOverviewRuler.border#1e293e
  • editorRuler.foreground#1e293e
  • editorSuggestWidget.background#0E131Bd2
  • editorSuggestWidget.border#6c8093
  • editorSuggestWidget.foreground#a8b6cc
  • editorSuggestWidget.highlightForeground#88abf9
  • editorSuggestWidget.selectedBackground#1e293e
  • editorUnnecessaryCode.opacity#000000b2
  • editorWarning.foreground#e0c084d5
  • editorWhitespace.foreground#6c809370
  • editorWidget.background#0E131B
  • focusBorder#6c8093
  • gitDecoration.addedResourceForeground#88abf9d5
  • gitDecoration.conflictingResourceForeground#e16ba0
  • gitDecoration.deletedResourceForeground#88abf9d5
  • gitDecoration.ignoredResourceForeground#6c80939d
  • gitDecoration.modifiedResourceForeground#88abf9d5
  • gitDecoration.submoduleResourceForeground#6c8093
  • gitDecoration.untrackedResourceForeground#98c379
  • icon.foreground#6c8093
  • input.background#131c2a
  • list.activeSelectionBackground#1e293e
  • list.activeSelectionForeground#c8d1df
  • list.dropBackground#1e293e
  • list.errorForeground#d16969
  • list.focusBackground#292d35
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#111722
  • list.hoverForeground#c8d1df
  • list.inactiveSelectionBackground#131c2a
  • list.inactiveSelectionForeground#c8d1df
  • list.warningForeground#e8c37d
  • panel.border#1e293e
  • peekViewEditor.matchHighlightBackground#131c2a
  • sash.hoverBorder#2a3b5a
  • scrollbarSlider.activeBackground#2a3b5a
  • scrollbarSlider.background#1e293e
  • scrollbarSlider.hoverBackground#24324c
  • settings.checkboxBorder#c8d1df
  • settings.checkboxForeground#7ecec6
  • settings.modifiedItemIndicator#88abf9
  • sideBar.background#0E131B
  • sideBar.border#1e293e
  • sideBar.foreground#6c8093
  • sideBarSectionHeader.background#0E131B
  • statusBar.background#111722
  • statusBar.debuggingBackground#ECBDCEd9
  • statusBar.debuggingBorder#0E131Bd2
  • statusBar.debuggingForeground#0E131B
  • statusBar.foreground#6c8093c5
  • statusBar.noFolderBackground#0E131B
  • statusBarItem.hoverBackground#131c2a
  • tab.activeBackground#0E131B
  • tab.activeBorderTop#88abf9
  • tab.activeForeground#c8d1df
  • tab.border#0E131B
  • tab.inactiveBackground#111722
  • tab.inactiveForeground#6c8093
  • terminal.ansiBlack#0E131Bd2
  • terminal.ansiBlue#7ecec6
  • terminal.ansiGreen#98c379
  • terminal.ansiYellow#e8c37d
  • terminal.background#0E131B
  • terminal.foreground#c8d1df
  • textBlockQuote.background#131c2a
  • titleBar.activeBackground#0E131B
  • titleBar.activeForeground#c8d1df
  • titleBar.inactiveBackground#0E131B
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.object.module#88abf9—
variable.language.this, support.variable.property.js, variable.language.arguments.js, variable.language.self.js, variable.language.proto.js, variable.language.constructor.js, variable.language.prototype.js#4ec9b0italic
support.variable.dom.js, support.variable#e8c37d
support.function.dom.js#53c6ba
variable.language.super#d16969italic
meta.brace.square, meta.brace.round#6c8093
keyword.operator.new#569cd6—
keyword.control#d16969—
support.variable.property.dom.js, variable.other.property#c8d1df—
punctuation.section.embedded#6c8093
meta.tag#c8d1df—
support.class.component#e8c37d—
source.graphql support.type.graphql, source.graphql support.type.enum.graphql#88abf9—
meta.variables.graphql support.type.graphql#c8d1df—
support.type.builtin.graphql#e8c37d—
variable.graphql#E6A26F—
keyword.operator.nulltype.graphql#f386bf—
source.graphql string.block.description.graphql.DOCSTRING, source.graphql string.block.description.graphql.DOCSTRING punctuation.definition.string.graphql, string.description.graphql, punctuation.definition.string.graphql#b38098italic
punctuation.definition.string.graphql, meta.embedded.block.graphql#6c8093—
meta.arguments.graphql variable.graphql, support.type.builtin.graphql#e8c37d—
source.js meta.variables.graphql support.type.graphql#88abf9—
source.css meta.property-list.media-query#88abf9—
source.css variable.other.readwrite#c8d1df—
source.css meta.property-name.media-query, source.css constant.other.color, punctuation.definition.constant.css#c8d1df—
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, support.type.vendored.property-name#88abf9—
source.css keyword.control.at-rule, source.sass keyword.control.at-rule, source.scss keyword.control.at-rule, source.less keyword.control.at-rule, source.stylus keyword.control.at-rule, source.postcss keyword.control.at-rule#d16969—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity#88abf9—
constant.numeric, keyword.other.unit#c8d1df—
source.css entity.name.tag.reference, source.sass entity.name.tag.reference, source.scss entity.name.tag.reference, source.less entity.name.tag.reference, source.stylus entity.name.tag.reference, source.postcss entity.name.tag.reference#6c8093
source.css support.constant.property-value, source.sass support.constant.property-value, source.scss support.constant.property-value, source.less support.constant.property-value, source.stylus support.constant.property-value, source.postcss support.constant.property-value#c8d1df
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable#f386bf
source.css meta.property-value, source.sass meta.property-value, source.scss meta.property-value, source.less meta.property-value, source.stylus meta.property-value, source.postcss meta.property-value#6c8093
entity.other.attribute-name.class#e8c37ditalic
source.sass keyword.control#53c6ba—
source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant, source.postcss support.constant#c8d1df—
constant.keyword.clojure#E6A26F—
keyword.control.clojure#ba7bccitalic
meta.symbol.clojure, meta.var.clojure#c8d1df
storage.control.clojure#ba7bcc
meta.expression.clojure#f386bf
entity.global.clojure#53c6ba
meta.symbol.namespace.clojure#53c6baitalic
entity.name.function.clojure#88abf9—
meta.objectliteral#ce9178—
meta.object-literal.key#E6AC6F—
keyword.operator#c8d1df—
comment, punctuation.definition.comment#6c8093italic
variable, variable.other.object., string constant.other.placeholder, support.type.graphql#88abf9—
constant.other.color, variable.parameter#88abf9—
invalid, invalid.illegal#c8d1df—
keyword, storage.type, storage.modifier#569cd6—
keyword.operator.type.annotation.ts, 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, punctuation.definition.string, keyword.other.template, keyword.other.substitution#6c8093—
punctuation.accessor#6c8093—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#53c6ba—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#53c6ba—
meta.block variable.other#88abf9—
support.other.variable, string.other.link#88abf9—
variable.other.constant, constant.language, support.constant, constant.character, constant.escape, keyword.other#e8c37d—
constant.language.undefined#6c8093—
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, source.css meta.attribute-selector#c8d1df
entity.name, support.class, support.orther.namespace.use.php, entity.other.inherited-class, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e8c37d—
support.type#4ec9b0—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c8d1df—
variable.language#c8d1dfitalic
entity.name.method.js#53c6baitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#53c6ba—
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E6AC6Fitalic
markup.inserted#98c379—
markup.deleted#c8d1df—
markup.changed#e8c37d—
string.regexp#98c379—
punctuation.definition.group.regexp#ce9178—
constant.other.character-class.regexp#E6A26F—
string.regexp punctuation.definition.character-class.regexp#88abf9—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c8d1df—
constant.character.escape#53c6ba—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#53c6baitalic
source.js constant.other.object.key.js string.unquoted.label.js#c8d1dfitalic
source.json meta.structure.dictionary.json support.type.property-name.json#E6A26F—
text.html.markdown, punctuation.definition.list_item.markdown#bbc6d8—
text.html.markdown markup.inline.raw.string.markdown#87f1ae—
text.html.markdown markup.inline.raw.markdown#C792EA—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#c8d1df—
text.html.markdown meta.dummy.line-break#0e131b—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c983ef—
markup.italic#c8d1dfitalic
markup.bold, markup.bold string#c8d1dfbold
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#c8d1dfbold
markup.underline#E6AC6Funderline
markup.strike#9ba2aditalic strikethrough
markup.quote punctuation.definition.blockquote.markdown#c8d1df—
markup.quote#5b8d74italic
string.other.link.title.markdown#53c6ba—
string.other.link.description.title.markdown#ba7bcc—
constant.other.reference.link.markdown#E6AC6F—
markup.raw.block#ba7bcc—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c8d1df—
variable.language.fenced.markdown#c8d1df—
meta.separator#c8d1dfbold
markup.table#c8d1df—
token.info-token#53c6ba—
token.warn-token#e8c37d—
token.error-token#88abf9—
token.debug-token#ba7bcc—
Kaii Code Themes by little-kaii - VS Code Theme