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.activeBackground#6b3a3a
  • activityBar.activeBorder#ffe0e0
  • activityBar.activeFocusBorder#ffe0e0
  • activityBar.background#432727
  • activityBar.border#241818
  • activityBar.dropBorder#c96f6f
  • activityBar.foreground#ffe0e0
  • activityBar.inactiveForeground#fadede6e
  • activityBarBadge.background#ad5757
  • activityBarBadge.foreground#fffdfd
  • badge.background#9b5353
  • badge.foreground#ffffff
  • breadcrumb.background#472828
  • breadcrumb.foreground#cccccccc
  • button.background#8a4848
  • button.border#00000000
  • button.foreground#ffdede
  • button.hoverBackground#cf6a6a
  • button.secondaryBackground#4d2c2c
  • button.secondaryForeground#ece5e5
  • button.secondaryHoverBackground#683b3b
  • checkbox.background#8a4848
  • checkbox.border#552e2e
  • debugToolBar.background#4b2a2a
  • debugToolBar.border#00000000
  • diffEditor.border#643d3d
  • diffEditor.insertedTextBackground#6c9d443c
  • diffEditor.removedTextBackground#9b5a5a3c
  • dropdown.background#502f2f
  • editor.background#28191c
  • editor.findMatchBackground#b86b6b
  • editor.findMatchBorder#945959
  • editor.findMatchHighlightBackground#733535e9
  • editor.foldBackground#803b454d
  • editor.rangeHighlightBackground#c771715e
  • editor.selectionBackground#643939
  • editor.selectionHighlightBackground#ffadb126
  • editor.selectionHighlightBorder#6f3d3d
  • editor.wordHighlightStrongBackground#ad636d78
  • editorBracketMatch.border#885353
  • editorCodeLens.foreground#e8a9a9
  • editorError.foreground#ff7f72
  • editorGroup.border#5c3939
  • editorGroup.dropBackground#41222280
  • editorGroupHeader.tabsBackground#2e1c1c
  • editorGutter.addedBackground#7db061
  • editorGutter.background#221316
  • editorGutter.commentRangeForeground#e2cdcd
  • editorGutter.deletedBackground#de7f8c
  • editorGutter.modifiedBackground#4f8d9f
  • editorHoverWidget.background#4d2626
  • editorHoverWidget.border#301c1c
  • editorHoverWidget.foreground#ffd9d9
  • editorIndentGuide.activeBackground#a36464bd
  • editorIndentGuide.background#8c636376
  • editorInfo.foreground#84c5ffa5
  • editorLink.activeForeground#ff8b8b
  • editorMarkerNavigation.background#563737
  • editorMarkerNavigationError.background#b85647
  • editorMarkerNavigationInfo.background#548ec0
  • editorMarkerNavigationWarning.background#b48b55
  • editorRuler.foreground#663a3aaf
  • editorSuggestWidget.background#4b2929
  • editorSuggestWidget.border#5e2929
  • editorSuggestWidget.foreground#ece0e0
  • editorSuggestWidget.highlightForeground#ffa0a0
  • editorSuggestWidget.selectedBackground#884949
  • editorWarning.foreground#ffda33cf
  • editorWidget.background#4e2b2b
  • editorWidget.resizeBorder#643e3e
  • focusBorder#775a5a
  • icon.foreground#ffcbcb
  • input.background#4b2929
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#8c4a4d
  • inputOption.hoverBackground#7a3939
  • keybindingLabel.background#9c5050
  • keybindingLabel.foreground#ffffff
  • list.activeSelectionBackground#6b3737
  • list.dropBackground#a05252
  • list.focusBackground#6d3434
  • list.highlightForeground#ffacac
  • list.hoverBackground#583232
  • list.inactiveSelectionBackground#3f2222
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#4b2727
  • listFilterWidget.noMatchesOutline#ff7373
  • menu.background#562c2c
  • menu.border#6d4141df
  • menu.selectionBackground#a54f4f
  • menu.separatorBackground#995454
  • merge.commonContentBackground#474747
  • merge.commonHeaderBackground#626262
  • merge.currentContentBackground#425a54
  • merge.currentHeaderBackground#4c736b
  • merge.incomingContentBackground#2f3658
  • merge.incomingHeaderBackground#41527b
  • notificationCenter.border#4f2c2c
  • notificationCenterHeader.background#4f2c2c
  • notifications.background#381f1f
  • notificationsErrorIcon.foreground#ffa391
  • notificationsInfoIcon.foreground#ffa391
  • notificationsWarningIcon.foreground#ffa391
  • notificationToast.border#4f2c2c
  • panel.background#301b1b
  • panel.border#241818
  • panelTitle.activeBorder#d36e6e
  • panelTitle.activeForeground#ffecec
  • panelTitle.inactiveForeground#ffd9d999
  • peekView.border#cd6868
  • peekViewEditor.background#4d2c2c
  • peekViewEditor.matchHighlightBackground#ff8f001a
  • peekViewEditor.matchHighlightBorder#ff9a18d7
  • peekViewEditorGutter.background#451c1c
  • peekViewResult.background#563030
  • peekViewResult.fileForeground#ffdede
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#ff979754
  • peekViewResult.selectionBackground#b66464a7
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#6b3a3a
  • peekViewTitleDescription.foreground#ffd9d9
  • peekViewTitleLabel.foreground#fff
  • pickerGroup.border#ec7d7d52
  • pickerGroup.foreground#f7b5b5
  • progressBar.background#e47e92
  • quickInput.foreground#ffd9d9
  • scrollbar.shadow#3b2020
  • scrollbarSlider.activeBackground#e0939366
  • scrollbarSlider.background#dea1a166
  • scrollbarSlider.hoverBackground#ffd7d768
  • selection.background#8c4e4e
  • sideBar.background#321f23
  • sideBar.foreground#e4e4e4
  • sideBarSectionHeader.foreground#f3d6d6
  • sideBarTitle.foreground#e0c1c1
  • statusBar.background#6b3f3f
  • statusBar.border#00000000
  • statusBar.debuggingBackground#965454
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#fff
  • statusBar.focusBorder#00000000
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#472a2a
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#fff
  • statusBarItem.activeBackground#00000000
  • statusBarItem.hoverBackground#885151
  • statusBarItem.remoteBackground#e06060
  • tab.activeBackground#6d3a3a
  • tab.border#4f3131
  • tab.inactiveBackground#381e22
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#626262
  • terminal.ansiBrightBlack#868686
  • terminal.border#cd686859
  • terminal.inactiveSelectionBackground#4f2323
  • terminal.selectionBackground#ffb8b840
  • terminalCursor.background#a76565
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#ffb2b2
  • textLink.foreground#fb8a8a
  • titleBar.activeBackground#583131
  • titleBar.activeForeground#ffe7e7ef
  • titleBar.inactiveBackground#341d1d
  • titleBar.inactiveForeground#ffdcdc7e
  • toolbar.hoverBackground#854444
  • tree.indentGuidesStroke#5c3a3a
  • widget.shadow#3f23235c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9b6c6cfbitalic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword, storage.type, storage.modifier#C792EA
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#56b6c2
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fd8787f3
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#89d6e8
meta.block variable.other#fd8787f3
support.other.variable, string.other.link#fd8787f3
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff9c3ef9
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C3E88D
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffcd98
support.type#B2CCD6
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#C792EA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#82AAFF
markup.inserted#b2e4a0
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
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#F78C6C
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#FF5370
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#C17E70
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#82AAFF
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#f07178
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#C792EA
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
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#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
Taio by baiorett - VS Code Theme