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#0F0F19
  • activityBar.border#303058
  • activityBar.foreground#EDEDFE
  • activityBar.inactiveForeground#8C8CB8
  • activityBarBadge.background#00F59B
  • activityBarBadge.foreground#0A0A12
  • breadcrumb.activeSelectionForeground#EDEDFE
  • breadcrumb.foreground#8C8CB8
  • button.background#00F59B
  • button.border#303058
  • button.foreground#0A0A12
  • checkbox.border#303058
  • contrastActiveBorder#303058
  • contrastBorder#303058
  • descriptionForeground#BDBDE6
  • diffEditor.insertedLineBackground#00F59B1A
  • diffEditor.insertedTextBackground#00F59B33
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedLineBackground#FF33661A
  • diffEditor.removedTextBackground#FF336633
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#181824
  • dropdown.border#303058
  • editor.background#0F0F19
  • editor.findMatchBackground#FFEA0033
  • editor.findMatchHighlightBackground#FFEA0033
  • editor.foreground#EDEDFE
  • editor.inactiveSelectionBackground#2B2B4433
  • editor.lineHighlightBackground#181824
  • editor.selectionBackground#2B2B44
  • editor.selectionForeground#EDEDFE
  • editor.wordHighlightBackground#FFEA0017
  • editor.wordHighlightStrongBackground#FFEA0017
  • editorBracketMatch.background#3CFFED17
  • editorBracketMatch.border#3CFFED
  • editorCursor.foreground#00F59B
  • editorGroup.border#303058
  • editorGroupHeader.tabsBackground#0F0F19
  • editorGroupHeader.tabsBorder#303058
  • editorGutter.background#0F0F19
  • editorIndentGuide.activeBackground1#202034
  • editorIndentGuide.background1#181824
  • editorLineNumber.activeForeground#00F59B
  • editorLineNumber.foreground#8C8CB8
  • editorOverviewRuler.border#303058
  • editorRuler.foreground#5A5A88
  • editorSuggestWidget.background#181824
  • editorSuggestWidget.border#303058
  • editorSuggestWidget.foreground#EDEDFE
  • editorSuggestWidget.selectedBackground#202034
  • editorWhitespace.foreground#8C8CB833
  • editorWidget.background#181824
  • editorWidget.border#303058
  • extensionButton.background#00F59B
  • extensionButton.foreground#0A0A12
  • extensionButton.hoverBackground#3CFFED
  • extensionButton.prominentBackground#00F59B
  • extensionButton.prominentForeground#0A0A12
  • extensionButton.prominentHoverBackground#3CFFED
  • focusBorder#5A5A88
  • foreground#EDEDFE
  • gitDecoration.addedResourceForeground#00F59B
  • gitDecoration.conflictingResourceForeground#FFEA00
  • gitDecoration.deletedResourceForeground#FF3366
  • gitDecoration.ignoredResourceForeground#7575A3
  • gitDecoration.modifiedResourceForeground#33A1FF
  • gitDecoration.renamedResourceForeground#FF66F6
  • gitDecoration.untrackedResourceForeground#FFEA00
  • input.background#181824
  • input.border#303058
  • input.foreground#EDEDFE
  • inputOption.activeBorder#303058
  • inputValidation.errorBorder#FF3366
  • inputValidation.infoBorder#33A1FF
  • inputValidation.warningBorder#FFEA00
  • keybindingLabel.background#181824
  • keybindingLabel.border#303058
  • keybindingLabel.bottomBorder#303058
  • keybindingLabel.foreground#EDEDFE
  • list.activeSelectionBackground#202034
  • list.activeSelectionForeground#EDEDFE
  • list.focusBackground#202034
  • list.highlightForeground#3CFFED
  • list.hoverForeground#EDEDFE
  • list.inactiveSelectionBackground#202034
  • list.inactiveSelectionForeground#EDEDFE
  • listFilterWidget.background#181824
  • listFilterWidget.noMatchesOutline#FF3366
  • listFilterWidget.outline#303058
  • menu.background#0F0F19
  • menu.border#303058
  • menu.foreground#EDEDFE
  • notebook.outputContainerBackgroundColor#0F0F19
  • notebook.outputContainerBorderColor#0F0F19
  • notificationCenterHeader.background#0F0F19
  • notifications.background#0F0F19
  • notifications.border#303058
  • panel.background#0F0F19
  • panel.border#303058
  • panelSection.border#303058
  • panelSectionHeader.border#303058
  • panelTitle.activeBorder#00F59B
  • panelTitle.activeForeground#EDEDFE
  • panelTitle.inactiveForeground#8C8CB8
  • pickerGroup.border#303058
  • progressBar.background#00F59B
  • quickInput.background#0F0F19
  • sash.hoverBorder#303058
  • scrollbarSlider.activeBackground#8C8CB8
  • scrollbarSlider.background#30305880
  • scrollbarSlider.hoverBackground#8C8CB880
  • sideBar.background#0F0F19
  • sideBar.border#303058
  • sideBar.foreground#EDEDFE
  • sideBarSectionHeader.background#0F0F19
  • sideBarTitle.foreground#EDEDFE
  • statusBar.background#0F0F19
  • statusBar.border#303058
  • statusBar.foreground#EDEDFE
  • tab.activeBackground#0F0F19
  • tab.activeBorder#303058
  • tab.activeBorderTop#303058
  • tab.activeForeground#EDEDFE
  • tab.border#303058
  • tab.hoverBackground#202034
  • tab.inactiveBackground#181824
  • tab.inactiveForeground#BDBDE6
  • tab.unfocusedActiveBorder#303058
  • tab.unfocusedHoverBackground#202034
  • terminal.ansiBlack#0A0A12
  • terminal.ansiBlue#33A1FF
  • terminal.ansiBrightBlack#8C8CB8
  • terminal.ansiBrightBlue#66BBFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#33FFBB
  • terminal.ansiBrightMagenta#FF99FF
  • terminal.ansiBrightRed#FF5588
  • terminal.ansiBrightWhite#F8F8FF
  • terminal.ansiBrightYellow#FFEE44
  • terminal.ansiCyan#3CFFED
  • terminal.ansiGreen#00F59B
  • terminal.ansiMagenta#FF66F6
  • terminal.ansiRed#FF3366
  • terminal.ansiWhite#BDBDE6
  • terminal.ansiYellow#FFEA00
  • terminal.background#0F0F19
  • terminal.foreground#EDEDFE
  • terminal.selectionBackground#2B2B44
  • textLink.activeForeground#3CFFED
  • textLink.foreground#3CFFED
  • titleBar.activeBackground#0F0F19
  • titleBar.activeForeground#EDEDFE
  • titleBar.border#303058
  • titleBar.inactiveBackground#0F0F19d9
  • titleBar.inactiveForeground#8C8CB8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
