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.activeBorder#9D6CFF
  • activityBar.activeFocusBorder#FF9F43
  • activityBar.background#0A0E14
  • activityBar.border#1A1E2430
  • activityBar.foreground#F0F4FC
  • activityBar.inactiveForeground#4A4F5B
  • activityBarBadge.background#9D6CFF
  • activityBarBadge.foreground#0A0E14
  • breadcrumb.activeSelectionForeground#9D6CFF
  • breadcrumb.focusForeground#F0F4FC
  • breadcrumb.foreground#4A4F5B
  • breadcrumbPicker.background#1A1E24
  • button.background#9D6CFF
  • button.foreground#0A0E14
  • button.hoverBackground#B28CFF
  • button.secondaryBackground#2D3546
  • button.secondaryForeground#F0F4FC
  • button.secondaryHoverBackground#3A3F4E
  • debugExceptionWidget.background#1A1E24
  • debugExceptionWidget.border#FF6E6E
  • debugToolBar.background#1A1E24
  • debugToolBar.border#2D354640
  • diffEditor.border#2D354640
  • diffEditor.insertedTextBackground#76FF8F40
  • diffEditor.removedTextBackground#FF6E6E40
  • diffEditorGutter.insertedLineBackground#76FF8F60
  • diffEditorGutter.removedLineBackground#FF6E6E60
  • diffEditorOverview.insertedForeground#76FF8F80
  • diffEditorOverview.removedForeground#FF6E6E80
  • dropdown.background#1A1E24
  • dropdown.border#2D354680
  • dropdown.foreground#F0F4FC
  • editor.background#0A0E14
  • editor.findMatchBackground#FF9F4360
  • editor.findMatchHighlightBackground#FF9F4330
  • editor.foreground#F0F4FC
  • editor.hoverHighlightBackground#2D354630
  • editor.lineHighlightBackground#1A1E2480
  • editor.lineHighlightBorder#2D354620
  • editor.rangeHighlightBackground#2D354630
  • editor.selectionBackground#2D3546AA
  • editor.selectionHighlightBackground#3A3F4E60
  • editor.wordHighlightBackground#2D354640
  • editor.wordHighlightStrongBackground#3A3F4E40
  • editorBracketHighlight.foreground1#76FF8F
  • editorBracketHighlight.foreground2#FF9F43
  • editorBracketHighlight.foreground3#9D6CFF
  • editorBracketHighlight.foreground4#FF92DF
  • editorBracketHighlight.foreground5#6CF3FF
  • editorBracketHighlight.foreground6#FFE68A
  • editorBracketHighlight.unexpectedBracket.foreground#FF6E6E
  • editorBracketMatch.background#2D354620
  • editorBracketMatch.border#9D6CFF
  • editorCodeLens.foreground#4A4F5BAA
  • editorCursor.background#0A0E14
  • editorCursor.foreground#FF9F43
  • editorGroup.border#1A1E2460
  • editorGroupHeader.tabsBackground#0A0E14
  • editorGroupHeader.tabsBorder#1A1E2440
  • editorGutter.addedBackground#76FF8F80
  • editorGutter.deletedBackground#FF6E6E80
  • editorGutter.modifiedBackground#9D6CFF80
  • editorHoverWidget.background#1A1E24
  • editorHoverWidget.border#2D354680
  • editorLineNumber.activeForeground#9D6CFF
  • editorLineNumber.foreground#4A4F5B
  • editorMarkerNavigation.background#1A1E24
  • editorMarkerNavigationError.background#FF6E6E30
  • editorMarkerNavigationInfo.background#6CF3FF30
  • editorMarkerNavigationWarning.background#FFE68A30
  • editorOverviewRuler.commonContentForeground#4A4F5B
  • editorOverviewRuler.currentContentForeground#76FF8F
  • editorOverviewRuler.findMatchForeground#FF9F4380
  • editorOverviewRuler.incomingContentForeground#9D6CFF
  • editorSuggestWidget.background#1A1E24
  • editorSuggestWidget.border#2D354680
  • editorSuggestWidget.foreground#F0F4FC
  • editorSuggestWidget.highlightForeground#9D6CFF
  • editorSuggestWidget.selectedBackground#2D354680
  • editorWidget.background#1A1E24
  • editorWidget.border#2D354680
  • editorWidget.foreground#F0F4FC
  • extensionBadge.remoteBackground#9D6CFF
  • extensionBadge.remoteForeground#0A0E14
  • focusBorder#9D6CFF80
  • foreground#F0F4FC
  • gitDecoration.conflictingResourceForeground#FFE68A
  • gitDecoration.deletedResourceForeground#FF6E6E
  • gitDecoration.ignoredResourceForeground#4A4F5B80
  • gitDecoration.modifiedResourceForeground#9D6CFF
  • gitDecoration.submoduleResourceForeground#6CF3FF
  • gitDecoration.untrackedResourceForeground#76FF8F
  • input.background#1A1E24
  • input.border#2D354680
  • input.foreground#F0F4FC
  • input.placeholderForeground#4A4F5B
  • inputOption.activeBackground#2D354640
  • inputOption.activeBorder#9D6CFF
  • inputOption.activeForeground#F0F4FC
  • inputValidation.errorBackground#FF6E6E20
  • inputValidation.errorBorder#FF6E6E
  • inputValidation.infoBackground#6CF3FF20
  • inputValidation.infoBorder#6CF3FF
  • inputValidation.warningBackground#FFE68A20
  • inputValidation.warningBorder#FFE68A
  • list.activeSelectionBackground#2D3546
  • list.activeSelectionForeground#FF9F43
  • list.errorForeground#FF6E6E
  • list.focusBackground#2D354660
  • list.focusForeground#F0F4FC
  • list.highlightForeground#9D6CFF
  • list.hoverBackground#1A1E2430
  • list.inactiveSelectionBackground#1A1E24
  • list.inactiveSelectionForeground#F0F4FCEE
  • list.warningForeground#FFE68A
  • merge.commonContentBackground#4A4F5B20
  • merge.commonHeaderBackground#4A4F5B40
  • merge.currentContentBackground#76FF8F20
  • merge.currentHeaderBackground#76FF8F40
  • merge.incomingContentBackground#9D6CFF20
  • merge.incomingHeaderBackground#9D6CFF40
  • minimap.errorHighlight#FF6E6E
  • minimap.findMatchHighlight#FF9F4380
  • minimap.selectionHighlight#9D6CFF80
  • minimap.warningHighlight#FFE68A
  • minimapSlider.activeBackground#3A3F4E60
  • minimapSlider.background#1A1E2440
  • minimapSlider.hoverBackground#2D354660
  • notificationCenter.border#2D354680
  • notificationCenterHeader.background#1A1E24
  • notificationCenterHeader.foreground#F0F4FC
  • notifications.background#1A1E24
  • notifications.border#2D354680
  • notifications.foreground#F0F4FC
  • notificationToast.border#2D354680
  • panel.background#0A0E14
  • panel.border#1A1E2460
  • panelTitle.activeBorder#9D6CFF
  • panelTitle.activeForeground#F0F4FC
  • panelTitle.inactiveForeground#4A4F5B
  • peekView.border#9D6CFF80
  • peekViewEditor.background#0A0E14
  • peekViewEditor.matchHighlightBackground#FF9F4340
  • peekViewResult.background#1A1E24
  • peekViewResult.fileForeground#F0F4FC
  • peekViewResult.lineForeground#4A4F5B
  • peekViewResult.matchHighlightBackground#FF9F4340
  • peekViewResult.selectionBackground#2D354680
  • peekViewResult.selectionForeground#F0F4FC
  • peekViewTitle.background#1A1E24
  • peekViewTitleDescription.foreground#4A4F5B
  • peekViewTitleLabel.foreground#9D6CFF
  • problemsErrorIcon.foreground#FF6E6E
  • problemsInfoIcon.foreground#6CF3FF
  • problemsWarningIcon.foreground#FFE68A
  • progressBar.background#9D6CFF
  • scrollbar.shadow#0A0E1499
  • scrollbarSlider.activeBackground#9D6CFF40
  • scrollbarSlider.background#2D354640
  • scrollbarSlider.hoverBackground#3A3F4E60
  • settings.checkboxBackground#1A1E24
  • settings.checkboxBorder#2D354680
  • settings.checkboxForeground#F0F4FC
  • settings.dropdownBackground#1A1E24
  • settings.dropdownBorder#2D354680
  • settings.dropdownForeground#F0F4FC
  • settings.headerForeground#9D6CFF
  • settings.modifiedItemIndicator#9D6CFF
  • settings.numberInputBackground#1A1E24
  • settings.numberInputBorder#2D354680
  • settings.numberInputForeground#F0F4FC
  • settings.textInputBackground#1A1E24
  • settings.textInputBorder#2D354680
  • settings.textInputForeground#F0F4FC
  • sideBar.background#0A0E14
  • sideBar.border#1A1E2440
  • sideBar.foreground#F0F4FC
  • sideBarSectionHeader.background#1A1E24
  • sideBarSectionHeader.border#2D354620
  • sideBarSectionHeader.foreground#9D6CFF
  • sideBarTitle.foreground#FF9F43
  • statusBar.background#1A1E24
  • statusBar.border#2D354640
  • statusBar.debuggingBackground#FF9F43
  • statusBar.debuggingForeground#0A0E14
  • statusBar.foreground#F0F4FC
  • statusBar.noFolderBackground#2D3546
  • statusBarItem.hoverBackground#2D354660
  • statusBarItem.prominentBackground#FF6E6E
  • statusBarItem.prominentForeground#0A0E14
  • statusBarItem.prominentHoverBackground#FF919180
  • statusBarItem.remoteBackground#9D6CFF
  • statusBarItem.remoteForeground#0A0E14
  • symbolIcon.arrayForeground#FF9F43
  • symbolIcon.booleanForeground#FF6E6E
  • symbolIcon.classForeground#6CF3FF
  • symbolIcon.colorForeground#FF92DF
  • symbolIcon.constantForeground#9D6CFF
  • symbolIcon.enumeratorForeground#6CF3FF
  • symbolIcon.enumeratorMemberForeground#76FF8F
  • symbolIcon.eventForeground#FF6E6E
  • symbolIcon.fieldForeground#F0F4FC
  • symbolIcon.fileForeground#4A4F5B
  • symbolIcon.folderForeground#4A4F5B
  • symbolIcon.functionForeground#76FF8F
  • symbolIcon.interfaceForeground#6CF3FF
  • symbolIcon.keyForeground#FF9F43
  • symbolIcon.keywordForeground#FF6E6E
  • symbolIcon.methodForeground#76FF8F
  • symbolIcon.moduleForeground#FFE68A
  • symbolIcon.namespaceForeground#6CF3FF
  • symbolIcon.nullForeground#FF6E6E
  • symbolIcon.numberForeground#B28CFF
  • symbolIcon.objectForeground#F0F4FC
  • symbolIcon.operatorForeground#9D6CFF
  • symbolIcon.packageForeground#FFE68A
  • symbolIcon.propertyForeground#F0F4FC
  • symbolIcon.referenceForeground#F0F4FC
  • symbolIcon.snippetForeground#6CF3FF
  • symbolIcon.stringForeground#FFE68A
  • symbolIcon.structForeground#6CF3FF
  • symbolIcon.textForeground#F0F4FC
  • symbolIcon.typeParameterForeground#76FF8F
  • symbolIcon.unitForeground#B28CFF
  • symbolIcon.variableForeground#F0F4FC
  • tab.activeBackground#1A1E24
  • tab.activeBorder#9D6CFF
  • tab.activeBorderTop#FF9F4380
  • tab.activeForeground#F0F4FC
  • tab.border#0A0E14
  • tab.hoverBackground#2D354630
  • tab.hoverForeground#F0F4FC
  • tab.inactiveBackground#0A0E14
  • tab.inactiveForeground#4A4F5B
  • tab.unfocusedActiveForeground#F0F4FCAA
  • tab.unfocusedInactiveForeground#4A4F5B80
  • terminal.ansiBlack#1A1E24
  • terminal.ansiBlue#9D6CFF
  • terminal.ansiBrightBlack#4A4F5B
  • terminal.ansiBrightBlue#B28CFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#9AFFA9
  • terminal.ansiBrightMagenta#FFACE5
  • terminal.ansiBrightRed#FF9191
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFF4A3
  • terminal.ansiCyan#6CF3FF
  • terminal.ansiGreen#76FF8F
  • terminal.ansiMagenta#FF92DF
  • terminal.ansiRed#FF6E6E
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFE68A
  • terminal.background#0A0E14
  • terminal.foreground#F0F4FC
  • terminal.selectionBackground#2D3546AA
  • terminalCursor.foreground#FF9F43
  • titleBar.activeBackground#0A0E14
  • titleBar.activeForeground#F0F4FC
  • titleBar.border#1A1E2440
  • titleBar.inactiveBackground#0A0E14
  • titleBar.inactiveForeground#4A4F5B
  • tree.indentGuidesStroke#2D354660
  • walkThrough.embeddedEditorBackground#0A0E1490
  • welcomePage.tileBackground#1A1E24
  • widget.shadow#0A0E1499

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4A4F5Bitalic
comment.block.documentation, comment.block.documentation entity.name.type#4A4F5BCCitalic
keyword, keyword.control#FF6E6Ebold
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof#FF6E6E
storage.type, storage.modifier#6CF3FFitalic
string, markup.inline.raw#FFE68A
string.regexp#FFE68Abold
constant.character.escape#FF9F43
constant.numeric, constant.language, constant.character, constant.other#B28CFF
entity.name.function, support.function#76FF8Fbold
meta.function-call, variable.function#76FF8F
meta.method-call, meta.method#9AFFA9
meta.function.parameters, variable.parameter#FF9F43italic
variable, support.variable#F0F4FC
variable.other.property, variable.object.property, support.variable.property#FF92DF
variable.other.constant, variable.language.this, variable.language.super#FF6E6Ebold
support.constant#B28CFF
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#6CF3FFbold
entity.name.type.interface, entity.name.type.protocol#6CF3FFbold italic
entity.name.type.enum#6CF3FFbold
entity.other.inherited-class, entity.name.type.parameter#A4FFFFitalic
support.class, support.type#6CF3FF
keyword.operator#9D6CFFbold
keyword.operator.logical, keyword.operator.comparison#B28CFFbold
keyword.operator.assignment, keyword.operator.arithmetic#6CF3FF
keyword.operator.ternary, punctuation.definition.template-expression#FF9F43
entity.name.tag, entity.name.tag.html, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.tsx#FF92DF
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#76FF8F
meta.tag.attributes, meta.tag.attributes.js, meta.tag.attributes.jsx, meta.tag.attributes.tsx#FF9F43
punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end#FFE68A
punctuation.definition.parameters, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.function, punctuation.section.method, punctuation.section.class, punctuation.section.block#F0F4FCAA
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#F0F4FCAA
punctuation.accessor#9D6CFF
variable.other.readwrite.alias#F0F4FC
meta.import, meta.export#FF6E6E
keyword.control.flow, keyword.control.conditional, keyword.control.loop#FF6E6Ebold
keyword.control.flow.async, storage.modifier.async#B28CFFitalic bold
meta.object-literal.key, meta.object.member#F0F4FCCC
support.type.primitive, support.type.builtin#6CF3FFitalic
support.type.promise#6CF3FFbold italic
entity.name.type.module#FFE68A
entity.other.attribute-name.class.css#76FF8F
entity.other.attribute-name.id.css#FF6E6E
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF9F43italic
support.type.property-name.css, support.type.vendor-prefix.css#6CF3FF
support.constant.property-value.css#FFE68A
keyword.control.at-rule.import.css, keyword.control.at-rule.media.css, keyword.control.at-rule.keyframes.css#FF6E6Ebold
punctuation.definition.entity.css#9D6CFF
markup.heading, entity.name.section#FF6E6Ebold
markup.bold#FF9F43bold
markup.italic#B28CFFitalic
markup.underline#76FF8Funderline
markup.quote#6CF3FFitalic
markup.fenced_code, markup.inline.raw.string#FFE68A
markup.link#9D6CFF
markup.list.bullet, markup.list.number#FF92DF
support.type.property-name.json#6CF3FF
punctuation.support.type.property-name.begin.json, p punctuation.support.type.property-name.end.json#6CF3FF
entity.name.tag.yaml#6CF3FF
string.unquoted.plain.out.yaml#F0F4FC
support.class.component.jsx, support.class.component.tsx#FF92DFbold
variable.other.readwrite.jsx, variable.other.readwrite.tsx, variable.other.object.jsx, variable.other.object.tsx#F0F4FC
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#F0F4FC
meta.embedded.expression.jsx, meta.embedded.expression.tsx#F0F4FC
keyword.operation.graphql#FF6E6Ebold
entity.name.fragment.graphql, entity.name.query.graphql, entity.name.mutation.graphql#76FF8Fbold
variable.graphql#FF9F43italic
keyword.other.special-method.dockerfile#FF6E6Ebold
string.quoted.double.dockerfile, string.quoted.single.dockerfile#FFE68A
markup.heading.git-commit#FF6E6Ebold
meta.scope.message.git-commit#F0F4FC
meta.type.annotation#6CF3FF
entity.name.type.alias, entity.name.type.interface#6CF3FFbold italic
meta.type.annotation meta.type.parameters, meta.type.parameters entity.name.type#A4FFFFitalic
meta.type.annotation meta.type.function, meta.type.function entity.name.type#76FF8Fitalic
keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.definiteassignment#9D6CFF
meta.type.annotation meta.object#F0F4FC
entity.name.tag.svelte#FF92DFbold
meta.svelte-block entity.name.function#76FF8Fbold
meta.svelte-directive.on punctuation.definition.keyword#FF6E6E
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue#FF6E6Ebold
source.vue entity.name.tag.custom#FF92DF
keyword.control.flow.python#FF6E6Ebold
meta.function-call.python#76FF8F
support.function.magic.python#B28CFFitalic bold
meta.function.decorator.python, entity.name.function.decorator.python#9D6CFFitalic
meta.function.parameters.python#FF9F43italic
support.function.builtin.python#76FF8Fitalic
entity.name.type.rust#6CF3FFbold
keyword.control.rust#FF6E6Ebold
storage.modifier.lifetime.rust#FF9F43italic
meta.attribute.rust#9D6CFFitalic
keyword.function.go#FF6E6Ebold
entity.name.function.go#76FF8Fbold
entity.name.type.go#6CF3FFbold
storage.type.numeric.go#B28CFF
entity.name.function.cpp, entity.name.function.c#76FF8Fbold
entity.name.type.cpp, entity.name.type.c#6CF3FFbold
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c#6CF3FFitalic
entity.name.namespace.cpp#FFE68A
keyword.control.java#FF6E6Ebold
entity.name.type.class.java#6CF3FFbold
storage.modifier.java#6CF3FFitalic
storage.type.primitive.java#6CF3FFitalic
entity.name.function.java#76FF8Fbold
entity.name.function.php#76FF8Fbold
entity.name.type.class.php#6CF3FFbold
keyword.control.php#FF6E6Ebold
variable.other.php#F0F4FC
keyword.control.shell#FF6E6Ebold
meta.function.shell#76FF8F
variable.other.special.shell#B28CFF
string.quoted.double.shell, string.quoted.single.shell#FFE68A
keyword.other.sql#FF6E6Ebold
entity.name.function.sql#76FF8Fbold
support.function.aggregate.sql#B28CFF
entity.name.table.sql, entity.name.table.toml#6CF3FF
support.type.rxjs, support.class.rxjs#FF6E6Eitalic
support.variable.rxjs#9D6CFF
meta.method-call.rxjs, meta.function-call.rxjs#76FF8F
support.type.tensor, support.class.tensor#FF9F43
entity.name.type.class.nn-layer#6CF3FFbold
support.function.tensorflow, support.function.torch, support.function.keras#76FF8Fitalic
variable.other.readwrite.tensorflow, variable.other.readwrite.torch#9D6CFF
keyword.other.solidity#76FF8F
storage.type.solidity#6CF3FFitalic
entity.name.function.solidity#76FF8Fbold
support.type.web3#9D6CFF
entity.name.tag.dockerfile#6CF3FF
keyword.other.special-method.dockerfile#FF6E6Ebold
support.function.cloudformation, support.type.property-name.cloudformation#FF9F43
entity.name.type.aws, entity.name.function.terraform#6CF3FF