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#d1d1d1
  • activityBar.background#181818
  • activityBar.foreground#727272
  • activityBarBadge.background#4940ff
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4940ff
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#d1d1d1
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#d1d1d1
  • breadcrumb.foreground#555455
  • button.background#4d51fb
  • button.border#FFFFFF00
  • button.foreground#FFFFFF
  • button.hoverBackground#525afd
  • editor.background#181818
  • editor.findMatchBackground#3c1dc0
  • editor.findMatchBorder#e2803a
  • editor.findMatchHighlightBackground#3c1dc0
  • editor.foldBackground#222222
  • editor.foreground#d1d1d1
  • editor.hoverHighlightBackground#383838
  • editor.lineHighlightBackground#1F1E1E
  • editor.selectionBackground#3c1dc0
  • editor.wordHighlightBackground#383838
  • editor.wordHighlightStrongBackground#3c1ebf
  • editorCursor.foreground#4940ff
  • editorError.foreground#ff5266
  • editorGroupHeader.tabsBackground#181818
  • editorLineNumber.activeForeground#c1c2c2
  • editorLineNumber.foreground#565556
  • editorLink.activeForeground#5868ff
  • editorSuggestWidget.background#292929
  • editorSuggestWidget.foreground#d1d1d1
  • editorSuggestWidget.selectedBackground#3c1ebf
  • editorWarning.foreground#f9bc53
  • focusBorder#292929
  • foreground#d1d1d1
  • gitDecoration.addedResourceForeground#23bc8a
  • gitDecoration.conflictingResourceForeground#e1b457
  • gitDecoration.deletedResourceForeground#c9184e
  • gitDecoration.ignoredResourceForeground#555455
  • gitDecoration.modifiedResourceForeground#5868ff
  • gitDecoration.submoduleResourceForeground#4940ff
  • gitDecoration.untrackedResourceForeground#23bc8a
  • icon.foreground#d1d1d1
  • input.background#292929
  • input.border#292929
  • input.foreground#d1d1d1
  • input.placeholderForeground#787779
  • list.activeSelectionBackground#222222
  • list.activeSelectionForeground#d1d1d1
  • list.focusForeground#d1d1d1
  • list.highlightForeground#955ffb
  • list.hoverBackground#2D2D2D
  • list.hoverForeground#d1d1d1
  • list.inactiveFocusBackground#222222
  • list.inactiveSelectionBackground#222222
  • menu.background#292929
  • menu.foreground#c1c2c2
  • menu.selectionBackground#3c1ebf
  • menu.selectionForeground#d1d1d1
  • menu.separatorBackground#313131
  • minimapSlider.background#22222246
  • panelTitle.activeForeground#d1d1d1
  • panelTitle.inactiveForeground#787779
  • peekView.border#3c1ebf
  • peekViewEditor.matchHighlightBackground#3c1ebf
  • peekViewEditorGutter.background#222222
  • peekViewResult.background#222222
  • peekViewResult.matchHighlightBackground#3c1ebf
  • peekViewTitle.background#222222
  • progressBar.background#4940ff
  • quickInputList.focusBackground#2D2D2D
  • scrollbar.shadow#292929CC
  • scrollbarSlider.background#22222246
  • searchEditor.findMatchBackground#e2803a
  • sideBar.background#181818
  • sideBar.border#292929
  • sideBar.foreground#aaaaa9
  • sideBarSectionHeader.foreground#d1d1d1
  • sideBarTitle.foreground#929291
  • statusBar.background#181818
  • statusBar.debuggingBackground#4940ff
  • statusBar.debuggingForeground#d1d1d1
  • statusBar.foreground#d1d1d1
  • statusBar.noFolderBackground#181818
  • statusBar.noFolderForeground#787779
  • tab.activeBackground#1D1D1D
  • tab.activeBorder#2F2F2F
  • tab.activeBorderTop#181818
  • tab.activeForeground#d1d1d1
  • tab.border#181818
  • tab.inactiveBackground#181818
  • tab.unfocusedActiveBackground#181818
  • terminal.ansiBlack#282C34
  • terminal.ansiBlue#627eff
  • terminal.ansiBrightBlack#535761
  • terminal.ansiBrightBlue#627eff
  • terminal.ansiBrightCyan#fe8d55
  • terminal.ansiBrightGreen#51e9ad
  • terminal.ansiBrightMagenta#fe91e2
  • terminal.ansiBrightRed#ef5e66
  • terminal.ansiBrightWhite#c8cbd4
  • terminal.ansiBrightYellow#f8d581
  • terminal.ansiCyan#fe8d55
  • terminal.ansiGreen#51e9ad
  • terminal.ansiMagenta#fe91e2
  • terminal.ansiRed#ef5e66
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#f8d581
  • terminal.background#181818
  • terminal.foreground#abb2bf
  • terminalCursor.background#abb2bf
  • terminalCursor.foreground#abb2bf
  • textBlockQuote.background#3c1dc0
  • textCodeBlock.background#3c1dc0
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#d1d1d1
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#787779

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#9a87fc
punctuation.definition.tag.begin, punctuation.definition.tag.end#787779
meta.attribute.href#fe91e2
entity.name.tag.reference#9a87fcbold
entity.other.attribute-name, punctuation.definition.entity#9a87fcitalic
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#93a0ff
variable#9a87fc
variable.parameteritalic
variable.other.object#f8d581
variable.other.readwrite#9a87fc
variable.other.constant.property, variable.other.object.property, variable.other.constant.object.property, support.variable.property, meta.block variable.other.property#9a87fc
meta.object-literal.key variable.other.property#fe91e2
variable.other.constant#f8d581
meta.object-literal.key#9a87fc
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#ef5e66italic
comment, punctuation.definition.comment#828282italic
constant.numeric#eb8362
entity.name.function, meta.require, support.function.any-method, variable.function, keyword.operator.expression.import#93a0ff
support.function
invalid#fe91e2
*url*, *link*, *uri*underline
punctuation, meta.brace.square, meta.brace.round#c1c2c2
punctuation.section.embedded#fe8d55
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#fe91e2
string.regexp punctuation.definition.string, punctuation.definition.template-expression#fe8d55
keyword.operator.quantifier.regexp#eb8362
string.regexp#93a0ff
entity.name.type, storage.type, keyword.primitive-datatypes, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, support.type.primitive#51e9aditalic
storage.type
storage.type.template#fe8d55
storage.type.function#fe8d55
entity.other.inherited-class#51e9aditalic
entity.name.type.class, entity.name.class#51e9ad
support#51e9ad
support.class.component, meta.tag.custom entity.name.tag#51e9ad
support.constant#9a87fc
support.variable
entity.name.type.interface#51e9aditalic
keyword, keyword.operator.ternary, keyword.operator.decrement, keyword.operator.increment, keyword.operator.cast.static_cast, keyword.operator.expression, keyword.operator.logical, punctuation.definition.keyword, storage.type.class, storage.type.function.arrow#fe8d55
keyword.control.new, keyword.operator.new#fe8d55bold
keyword.other.template, keyword.other.substitution#d1d1d1
keyword.operator#c1c2c2
entity.name.namespace#f8d581
storage, storage.type.interface, storage.type.type, storage.type.namespace, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#fe8d55
constant.character.escape, constant.character.string.escape, constant.regexp#fe8d55
constant, variable.other.constant#f8d581
constant.language#eb8362
constant.other.rgb-value#eb8362
meta.object.member, meta.block, meta.parameters#d1d1d1
comment.block.documentation entity.name.type#51e9aditalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#fe8d55
source.js storage.type, source.ts storage.type, source.jsx storage.type, source.tsx storage.type#fe8d55
meta.tag.metadata.doctype.html entity.name.tag.html#51e9ad
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.pseudo-class punctuation.definition.entity#54ded6italic
meta.at-rule.mixin, meta.at-rule.extend, source.css meta.property-value meta.function, source.css meta.property-value support.function, source.css meta.property-value support.function.any-method#9a87fc
source.css variable, source.css variable.other, source.css punctuation.definition.variable#747eff
source.css meta.property-list entity.name.tag#9a87fc
source.css meta.property-value support.constant.mathematical-symbols#d1d1d1
source.css keyword.operator#d1d1d1
source.css keyword.other.unit#eb8362
source.css meta.property-value keyword.other.important, source.css keyword.control.at-rule punctuation.definition.keyword, source.css keyword.control.at-rule, meta.tag.metadata.doctype.html entity.name.tag.html, keyword.extend.css, keyword.global.css#51e9ad
source.css support.constant.property-value#fe91e2
source.css support.type.property-name#d1d1d1
source.css entity.other.attribute-name, punctuation.definition.entity
punctuation.definition.constant.css, constant.other.color.rgb-value.hex#eb8362
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style, source.vue meta.block.template, source.vue meta.block.script, source.vue meta.block.style#9a87fcitalic
meta.tag.structure invalid.illegal.character-not-allowed-here.html#787779
meta.tag.other.unrecognized.html.derivative entity.name.tag.html#51e9ad
meta.using-namespace.cpp keyword.other.using.directive, meta.using-namespace.c keyword.other.using.directive#747eff
punctuation.definition.directive.c, punctuation.definition.directive.cpp#fe8d55
variable.other.property.cpp, variable.other.property.c#9a87fc
source.c keyword.operator, source.cpp keyword.operator#fe8d55
meta.function.c,meta.function.cpp#9a87fc
support.type.posix-reserved.c, support.type.posix-reserved.cpp#51e9ad
storage.modifier.import.java,storage.type.java,storage.type.generic.java#f8d581
token.variable.parameter.java#c9184e
source.python punctuation.definition.decorator#93a0ffbold
source.ini keyword.other.definition.ini#9a87fc
source.ini entity.name.section.group-title.ini#93a0ff
source.ini punctuation.definition.entity.ini#fe8d55
source.json meta.structure.dictionary.json support.type.property-name.json#9a87fc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#747eff
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#51e9ad
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#ff7699
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#f8d581
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#fe8d55
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#c9184e
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#eb8362
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#54ded6
text.html.markdown, punctuation.definition.list_item.markdown#d1d1d1
text.html.markdown markup.inline.raw.markdown#9a87fc
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6d7490
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9a87fc
markup.quote punctuation.definition.blockquote.markdown#6d7490
string.other.link.title.markdown#fe8d55
string.other.link.description.title.markdown#9a87fc
constant.other.reference.link.markdown#f8d581
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d1d1d1
variable.language.fenced.markdown#6d7490
meta.separator#6d7490bold
markup.underline.link#fe8d55
markup.inline.raw.string.markdown#93a0ff
text.html.markdown punctuation.definition.list#f8d581
markup.quote.markdown#787779
entity.name.section.markdown#9a87fc
Feefoolec theme by Feefoolec - VS Code Theme