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#94AD4F
  • activityBar.activeFocusBorder#94AD4F
  • activityBar.background#101010
  • activityBar.border#272727
  • activityBar.dropBorder#94AD4F
  • activityBar.foreground#777777
  • activityBarBadge.background#AAA
  • activityBarBadge.foreground#000
  • badge.background#AAA
  • badge.foreground#000
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#171717
  • breadcrumb.focusForeground#bbbbbb
  • breadcrumb.foreground#777777
  • breadcrumbPicker.background#000
  • button.background#191919
  • button.border#272727
  • button.foreground#777777
  • button.hoverBackground#212121
  • button.secondaryBackground#151515
  • button.secondaryForeground#555555
  • button.secondaryHoverBackground#191919
  • checkbox.background#191919
  • checkbox.border#272727
  • checkbox.foreground#777777
  • checkbox.selectBackground#191919
  • checkbox.selectBorder#272727
  • debugIcon.breakpointForeground#A65548
  • debugToolBar.background#151515
  • debugToolBar.border#272727
  • diffEditor.border#272727
  • diffEditor.diagonalFill#7777772A
  • diffEditor.insertedLineBackground#94AD4F1F
  • diffEditor.insertedTextBackground#00000000
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#00000000
  • diffEditor.removedTextBorder#00000000
  • diffEditorGutter.insertedLineBackground#94AD4F2F
  • diffEditorGutter.removedLineBackground#A655482F
  • dropdown.background#191919
  • dropdown.border#292929
  • dropdown.foreground#777
  • dropdown.listBackground#191919
  • editor.background#171717
  • editor.findMatchBackground#FF8B452f
  • editor.findMatchBorder#FF8B455f
  • editor.findMatchHighlightBackground#FF8B451f
  • editor.findMatchHighlightBorder#FF8B453f
  • editor.foreground#ffffff4f
  • editor.hoverHighlightBackground#FFFFFF0F
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#ffffff22
  • editor.wordHighlightBackground#FFFFFF0F
  • editor.wordHighlightBorder#FFFFFF1F
  • editorBracketMatch.background#3232321a
  • editorBracketMatch.border#454545
  • editorCursor.background#000000
  • editorCursor.foreground#FF8B45
  • editorError.foreground#A655489F
  • editorGroupHeader.border#272727
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#272727
  • editorGutter.addedBackground#AEC9647f
  • editorGutter.deletedBackground#A655487f
  • editorGutter.modifiedBackground#43888BAf
  • editorHoverWidget.background#151515
  • editorHoverWidget.border#272727
  • editorIndentGuide.activeBackground1#d6ff8a28
  • editorIndentGuide.background1#252525
  • editorInfo.foreground#4388897F
  • editorLineNumber.activeForeground#BBBBBB
  • editorLineNumber.dimmedForeground#000000
  • editorLineNumber.foreground#777777
  • editorSuggestWidget.background#151515
  • editorSuggestWidget.focusHighlightForeground#BBBBBB
  • editorSuggestWidget.highlightForeground#BBBBBB
  • editorSuggestWidget.selectedBackground#FFFFFF0F
  • editorSuggestWidgetStatus.foreground#777777
  • editorWidget.background#151515
  • editorWidget.border#272727
  • editorWidget.foreground#777777
  • extensionIcon.sponsorForeground#ffff00
  • extensionIcon.starForeground#A65548AA
  • extensionIcon.verifiedForeground#AEC964AA
  • focusBorder#454545
  • gitDecoration.deletedResourceForeground#A65548AA
  • gitDecoration.ignoredResourceForeground#3F3F3F
  • gitDecoration.modifiedResourceForeground#43888BAA
  • gitDecoration.untrackedResourceForeground#AEC964AA
  • icon.foreground#777777
  • input.background#191919
  • input.border#292929
  • input.foreground#777
  • input.placeholderForeground#333
  • list.activeSelectionBackground#FFFFFF1F
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#FFFFFF0F
  • list.hoverBackground#FFFFFF0F
  • list.hoverForeground#BBBBBB
  • list.inactiveSelectionBackground#FFFFFF0F
  • list.inactiveSelectionForeground#BBBBBB
  • menu.background#151515
  • menu.border#272727
  • menu.foreground#777777
  • menu.selectionBackground#FFFFFF0F
  • menu.selectionForeground#bbb
  • menu.separatorBackground#272727
  • minimap.background#191919
  • minimap.errorHighlight#BF58437F
  • minimap.findMatchHighlight#FF8B452f
  • minimap.infoHighlight#5A9C967F
  • minimapGutter.addedBackground#9eb66e7f
  • minimapGutter.deletedBackground#DE644B7F
  • minimapGutter.modifiedBackground#5A9C967F
  • notificationLink.foreground#A3C7D9
  • notifications.background#151515
  • notifications.border#272727
  • notifications.foreground#777777
  • notificationsErrorIcon.foreground#A65548
  • notificationsInfoIcon.foreground#43888B
  • notificationsWarningIcon.foreground#D9CC8D
  • notificationToast.border#272727
  • panel.background#101010
  • panel.border#272727
  • panel.dropBorder#000
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#777
  • peekView.border#272727
  • peekViewEditor.background#212121
  • peekViewResult.background#212121
  • peekViewResult.matchHighlightBackground#FF8B455f
  • peekViewResult.selectionBackground#FFFFFF1F
  • peekViewTitle.background#191919
  • peekViewTitleDescription.foreground#777777
  • peekViewTitleLabel.foreground#BBBBBB
  • problemsErrorIcon.foreground#A65548AA
  • problemsInfoIcon.foreground#AEC964AA
  • problemsWarningIcon.foreground#43888BAA
  • quickInput.background#151515
  • quickInput.foreground#777777
  • quickInputList.focusBackground#FFFFFF0F
  • quickInputList.focusForeground#BBBBBB
  • quickInputTitle.background#1515157f
  • scrollbarSlider.activeBackground#272727
  • scrollbarSlider.background#272727
  • scrollbarSlider.hoverBackground#303030
  • sideBar.background#101010
  • sideBar.border#272727
  • sideBar.dropBackground#101010
  • sideBar.foreground#777777
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#272727
  • sideBarSectionHeader.foreground#777777
  • sideBarTitle.foreground#777777
  • sideBySideEditor.horizontalBorder#272727
  • sideBySideEditor.verticalBorder#272727
  • statusBar.background#151515
  • statusBar.border#272727
  • statusBar.debuggingBackground#332B25
  • statusBar.debuggingBorder#8B6B51
  • statusBar.debuggingForeground#FFBE8A
  • statusBar.foreground#777777
  • statusBar.noFolderBackground#282125
  • statusBar.noFolderBorder#5D4150
  • statusBar.noFolderForeground#A26B88
  • statusBarItem.remoteBackground#363C25
  • statusBarItem.remoteForeground#94AD4F
  • statusBarItem.remoteHoverBackground#566233
  • statusBarItem.remoteHoverForeground#94AD4F
  • symbolIcon.arrayForeground#EAD7A9
  • symbolIcon.booleanForeground#43888B
  • symbolIcon.classForeground#598B6F
  • symbolIcon.colorForeground#D9C188
  • symbolIcon.constantForeground#D9C188
  • symbolIcon.constructorForeground#598B6F
  • symbolIcon.enumeratorForeground#A65548
  • symbolIcon.enumeratorMemberForeground#A65548
  • symbolIcon.eventForeground#D78B4D
  • symbolIcon.fieldForeground#D78B4D
  • symbolIcon.fileForeground#F7EBCF
  • symbolIcon.folderForeground#D9C188
  • symbolIcon.functionForeground#D9C188
  • symbolIcon.interfaceForeground#598B6F
  • symbolIcon.keyForeground#598B6F
  • symbolIcon.keywordForeground#D78B4D
  • symbolIcon.methodForeground#D9C188
  • symbolIcon.moduleForeground#94AD4F
  • symbolIcon.namespaceForeground#598B6F
  • symbolIcon.nullForeground#A26B88
  • symbolIcon.numberForeground#A65548
  • symbolIcon.objectForeground#D9C188
  • symbolIcon.operatorForeground#D78B4D
  • symbolIcon.packageForeground#D78B4D
  • symbolIcon.propertyForeground#EAD7A9
  • symbolIcon.referenceForeground#94AD4F
  • symbolIcon.snippetForeground#EAD7A9
  • symbolIcon.stringForeground#94AD4F
  • symbolIcon.structForeground#A65548
  • symbolIcon.textForeground#EAD7A9
  • symbolIcon.typeParameterForeground#598B6F
  • symbolIcon.unitForeground#A65548
  • symbolIcon.variableForeground#598B6F
  • tab.activeBackground#171717
  • tab.activeBorder#171717
  • tab.activeBorderTop#33333300
  • tab.activeForeground#bbbbbb
  • tab.activeModifiedBorder#272727
  • tab.border#272727
  • tab.hoverForeground#777777
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#777777
  • tab.inactiveModifiedBorder#272727
  • tab.lastPinnedBorder#272727
  • terminal.ansiBlack#171717
  • terminal.ansiBlue#43888B
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#46B4B9
  • terminal.ansiBrightCyan#68B188
  • terminal.ansiBrightGreen#AEC964
  • terminal.ansiBrightMagenta#C082A2
  • terminal.ansiBrightRed#C76A5C
  • terminal.ansiBrightWhite#F7EBCF
  • terminal.ansiBrightYellow#EBD7A8
  • terminal.ansiCyan#598B6F
  • terminal.ansiGreen#94AD4F
  • terminal.ansiMagenta#A26B88
  • terminal.ansiRed#A65548
  • terminal.ansiWhite#EAD7A9
  • terminal.ansiYellow#D9C188
  • terminal.background#101010
  • terminal.border#232323
  • terminal.dropBackground#0099ff00
  • terminal.foreground#FFFFD4
  • terminal.selectionBackground#ffffff33
  • terminalCommandDecoration.defaultBackground#FFFFD4
  • terminalCommandDecoration.errorBackground#BF5843
  • terminalCommandDecoration.successBackground#99BA56
  • terminalCursor.background#869183
  • terminalCursor.foreground#FF8B45
  • textLink.activeForeground#5299b9
  • textLink.foreground#4e8097
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#777777
  • titleBar.border#272727
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#555555
  • toolbar.activeBackground#202020
  • toolbar.hoverBackground#191919
  • welcomePage.background#101010
  • widget.border#272727
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#777777
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#A65548
constant.regexp#646695
entity.name.tag#505050
entity.name.tag.css#D7BA7D
entity.other.attribute-name#EBD7A8
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#D9C188
invalid#A65548
markup.underlineunderline
markup.bold#777777bold
markup.heading#777777bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#AEC964
markup.deleted#D78B4D
markup.changed#777777
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#D78B4D
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#777777
meta.preprocessor.string#D78B4D
meta.preprocessor.numeric#AEC964
meta.structure.dictionary.key.python#43888B
meta.diff.header#777777
storage#777
storage.type#777
storage.modifier, keyword.operator.noexcept#777
string, meta.embedded.assembly#AEC964
string.tag#AEC964
string.value#AEC964
string.regexp#AEC964
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#777777
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#EAD7A9
keyword#777777
keyword.control#777777
keyword.operator#505050
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#A26B88
keyword.other.unit#AEC964
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#777777
support.function.git-rebase#43888B
constant.sha.git-rebase#AEC964
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D78B4D
variable.language#777777
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#D9C188
support.class, support.type, entity.name.type, entity.name.namespace, 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#598B6F
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#598B6F
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#A26B88
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#FFFFD4
variable.other.constant, variable.other.enummember#43888B
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#D78B4D
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#D78B4D
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#A65548
keyword.operator.or.regexp, keyword.control.anchor.regexp#94AD4F
keyword.operator.quantifier.regexp#D7BA7D
constant.character, constant.other.option#777777
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#D9C356
token.error-token#D96D56
token.debug-token#B267E6
comment#FFFFFF1Fitalic
punctuation.definition.string.begin, punctuation.definition.string.end#AEC9644Fitalic
constant.character#AEC9644Fitalic
entity.name.tag#AEC964
entity.other.attribute-name#FFFFD4
string.template#AEC964
punctuation.definition.string.template.begin, punctuation.definition.string.template.end#AEC9644F
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#D78B4D
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#D78B4D
keyword.control.conditional#D78B4D
keyword.operator.definiteassignment#D78B4D
keyword.control.export#D78B4D
string.quoted.double.html#D78B4D
keyword.control.block.transition.ng#D78B4D5F
keyword.control.block.kind.ng#D78B4D
meta.class#505050
constant.language.boolean#43888B
variable.language.this#757575
function-call#43888B
keyword.control.import#D78B4D
keyword.control.from#656565
meta.block#505050
meta.decorator, meta.type.annotation, meta.var.expr, punctuation.terminator.statement#505050
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#505050
storage.type.function.arrow#505050
meta.object-literal.key#EAD7A9
support.type.property-name.json#EAD7A9
meta.structure.dictionary.json.comments#505050
keyword.operator.ternary, punctuation.accessor.optional#D78B4D
meta.function-call#505050
punctuation.definition.keyword#A26B884f
support.type.property-name.css#EAD7A9
keyword.other.unit#A655489f
entity.other.attribute-name.pseudo-class.css#757575
entity.name.tag.css#60BFB7
entity.other.attribute-name.id.css#A65548
entity.other.attribute-name.class.css#D9C188
punctuation.definition.entity.css#505050
meta.property-list, punctuation.separator.key-value#505050
support.type.primitive#EAD7A9
constant.language.null, constant.language.undefined#A26B88
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#505050
zyrotec-theme by zyrotec - VS Code Theme