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.

  • actionBar.toggledBackground#2A2237
  • activityBar.activeBorder#59949E
  • activityBar.background#0A0A09
  • activityBar.border#1C1C1A
  • activityBar.foreground#D6D6C5
  • activityBar.inactiveForeground#8C8C81
  • activityBarBadge.background#59949E
  • activityBarBadge.foreground#0E0E0D
  • badge.background#474741
  • badge.foreground#FBFBE7
  • button.background#59949E
  • button.border#FBFBE71a
  • button.foreground#0E0E0D
  • button.hoverBackground#317B87
  • button.secondaryBackground#00000000
  • button.secondaryForeground#D6D6C5
  • button.secondaryHoverBackground#1C1C1A
  • chat.editedFileForeground#EDB32D
  • chat.slashCommandBackground#00424D66
  • chat.slashCommandForeground#A1C3C8
  • checkbox.background#1C1C1A
  • checkbox.border#262623
  • debugToolBar.background#0A0A09
  • descriptionForeground#A6A699
  • dropdown.background#1C1C1A
  • dropdown.border#262623
  • dropdown.foreground#D6D6C5
  • dropdown.listBackground#0E0E0D
  • editor.background#0E0E0D
  • editor.findMatchBackground#785B17
  • editor.foreground#fbfbe7
  • editor.inactiveSelectionBackground#317B8780
  • editor.selectionBackground#317B8780
  • editor.selectionHighlightBackground#002A31a2
  • editorBracketHighlight.foreground1#FBFBE7
  • editorBracketHighlight.foreground2#FEC8C2
  • editorBracketHighlight.foreground3#C1DCB7
  • editorBracketHighlight.foreground4#C3D9DC
  • editorGroup.border#FBFBE717
  • editorGroupHeader.tabsBackground#0A0A09
  • editorGroupHeader.tabsBorder#1C1C1A
  • editorGutter.addedBackground#83B172
  • editorGutter.deletedBackground#CE3C2B
  • editorGutter.modifiedBackground#59949E
  • editorIndentGuide.activeBackground1#474741
  • editorIndentGuide.background1#1C1C1A
  • editorInlayHint.background#0E0E0D
  • editorInlayHint.foreground#D6D6C580
  • editorLineNumber.activeForeground#D6D6C5
  • editorLineNumber.foreground#474741
  • editorOverviewRuler.border#01010180
  • editorWidget.background#161614
  • errorForeground#CE3C2B
  • focusBorder#59949E
  • foreground#D6D6C5
  • icon.foreground#D6D6C5
  • input.background#1C1C1A
  • input.border#262623
  • input.foreground#D6D6C5
  • input.placeholderForeground#A6A699
  • inputOption.activeBackground#59949E82
  • inputOption.activeBorder#59949E
  • keybindingLabel.foreground#D6D6C5
  • list.activeSelectionIconForeground#FBFBE7
  • list.dropBackground#262623
  • menu.background#161614
  • menu.border#262623
  • menu.foreground#D6D6C5
  • menu.selectionBackground#59949E
  • menu.separatorBackground#262623
  • notificationCenterHeader.background#0E0E0D
  • notificationCenterHeader.foreground#D6D6C5
  • notifications.background#0E0E0D
  • notifications.border#1C1C1A
  • notifications.foreground#D6D6C5
  • panel.background#0A0A09
  • panel.border#1C1C1A
  • panelInput.border#1C1C1A
  • panelTitle.activeBorder#59949E
  • panelTitle.activeForeground#D6D6C5
  • panelTitle.inactiveForeground#A6A699
  • peekViewEditor.background#0E0E0D
  • peekViewEditor.matchHighlightBackground#AF842166
  • peekViewResult.background#0E0E0D
  • peekViewResult.matchHighlightBackground#AF842166
  • pickerGroup.border#262623
  • ports.iconRunningProcessForeground#83B172
  • progressBar.background#59949E
  • quickInput.background#161614
  • quickInput.foreground#D6D6C5
  • settings.dropdownBackground#1C1C1A
  • settings.dropdownBorder#262623
  • settings.headerForeground#FBFBE7
  • settings.modifiedItemIndicator#AF842166
  • sideBar.background#0A0A09
  • sideBar.border#1C1C1A
  • sideBar.foreground#D6D6C5
  • sideBarSectionHeader.background#0A0A09
  • sideBarSectionHeader.border#1C1C1A
  • sideBarSectionHeader.foreground#D6D6C5
  • sideBarTitle.foreground#D6D6C5
  • statusBar.background#0A0A09
  • statusBar.border#1C1C1A
  • statusBar.debuggingBackground#59949E
  • statusBar.debuggingForeground#0E0E0D
  • statusBar.focusBorder#59949E
  • statusBar.foreground#D6D6C5
  • statusBar.noFolderBackground#0E0E0D
  • statusBarItem.focusBorder#59949E
  • statusBarItem.hoverBackground#FBFBE733
  • statusBarItem.hoverForeground#FBFBE7
  • statusBarItem.prominentBackground#47474199
  • statusBarItem.remoteBackground#83B172
  • statusBarItem.remoteForeground#0E0E0D
  • tab.activeBackground#0E0E0D
  • tab.activeBorder#0E0E0D
  • tab.activeBorderTop#59949E
  • tab.activeForeground#FBFBE7
  • tab.border#1C1C1A
  • tab.hoverBackground#0E0E0D
  • tab.inactiveBackground#0A0A09
  • tab.inactiveForeground#A6A699
  • tab.lastPinnedBorder#D6D6C533
  • tab.selectedBackground#161614
  • tab.selectedBorderTop#83B172
  • tab.selectedForeground#FBFBE7a0
  • tab.unfocusedActiveBorder#0E0E0D
  • tab.unfocusedActiveBorderTop#1C1C1A
  • tab.unfocusedHoverBackground#0E0E0D
  • terminal.foreground#D6D6C5
  • terminal.inactiveSelectionBackground#262623
  • terminal.tab.activeBorder#59949E
  • textBlockQuote.background#1C1C1A
  • textBlockQuote.border#474741
  • textCodeBlock.background#1C1C1A
  • textLink.activeForeground#A1C3C8
  • textLink.foreground#A1C3C8
  • textPreformat.background#262623
  • textPreformat.foreground#D6D6C5
  • textSeparator.foreground#1C1C1A
  • titleBar.activeBackground#0A0A09
  • titleBar.activeForeground#D6D6C5
  • titleBar.border#1C1C1A
  • titleBar.inactiveBackground#0E0E0D
  • titleBar.inactiveForeground#A6A699
  • welcomePage.progress.foreground#59949E
  • welcomePage.tileBackground#1C1C1A
  • widget.border#1C1C1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#fbfbe7—
