Skip to main content
Coding Theme

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#292929
  • activityBar.foreground#d1d1d1
  • activityBarBadge.background#1a85f6
  • activityBarBadge.foreground#d1d1d1
  • badge.background#1a85f6
  • badge.foreground#d1d1d1
  • breadcrumb.activeSelectionForeground#d1d1d1
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#d1d1d1
  • breadcrumb.foreground#555555
  • button.background#0273eb
  • button.border#ffffff00
  • button.foreground#d1d1d1
  • button.hoverBackground#0c6ddd
  • editor.background#181818
  • editor.findMatchBackground#163764
  • editor.findMatchBorder#D49550
  • editor.findMatchHighlightBackground#163764
  • editor.foldBackground#232323
  • editor.foreground#d1d1d1
  • editor.hoverHighlightBackground#383838
  • editor.lineHighlightBackground#292929
  • editor.selectionBackground#163764
  • editor.wordHighlightBackground#383838
  • editor.wordHighlightStrongBackground#194176
  • editorCursor.foreground#1a85f6
  • editorError.foreground#FF5269
  • editorGroupHeader.tabsBackground#292929
  • editorLineNumber.activeForeground#c2c2c2
  • editorLineNumber.foreground#565656
  • editorLink.activeForeground#4d9bf8
  • editorSuggestWidget.background#292929
  • editorSuggestWidget.foreground#d1d1d1
  • editorSuggestWidget.selectedBackground#194176
  • editorWarning.foreground#FACB66
  • focusBorder#292929
  • foreground#d1d1d1
  • gitDecoration.addedResourceForeground#3ea17f
  • gitDecoration.conflictingResourceForeground#D1A354
  • gitDecoration.deletedResourceForeground#d93953
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#4d9bf8
  • gitDecoration.submoduleResourceForeground#1a85f6
  • gitDecoration.untrackedResourceForeground#3ea17f
  • icon.foreground#d1d1d1
  • input.background#292929
  • input.border#292929
  • input.foreground#d1d1d1
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#383838
  • list.activeSelectionForeground#d1d1d1
  • list.focusForeground#d1d1d1
  • list.highlightForeground#8f62d9
  • list.hoverBackground#2d2d2d
  • list.hoverForeground#d1d1d1
  • list.inactiveFocusBackground#383838
  • list.inactiveSelectionBackground#383838
  • menu.background#292929
  • menu.foreground#c2c2c2
  • menu.selectionBackground#194176
  • menu.selectionForeground#D1d1d1
  • menu.separatorBackground#313131
  • minimapSlider.background#46464646
  • panelTitle.activeForeground#d1d1d1
  • panelTitle.inactiveForeground#767676
  • peekView.border#194176
  • peekViewEditor.matchHighlightBackground#194176
  • peekViewEditorGutter.background#222222
  • peekViewResult.background#222222
  • peekViewResult.matchHighlightBackground#194176
  • peekViewTitle.background#222222
  • progressBar.background#1a85f6
  • quickInputList.focusBackground#2d2d2d
  • scrollbar.shadow#292929cc
  • scrollbarSlider.background#46464646
  • searchEditor.findMatchBackground#D49550
  • sideBar.background#181818
  • sideBar.border#292929
  • sideBar.foreground#aaaaaa
  • sideBarSectionHeader.foreground#d1d1d1
  • sideBarTitle.foreground#929292
  • statusBar.background#292929
  • statusBar.debuggingBackground#1a85f6
  • statusBar.debuggingForeground#d1d1d1
  • statusBar.foreground#787878
  • statusBar.noFolderBackground#292929
  • statusBar.noFolderForeground#787878
  • tab.activeBackground#181818
  • tab.activeBorder#181818
  • tab.activeBorderTop#d1d1d1
  • tab.activeForeground#d1d1d1
  • tab.border#292929
  • tab.inactiveBackground#292929
  • tab.unfocusedActiveBackground#181818
  • terminal.ansiBlack#282C34
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#545862
  • terminal.ansiBrightBlue#61AFEF
  • terminal.ansiBrightCyan#82D2CE
  • terminal.ansiBrightGreen#A8CC7C
  • terminal.ansiBrightMagenta#E394DC
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#C8CCD4
  • terminal.ansiBrightYellow#EBC88D
  • terminal.ansiCyan#82D2CE
  • terminal.ansiGreen#A8CC7C
  • terminal.ansiMagenta#E394DC
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#ABB2BF
  • terminal.ansiYellow#EBC88D
  • terminal.background#181818
  • terminal.foreground#ABB2BF
  • terminalCursor.background#ABB2BF
  • terminalCursor.foreground#ABB2BF
  • textBlockQuote.background#163764
  • textCodeBlock.background#163764
  • titleBar.activeBackground#292929
  • titleBar.activeForeground#d1d1d1
  • titleBar.inactiveBackground#292929
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#AF9CFF
punctuation.definition.tag.begin, punctuation.definition.tag.end#777777
meta.attribute.href#E394DC
entity.name.tag.reference#AF9CFFbold
entity.other.attribute-name, punctuation.definition.entity#AF9CFFitalic
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#87C3FF
variable#AF9CFF
variable.parameteritalic
variable.other.object#EBC88D
variable.other.readwrite#AF9CFF
variable.other.constant.property, variable.other.object.property, variable.other.constant.object.property, support.variable.property, meta.block variable.other.property#AF9CFF
meta.object-literal.key variable.other.property#E394DC
variable.other.constant#EBC88D
meta.object-literal.key#AF9CFF
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#e06c75italic
comment, punctuation.definition.comment#828282italic
constant.numeric#E0957B
entity.name.function, meta.require, support.function.any-method, variable.function, keyword.operator.expression.import#87C3FF
support.function
invalid#E394DC
*url*, *link*, *uri*underline
punctuation, meta.brace.square, meta.brace.round#c2c2c2
punctuation.section.embedded#82D2CE
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#E394DC
string.regexp punctuation.definition.string, punctuation.definition.template-expression#82D2CE
keyword.operator.quantifier.regexp#E0957B
string.regexp#87C3FF
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#A8CC7Citalic
storage.type
storage.type.template#82D2CE
storage.type.function#82D2CE
entity.other.inherited-class#A8CC7Citalic
entity.name.type.class, entity.name.class#A8CC7C
support#A8CC7C
support.class.component, meta.tag.custom entity.name.tag#A8CC7C
support.constant#AF9CFF
support.variable
entity.name.type.interface#A8CC7Citalic
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#82D2CE
keyword.control.new, keyword.operator.new#82D2CEbold
keyword.other.template, keyword.other.substitution#d1d1d1
keyword.operator#c2c2c2
entity.name.namespace#EBC88D
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#82D2CE
constant.character.escape, constant.character.string.escape, constant.regexp#82D2CE
constant, variable.other.constant#EBC88D
constant.language#E0957B
constant.other.rgb-value#E0957B
meta.object.member, meta.block, meta.parameters#d1d1d1
comment.block.documentation entity.name.type#A8CC7Citalic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#82D2CE
source.js storage.type, source.ts storage.type, source.jsx storage.type, source.tsx storage.type#82D2CE
meta.tag.metadata.doctype.html entity.name.tag.html#A8CC7C
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#56b6c2italic
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#AF9CFF
source.css variable, source.css variable.other, source.css punctuation.definition.variable#6daaf7
source.css meta.property-list entity.name.tag#AF9CFF
source.css meta.property-value support.constant.mathematical-symbols#d1d1d1
source.css keyword.operator#d1d1d1
source.css keyword.other.unit#E0957B
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#A8CC7C
source.css support.constant.property-value#E394DC
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#E0957B
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#AF9CFFitalic
meta.tag.structure invalid.illegal.character-not-allowed-here.html#777777
meta.tag.other.unrecognized.html.derivative entity.name.tag.html#A8CC7C
meta.using-namespace.cpp keyword.other.using.directive, meta.using-namespace.c keyword.other.using.directive#6daaf7
punctuation.definition.directive.c, punctuation.definition.directive.cpp#82D2CE
variable.other.property.cpp, variable.other.property.c#AF9CFF
source.c keyword.operator, source.cpp keyword.operator#82D2CE
meta.function.c,meta.function.cpp#AF9CFF
support.type.posix-reserved.c, support.type.posix-reserved.cpp#A8CC7C
storage.modifier.import.java,storage.type.java,storage.type.generic.java#EBC88D
token.variable.parameter.java#ff0000
source.python punctuation.definition.decorator#87C3FFbold
source.ini keyword.other.definition.ini#AF9CFF
source.ini entity.name.section.group-title.ini#87C3FF
source.ini punctuation.definition.entity.ini#82D2CE
source.json meta.structure.dictionary.json support.type.property-name.json#AF9CFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6daaf7
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#A8CC7C
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#CC7C8A
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#EBC88D
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#82D2CE
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#d93953
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#E0957B
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#56b6c2
text.html.markdown, punctuation.definition.list_item.markdown#d1d1d1
text.html.markdown markup.inline.raw.markdown#AF9CFF
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#AF9CFF
markup.quote punctuation.definition.blockquote.markdown#65737E
string.other.link.title.markdown#82D2CE
string.other.link.description.title.markdown#AF9CFF
constant.other.reference.link.markdown#EBC88D
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#65737E
meta.separator#65737Ebold
markup.underline.link#82D2CE
markup.inline.raw.string.markdown#87C3FF
text.html.markdown punctuation.definition.list#EBC88D
markup.quote.markdown#777777
entity.name.section.markdown#AF9CFF
Mo Theme by moritaki - VS Code Theme