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.background#23262E
  • activityBar.foreground#fff
  • activityBarBadge.background#FFCC66
  • activityBarBadge.foreground#000
  • badge.background#FFCC66
  • badge.foreground#000
  • button.background#0679dd
  • button.foreground#fff
  • button.hoverBackground#ff008c
  • debugExceptionWidget.background#FF9F2E60
  • debugExceptionWidget.border#FF9F2E60
  • debugToolBar.background#20232A
  • diffEditor.insertedTextBackground#29BF1220
  • diffEditor.removedTextBackground#F21B3F20
  • dropdown.background#2b303b
  • dropdown.border#363c49
  • editor.background#23262E
  • editor.findMatchBackground#f39d12d7
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#e4dfe7
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#2e323d
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372F3C
  • editor.selectionBackground#303541
  • editor.selectionHighlightBackground#4F435580
  • editor.wordHighlightBackground#4F4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#FFCC00
  • editorError.foreground#d4503f
  • editorGroup.dropBackground#495061d7
  • editorGroup.emptyBackground#23262E
  • editorGroupHeader.tabsBackground#23262E
  • editorGutter.addedBackground#9BC53DBB
  • editorGutter.deletedBackground#FC644DBB
  • editorGutter.modifiedBackground#5BC0EBBB
  • editorHoverWidget.background#373941
  • editorHoverWidget.border#00e8c5cc
  • editorIndentGuide.activeBackground#585C66
  • editorIndentGuide.background#333844
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3B79C7
  • editorOverviewRuler.border#1B1D23
  • editorRuler.foreground#4F4355
  • editorSuggestWidget.background#20232A
  • editorSuggestWidget.border#372F3C
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#FF9F2E
  • editorWhitespace.foreground#333844
  • editorWidget.background#20232A
  • errorForeground#d4503f
  • focusBorder#746f77
  • foreground#D5CED9
  • input.background#2b303b
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#C668BA
  • inputValidation.errorBackground#d4503f
  • inputValidation.errorBorder#d4503f
  • inputValidation.infoBackground#3b6599
  • inputValidation.infoBorder#3b6599
  • inputValidation.warningBackground#ee9e3d
  • inputValidation.warningBorder#ee9e3d
  • list.activeSelectionBackground#333742
  • list.activeSelectionForeground#fff
  • list.dropBackground#3a404e
  • list.focusBackground#333742
  • list.focusForeground#eee
  • list.hoverBackground#333742
  • list.hoverForeground#eee
  • list.inactiveSelectionBackground#2a2c33
  • list.inactiveSelectionForeground#02f7d2
  • merge.currentContentBackground#F9267240
  • merge.currentHeaderBackground#F92672
  • merge.incomingContentBackground#3B79C740
  • merge.incomingHeaderBackground#3B79C7BB
  • notification.background#2d313b
  • notification.buttonBackground#00e8c5cc
  • notification.buttonHoverBackground#07d4b5b0
  • notification.errorBackground#FC644D
  • notification.infoBackground#00b0ff
  • notification.warningBackground#FF9F2E
  • peekView.border#262931
  • peekViewEditor.background#2A2C32
  • peekViewEditor.matchHighlightBackground#FF9F2E60
  • peekViewResult.background#2A2C32
  • peekViewResult.matchHighlightBackground#FF9F2E60
  • peekViewResult.selectionBackground#23262E
  • peekViewTitle.background#2A2C32
  • peekViewTitleDescription.foreground#78747a
  • progressBar.background#C668BA
  • scrollbar.shadow#25282F
  • scrollbarSlider.activeBackground#3A3F4CCC
  • scrollbarSlider.background#4A5F4B77
  • scrollbarSlider.hoverBackground#3A3F4CAA
  • selection.background#746f77
  • sideBar.background#23262E
  • sideBar.foreground#ddd
  • sideBarSectionHeader.background#23262E
  • sideBarTitle.foreground#02f7d2
  • statusBar.background#23262E
  • statusBar.debuggingBackground#fc634c
  • statusBar.noFolderBackground#23262E
  • statusBarItem.activeBackground#07ebc8cc
  • statusBarItem.hoverBackground#0bc9acb0
  • statusBarItem.prominentBackground#0bc9acb0
  • statusBarItem.prominentHoverBackground#07ebc8cc
  • tab.activeBackground#23262e
  • tab.activeBorder#ff008c
  • tab.activeForeground#02f7d2
  • tab.border#15232D
  • tab.inactiveBackground#23262E
  • tab.inactiveForeground#a29fa5
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#00e8c6
  • terminal.ansiBrightGreen#96E072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#FFE66D
  • terminal.ansiCyan#00e8c6
  • terminal.ansiGreen#96E072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#FFE66D
  • terminalCursor.background#23262E
  • terminalCursor.foreground#FFE66D
  • titleBar.activeBackground#1e2027
  • walkThrough.embeddedEditorBackground#23262E
  • widget.shadow#14151A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis#FF0000bold
strongbold
header#BD93F9
source#F8F8A2
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FF5555
markup.changed#FFB86C
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C
markup.error#FF5555
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#F96C75
constant.other.color#ffffff
invalid, invalid.illegal, invalid.broken#FF5370
invalid.unimplemented#ffffff
invalid.deprecated#ffffff
keyword, storage.type, storage.modifier#ac44cc
storage.type, keyword.controlitalic
keyword.operator, 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#89DDFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#61AFEF
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#D19A66
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.directive.restructuredtext, markup.quote#F1FA8Citalic
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#82AAFF
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#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#C17E70
entity.name.filename.find-in-files#C3E88D
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 meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C3E88D
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#f07178
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#82AAFF
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C17E70
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FF5370
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#F78C6C
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FFCB6B
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA
text.html.markdown, punctuation.definition.list_item.markdown#eeffff
text.html.markdown markup.raw.inline#C792EA
text.html.markdown punctuation.definition.raw.markdown#65737e
text.html.markdown meta.dummy.line-break
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 stringbold italic
markup.underline#F78C6Cunderline
markup.strike
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
punctuation.definition.fenced.markdown
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eeffff
variable.language.fenced.markdown#65737e
text.html.markdown punctuation.definition#546E7A
text.html.markdown meta.disable-markdown punctuation.definition#89DDFF
meta.separator#65737ebold
markup.table#eeffff
acejump.label.blue#ffffff
acejump.label.green#ffffff
acejump.label.orange#ffffff
acejump.label.purple#ffffff
sublimelinter.mark.warning#FFCB6B
sublimelinter.gutter-mark#ffffff
sublimelinter.mark.error#FF5370
sublimelinter.annotations
markup.ignored.git_gutter#65737e
markup.untracked.git_gutter#65737e
markup.inserted.git_gutter#C3E88D
markup.changed.git_gutter#FFCB6B
markup.deleted.git_gutter#FF5370
brackethighlighter.default#B2CCD6
brackethighlighter.quote#C3E88D
brackethighlighter.unmatched#FF5370
entity.name.type.class, entity.name.class#8BE9FD
keyword.expressions-and-types.swift , keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, symbol in $this, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#BD93F9italic
entity.other.inherited, class#8BE9FDitalic
entity.name.function-meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method - call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#50FA7B
entity.name.variable.parameter, meta.at - rule.function variable, function params, meta.at - rule.mixin variable# Sass mixin params, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B
keyword, punctuation.definition.keyword#FF79C6
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6

Shiki preview

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

Loading...

Dark One - Coding Theme