Skip to main content
Coding Theme

Color themes

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#0A0A10
  • activityBar.border#242438
  • activityBar.foreground#E6E6F0
  • activityBar.inactiveForeground#7A7A99
  • activityBarBadge.background#8A6CFF
  • activityBarBadge.foreground#0F0F14
  • breadcrumb.activeSelectionForeground#8A6CFF
  • breadcrumb.background#0F0F14
  • breadcrumb.focusForeground#E6E6F0
  • breadcrumb.foreground#7A7A99
  • button.background#242438
  • button.foreground#E6E6F0
  • button.hoverBackground#3A3A52
  • button.secondaryBackground#242438
  • button.secondaryForeground#E6E6F0
  • button.secondaryHoverBackground#3A3A52
  • checkbox.background#242438
  • checkbox.border#242438
  • checkbox.foreground#E6E6F0
  • contrastActiveBorder#8A6CFF
  • contrastBorder#8A6CFF
  • debugExceptionWidget.background#1A1A24
  • debugExceptionWidget.border#242438
  • debugToolBar.background#1A1A24
  • debugToolBar.border#242438
  • descriptionForeground#7A7A99
  • diffEditor.insertedTextBackground#2A4D3A
  • diffEditor.insertedTextBorder#50FA7B
  • diffEditor.removedTextBackground#4D2A2A
  • diffEditor.removedTextBorder#FF5555
  • dropdown.background#1A1A24
  • dropdown.border#242438
  • dropdown.foreground#E6E6F0
  • editor.background#0F0F14
  • editor.findMatchBackground#4D3D8F
  • editor.findMatchHighlightBackground#2A2A3A
  • editor.foreground#E6E6F0
  • editor.inactiveSelectionBackground#1A1A24
  • editor.lineHighlightBackground#1A1A24
  • editor.selectionBackground#4D3D8F
  • editor.selectionHighlightBackground#4D3D8F
  • editorBracketMatch.background#4D3D8F
  • editorBracketMatch.border#8A6CFF
  • editorCursor.foreground#8A6CFF
  • editorGhostText.foreground#7A7A99
  • editorGroup.background#0F0F14
  • editorGroup.border#242438
  • editorGroupHeader.tabsBackground#0F0F14
  • editorGroupHeader.tabsBorder#242438
  • editorHoverWidget.background#1A1A24
  • editorHoverWidget.border#242438
  • editorIndentGuide.activeBackground#3A3A52
  • editorIndentGuide.background#242438
  • editorLineNumber.activeForeground#E6E6F0
  • editorLineNumber.foreground#7A7A99
  • editorOverviewRuler.border#242438
  • editorOverviewRuler.bracketMatchForeground#8A6CFF
  • editorOverviewRuler.errorForeground#FF5555
  • editorOverviewRuler.findMatchForeground#FF5555
  • editorOverviewRuler.infoForeground#8BE9FD
  • editorOverviewRuler.rangeHighlightForeground#4D3D8F
  • editorOverviewRuler.selectionHighlightForeground#4D3D8F
  • editorOverviewRuler.warningForeground#FFB86C
  • editorSuggestWidget.background#1A1A24
  • editorSuggestWidget.border#242438
  • editorSuggestWidget.highlightForeground#8A6CFF
  • editorSuggestWidget.selectedBackground#4D3D8F
  • editorUnicodeHighlight.background#4D3D8F
  • editorUnicodeHighlight.border#242438
  • editorWhitespace.foreground#3A3A52
  • errorBackground#4D2A2A
  • errorForeground#FF5555
  • explorerFolderIcon.color#8A6CFF
  • extensionButton.prominentBackground#8A6CFF
  • extensionButton.prominentForeground#0F0F14
  • extensionButton.prominentHoverBackground#A98EFF
  • focusBorder#8A6CFF
  • gitDecoration.addedResourceForeground#50FA7B
  • gitDecoration.conflictedResourceForeground#FF5555
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#7A7A99
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#FFB86C
  • infoBackground#2A3D4D
  • infoForeground#8BE9FD
  • input.background#0F0F14
  • input.border#242438
  • input.foreground#E6E6F0
  • input.placeholderForeground#7A7A99
  • inputValidation.errorBackground#4D2A2A
  • inputValidation.errorBorder#FF5555
  • inputValidation.errorForeground#FF5555
  • inputValidation.infoBackground#2A3D4D
  • inputValidation.infoBorder#8BE9FD
  • inputValidation.infoForeground#8BE9FD
  • inputValidation.warningBackground#4D3D2A
  • inputValidation.warningBorder#FFB86C
  • inputValidation.warningForeground#FFB86C
  • list.activeSelectionBackground#4D3D8F
  • list.activeSelectionForeground#E6E6F0
  • list.deemphasizedForeground#7A7A99
  • list.errorForeground#FF5555
  • list.focusBackground#4D3D8F
  • list.focusForeground#E6E6F0
  • list.highlightForeground#8A6CFF
  • list.hoverBackground#1A1A24
  • list.inactiveFocusBackground#1A1A24
  • list.inactiveFocusForeground#E6E6F0
  • list.inactiveSelectionBackground#1A1A24
  • list.inactiveSelectionForeground#E6E6F0
  • list.warningForeground#FFB86C
  • menu.background#1A1A24
  • menu.border#242438
  • menu.foreground#E6E6F0
  • menu.selectionBackground#4D3D8F
  • menu.selectionForeground#E6E6F0
  • menu.separatorBackground#242438
  • notificationCenter.background#1A1A24
  • notificationCenter.border#242438
  • notifications.background#1A1A24
  • notifications.border#242438
  • notifications.foreground#E6E6F0
  • notificationsErrorIcon.foreground#FF5555
  • notificationsInfoIcon.foreground#8BE9FD
  • notificationsWarningIcon.foreground#FFB86C
  • notificationToast.border#242438
  • panel.background#0A0A12
  • panel.border#2A2A40
  • panel.dropBackground#4D3D8F40
  • panelSection.border#2A2A40
  • panelSection.dropBackground#4D3D8F40
  • panelSectionHeader.background#12121A
  • panelSectionHeader.border#2A2A40
  • panelSectionHeader.foreground#E6E6F0
  • panelTitle.activeBorder#8A6CFF
  • panelTitle.activeForeground#E6E6F0
  • panelTitle.inactiveForeground#7A7A99
  • pickerGroup.border#242438
  • pickerGroup.foreground#7A7A99
  • progressBar.background#8A6CFF
  • scrollbarSlider.activeBackground#8A6CFF
  • scrollbarSlider.background#242438
  • scrollbarSlider.hoverBackground#3A3A52
  • sideBar.background#0F0F14
  • sideBar.border#242438
  • sideBar.foreground#E6E6F0
  • sideBarSectionHeader.background#0F0F14
  • sideBarSectionHeader.foreground#7A7A99
  • sideBarTitle.foreground#E6E6F0
  • statusBar.background#0F0F14
  • statusBar.border#242438
  • statusBar.debuggingBackground#0F0F14
  • statusBar.debuggingForeground#FFB86C
  • statusBar.foreground#E6E6F0
  • statusBar.noFolderBackground#0F0F14
  • symbolIcon.arrayForeground#8BE9FD
  • symbolIcon.booleanForeground#FF5555
  • symbolIcon.classForeground#FFB86C
  • symbolIcon.colorForeground#BD93F9
  • symbolIcon.constantForeground#FFCB8B
  • symbolIcon.constructorForeground#BD93F9
  • symbolIcon.enumeratorForeground#FFB86C
  • symbolIcon.enumeratorMemberForeground#8BE9FD
  • symbolIcon.eventForeground#FFB86C
  • symbolIcon.fieldForeground#8BE9FD
  • symbolIcon.fileForeground#E6E6F0
  • symbolIcon.folderForeground#8A6CFF
  • symbolIcon.functionForeground#BD93F9
  • symbolIcon.interfaceForeground#FFB86C
  • symbolIcon.keyForeground#8BE9FD
  • symbolIcon.keywordForeground#8A6CFF
  • symbolIcon.methodForeground#BD93F9
  • symbolIcon.moduleForeground#8A6CFF
  • symbolIcon.namespaceForeground#FFB86C
  • symbolIcon.nullForeground#7A7A99
  • symbolIcon.numberForeground#FF5555
  • symbolIcon.objectForeground#8BE9FD
  • symbolIcon.operatorForeground#8A6CFF
  • symbolIcon.packageForeground#8A6CFF
  • symbolIcon.propertyForeground#8BE9FD
  • symbolIcon.referenceForeground#8BE9FD
  • symbolIcon.snippetForeground#BD93F9
  • symbolIcon.stringForeground#50FA7B
  • symbolIcon.structForeground#FFB86C
  • symbolIcon.textForeground#E6E6F0
  • symbolIcon.typeParameterForeground#8BE9FD
  • symbolIcon.unitForeground#FFB86C
  • symbolIcon.variableForeground#8BE9FD
  • tab.activeBackground#0F0F14
  • tab.activeBorder#8A6CFF
  • tab.activeForeground#E6E6F0
  • tab.inactiveBackground#0F0F14
  • tab.inactiveBorder#242438
  • tab.inactiveForeground#7A7A99
  • terminal.ansiBlack#12121A
  • terminal.ansiBlue#9D7CFF
  • terminal.ansiBrightBlack#4A4A6A
  • terminal.ansiBrightBlue#B89CFF
  • terminal.ansiBrightCyan#93E2FF
  • terminal.ansiBrightGreen#8AFFB8
  • terminal.ansiBrightMagenta#D9A8FF
  • terminal.ansiBrightRed#FF8E8E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#78D9FF
  • terminal.ansiGreen#6CFF9C
  • terminal.ansiMagenta#C77DFF
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#F0F0FF
  • terminal.ansiYellow#FFD166
  • terminal.background#0A0A12
  • terminal.border#2A2A40
  • terminal.foreground#E6E6F0
  • terminal.selectionBackground#4D3D8F80
  • terminalCursor.background#8A6CFF
  • terminalCursor.foreground#0A0A12
  • textBlockQuote.background#1A1A24
  • textBlockQuote.border#242438
  • textCodeBlock.background#1A1A24
  • textLink.activeForeground#A98EFF
  • textLink.foreground#8A6CFF
  • textPreformat.foreground#BD93F9
  • titleBar.activeBackground#0F0F14
  • titleBar.activeForeground#E6E6F0
  • titleBar.border#242438
  • titleBar.inactiveBackground#0F0F14
  • titleBar.inactiveForeground#7A7A99
  • walkthrough.stepActive.foreground#8A6CFF
  • walkthrough.stepDescription.foreground#7A7A99
  • walkthrough.stepTitle.foreground#E6E6F0
  • warningBackground#4D3D2A
  • warningForeground#FFB86C
  • welcomePage.background#0F0F14
  • welcomePage.buttonBackground#242438
  • welcomePage.buttonHoverBackground#3A3A52
  • widget.shadow#0A0A10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A99italic