meta.import variable.other.readwrite, meta.import variable.other.readwrite.alias, meta.import variable.other, meta.import entity.name.namespace, meta.import support.class, entity.name.import#EFBF04—
strong—bold
comment, comment.block, comment.line, punctuation.definition.comment#7575A3italic
string, string.quoted, string.unquoted#FF66F6—
string.regexp, string.regex#FF66F6—
constant.character.escape, string.escape, string.special, string.special.symbol#FFEA00—
constant.numeric, number, float#FFEA00—
constant.language.boolean, constant.language.true, constant.language.false#FFEA00—
variable, variable.other.readwrite#EDEDFE—
variable.language, variable.language.this, variable.builtin#33A1FF—
variable.parameter#BDBDE6—
variable.other.member#EDEDFE—
constant, constant.other#FFEA00—
meta.preprocessor, entity.name.function.preprocessor#00F59B—
keyword, keyword.control, keyword.type, storage.type#00F59B—
keyword.operator, operator#00F59B—
variable.other.property, support.type.property-name, meta.object-literal.key#3CFFED—
entity.name.function, entity.name.function.constructor#3CFFED—
meta.function-call, meta.method-call, support.function, entity.name.function.call, entity.name.function.method, variable.function#3CFFED—
entity.name.type, entity.name.class, support.class, support.type#33A1FF—
support.type.builtin, storage.type.builtin#33A1FFitalic
entity.name.namespace, support.module, namespace#33A1FFitalic
meta.decorator, entity.name.function.decorator, punctuation.decorator#FF66F6—
entity.name.tag, tag#00F59B—
entity.other.attribute-name#3CFFEDitalic
punctuation.definition.tag#BDBDE6—
punctuation, punctuation.separator, punctuation.accessor, punctuation.bracket#8C8CB8—
punctuation.special, punctuation.special.symbol#33A1FF—
markup.inserted#00F59B—
markup.deleted#FF3366—
markup.changed#FFEA00—
markup.heading#3CFFEDbold
markup.underline.link, string.other.link#3CFFED—
Sunset Drive by Taha YVR - VS Code Theme