Skip to main content
CodingTheme

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#0078D4
  • activityBar.background#181818
  • activityBar.border#2B2B2B
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078D4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#0078D4
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#026EC1
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#40A6FF
  • checkbox.background#313131
  • checkbox.border#3C3C3C
  • debugToolBar.background#181818
  • descriptionForeground#9D9D9D
  • diffEditor.insertedTextBackground#0fb53e14
  • dropdown.background#313131
  • dropdown.border#3C3C3C
  • dropdown.foreground#CCCCCC
  • dropdown.listBackground#1F1F1F
  • editor.background#1F1F1F
  • editor.findMatchBackground#9E6A03
  • editor.foreground#CCCCCC
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2B2B2B
  • editorGutter.addedBackground#2EA043
  • editorGutter.deletedBackground#F85149
  • editorGutter.modifiedBackground#0078D4
  • editorIndentGuide.background1#39393939
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#202020
  • errorForeground#F85149
  • focusBorder#0078D4
  • foreground#CCCCCC
  • icon.foreground#CCCCCC
  • input.background#313131
  • input.border#3C3C3C
  • input.foreground#CCCCCC
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489DB82
  • inputOption.activeBorder#2488DB
  • keybindingLabel.foreground#CCCCCC
  • menu.background#1F1F1F
  • notificationCenterHeader.background#1F1F1F
  • notificationCenterHeader.foreground#CCCCCC
  • notifications.background#1F1F1F
  • notifications.border#2B2B2B
  • notifications.foreground#CCCCCC
  • panel.background#181818
  • panel.border#2B2B2B
  • panelInput.border#2B2B2B
  • panelTitle.activeBorder#0078D4
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9D9D9D
  • peekViewEditor.background#1F1F1F
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3C
  • progressBar.background#0078D4
  • quickInput.background#222222
  • quickInput.foreground#CCCCCC
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3C3C3C
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#181818
  • sideBar.border#2B2B2B
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2B2B2B
  • sideBarSectionHeader.foreground#CCCCCC
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#181818
  • statusBar.border#2B2B2B
  • statusBar.debuggingBackground#0078D4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#0078D4
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#1F1F1F
  • statusBarItem.focusBorder#0078D4
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#0078D4
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#1F1F1F
  • tab.activeBorderTop#0078D4
  • tab.activeForeground#FFFFFF
  • tab.border#2B2B2B
  • tab.hoverBackground#1F1F1F
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9D9D9D
  • tab.unfocusedActiveBorder#1F1F1F
  • tab.unfocusedActiveBorderTop#2B2B2B
  • tab.unfocusedHoverBackground#1F1F1F
  • terminal.foreground#CCCCCC
  • terminal.tab.activeBorder#0078D4
  • textBlockQuote.background#2B2B2B
  • textBlockQuote.border#616161
  • textCodeBlock.background#2B2B2B
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3C3C3C
  • textPreformat.foreground#D0D0D0
  • textSeparator.foreground#21262D
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#2B2B2B
  • titleBar.inactiveBackground#1F1F1F
  • titleBar.inactiveForeground#9D9D9D
  • tree.indentGuidesStroke#ffffff17
  • welcomePage.progress.foreground#0078D4
  • welcomePage.tileBackground#2B2B2B
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language, entity.name.tag, meta.diff.header, storage, storage.type, storage.modifier, keyword.operator.noexcept, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, this.self#569cd6
entity.other.attribute-name#9cdcfe
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
comment#676767
storage, storage.modifier, keyword, keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.logical.python, keyword.operator.constructor, keyword.operator.new, punctuation.separator.key-value#d85560
constant.language.boolean, constant.numeric, constant.language, keyword.other.unit#9c7bff
variable.other.readwrite, meta.object-literal, meta.embedded.expression, meta.object.member#c4c4c4
string, meta.tag.without-attributes, meta.embedded.assembly, support.type.property-name.css, support.type.vendored.property-name.css#d0bf62
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#daa971
variable.parameter#c4c4c4
entity.name.type.class, entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#8cc96e
entity.name.tag, support.class.component, support.type.property-name.json, entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.name.tag.css#e97561
keyword.function, keyword.type.go, keyword.func.go, keyword.interface.go, keyword.var.go, keyword.const.go, keyword.map.go, keyword.struct.go, keyword.channel.go#54a5ec
punctuation.section.embedded, punctuation.definition.tag.begin, punctuation.definition.tag.end, support.constant.property-value.css, support.constant.font-name.css, support.constant.property-value.css#a4a4a4
entity.other.attribute-name#fcb76e
meta.return-type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, entity.name.type, support.class, support.type, entity.name.type, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, support.type.python#3cb6c1
meta.definition.property#a8cdd0
keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.type#8acdd2
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ea4a5f
meta.embedded.line, meta.embedded.expression, meta.definition.variable.name, support.variable, entity.name.variable, variable.other.constant, variable.other.enummember, support.type.object.module, punctuation.accessor, punctuation.separator#c4c4c4
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
constant.language, entity.name.tag, meta.diff.header, storage, storage.type, storage.modifier, keyword.operator.noexcept, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, this.self#569cd6
entity.other.attribute-name#9cdcfe
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
comment#676767
storage, storage.modifier, keyword, keyword.operator, keyword.operator.expression, keyword.operator.logical, keyword.operator.logical.python, keyword.operator.constructor, keyword.operator.new, punctuation.separator.key-value#d85560
constant.language.boolean, constant.numeric, constant.language, keyword.other.unit#9c7bff
variable.other.readwrite, meta.object-literal, meta.embedded.expression, meta.object.member#c4c4c4
string, meta.tag.without-attributes, meta.embedded.assembly, support.type.property-name.css, support.type.vendored.property-name.css#d0bf62
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#daa971
variable.parameter#c4c4c4
entity.name.type.class, entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#8cc96e
entity.name.tag, support.class.component, support.type.property-name.json, entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.name.tag.css#e97561
keyword.function, keyword.type.go, keyword.func.go, keyword.interface.go, keyword.var.go, keyword.const.go, keyword.map.go, keyword.struct.go, keyword.channel.go#54a5ec
punctuation.section.embedded, punctuation.definition.tag.begin, punctuation.definition.tag.end, support.constant.property-value.css, support.constant.font-name.css, support.constant.property-value.css#a4a4a4
entity.other.attribute-name#fcb76e
meta.return-type, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, entity.name.type, support.class, support.type, entity.name.type, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, support.type.python#3cb6c1
meta.definition.property#a8cdd0
keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.type#8acdd2
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#ea4a5f
meta.embedded.line, meta.embedded.expression, meta.definition.variable.name, support.variable, entity.name.variable, variable.other.constant, variable.other.enummember, support.type.object.module, punctuation.accessor, punctuation.separator#c4c4c4
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character.escape#d7ba7d
entity.name.label#C8C8C8

Shiki preview

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

Loading...

MonoDark by yoavbls - VS Code Theme