keyword, storage.type, storage.modifier#8A6CFF
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#8A6CFFbold
entity.name.function, support.function, meta.function-call#BD93F9
meta.method, meta.method-call, entity.name.method#BD93F9
entity.name.class, entity.name.type.class, support.class#FFB86C
entity.name.type, support.type, storage.type#FFB86C
entity.name.interface, entity.name.type.interface#FFB86C
variable, variable.other, variable.other.readwrite#8BE9FD
variable.other.constant, constant, constant.language, constant.numeric#FFCB8B
string, string.quoted, string.template#50FA7B
constant.numeric, constant.numeric.integer, constant.numeric.float#FF5555
constant.language.boolean, constant.language.true, constant.language.false#FF5555bold
constant.language.null, constant.language.undefined, constant.language.nan#FF5555italic
variable.other.property, meta.property-name, support.variable.property#8BE9FD
keyword.operator, punctuation.separator.key-value, punctuation.accessor#8A6CFF
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#E6E6F0
entity.name.tag, meta.tag, punctuation.definition.tag#8A6CFF
entity.other.attribute-name, meta.attribute-name#8BE9FD
string.quoted.double, string.quoted.single#50FA7B
meta.decorator, entity.name.decorator#BD93F9
variable.parameter, variable.parameter.function#8BE9FD
entity.name.label#FFB86C
entity.name.namespace, support.namespace#FFB86C
entity.name.enum, entity.name.type.enum#FFB86C
variable.other.enummember, constant.other.enum#8BE9FD
entity.name.function.constructor, support.function.constructor#BD93F9
entity.name.module, support.module#8A6CFF
string.regexp#BD93F9
constant.character.escape#FFCB8B
invalid, invalid.illegal#FF5555underline
invalid.deprecated#7A7A99strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown#8A6CFFbold
markup.bold, punctuation.definition.bold#E6E6F0bold
markup.italic, punctuation.definition.italic#E6E6F0italic
markup.underline.link, string.other.link#8A6CFFunderline
markup.raw, markup.raw.block#50FA7B
markup.list, punctuation.definition.list#FFB86C
markup.quote#7A7A99italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag#8A6CFF
support.type.property-name, support.property-name#8BE9FD
support.constant.property-value, constant.other.color#50FA7B
support.type.property-name.json, meta.key.json#8BE9FD
meta.value.json string.quoted.double.json#50FA7B
entity.name.tag.yaml#8BE9FD
string.unquoted.yaml#50FA7B
support.function.python, entity.name.function.python#BD93F9
meta.decorator.python, entity.name.decorator.python#BD93F9
variable.language.self.python, variable.language.cls.python#FFB86C
storage.type.js, storage.type.ts, keyword.control.flow.js, keyword.control.flow.ts#8A6CFF
storage.type.function.arrow.js, storage.type.function.arrow.ts#8A6CFF
string.template.js, string.template.ts#50FA7B
entity.name.tag.js, entity.name.tag.tsx, support.class.component.js, support.class.component.tsx#8A6CFF
storage.type.annotation.java, meta.annotation.java#BD93F9
entity.name.function.go, support.function.go#BD93F9
entity.name.function.macro.rust, meta.macro.rust#BD93F9
storage.modifier.lifetime.rust, entity.name.lifetime.rust#FFB86C
entity.name.function.shell, support.function.builtin.shell#C77DFFbold
variable.other.shell, variable.other.readwrite.shell#78D9FF
string.quoted.shell, string.unquoted.shell#6CFF9C
variable.parameter.shell#FFD166
markup.inserted.shell, string.success.shell#6CFF9Cbold
markup.changed.shell, string.warning.shell#FFD166bold
markup.deleted.shell, string.error.shell#FF6B6Bbold