emphasis—italic
strong—bold
comment#83B172—
string, meta.embedded.assembly, string.tag, string.value#C0C340—
entity.name.user-defined-literal.string, string.unquoted.plain.out#8E901D—
markup.inline.raw#C0C340—
meta.preprocessor.string#C0C340—
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#CE3C2B—
constant.language, keyword.other.unit, support.constant.json, entity.name.user-defined-literal.number, entity.name.user-defined-literal, storage.type.number#CE3C2B—
meta.preprocessor.numeric#CE3C2B—
constant.sha.git-rebase#CE3C2B—
constant.other.placeholder, constant.character, constant.character.escape#AF8421bold
invalid#CE3C2B—
keyword, keyword.control, keyword.operator, keyword.operator.cast, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.instanceof.java, keyword.operator.member, keyword.operator.new, keyword.operator.new.cpp, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.wordlike, keyword.operator.noexcept, keyword.operator.logical.python, keyword.other.directive.using, keyword.other.using, keyword.other.operator, entity.name.operator, entity.other.attribute.noreturn, storage, storage.type, storage.modifier, storage.type.cs, variable.language.this.cs#EDB32D—
entity.name.type, entity.name.class, entity.name.class.template, entity.name.class.reference, entity.name.class.value, entity.other.inherited-class, entity.other.attribute, meta.type.cast.expr, meta.type.new.expr, punctuation.separator.namespace.ruby, support.class, support.type, support.type.property-name, support.type.vendored.property-name, support.constant.math, support.constant.dom, 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.java, storage.type.primitive.array.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, 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, entity.other.attribute-name.class.css, entity.name.tag.css, entity.name.tag.less#A1C3C8—
entity.name.function, entity.name.function.template, entity.name.function.member, entity.name.function.member.static, entity.name.function.operator, entity.name.class.generic, entity.name.label, entity.name.namespace, entity.name.scope-resolution, entity.name.type.namespace, entity.name.operator.custom-literal, meta.object-literal.key, meta.structure.dictionary.key.python, meta.template.expression, source.powershell variable.other.member, support.function, support.constant.handlebars, support.function.git-rebase, variable, variable.language, variable.other.constant, variable.other.enummember, variable.other.event, variable.other.global, variable.other.local, variable.other.member, variable.other.member.static, variable.other.property, variable.parameter, variable.other.member.powershell, variable.css, meta.definition.variable.name, support.variable, entity.name.variable, storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java, source.css variable, source.coffee.embedded#fbfbe7—
entity.name.function.preprocessor, meta.preprocessor#AAA1B9—
entity.name.tag, entity.other.attribute-name, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#EDB32D—
entity.name.tag.yaml#fbfbe7—
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#C0C340—
keyword.operator.negation.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, string.regexp, support.other.parenthesis.regexp, constant.regexp#aaa1b9—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#CE3C2B—
punctuation.definition.tag#717169—
markup.underline—underline
markup.bold#D6D6C5bold
markup.heading, header#A1C3C8bold
markup.italic#D6D6C5italic
markup.strikethrough—strikethrough
markup.inserted#83B172—
markup.deleted#CE3C2B—
markup.changed#A1C3C8—
punctuation.definition.quote.begin.markdown#83B172—
punctuation.definition.list.begin.markdown#A1C3C8—
meta.diff.header#A1C3C8—
Jason1 by Jason Watkins - VS Code Theme