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#B06AE8
  • activityBar.background#111921
  • activityBar.border#000000
  • activityBar.foreground#14D4B8
  • activityBar.inactiveForeground#4A6070
  • activityBarBadge.background#9040D0
  • activityBarBadge.foreground#DDE5EE
  • badge.background#9040D0
  • badge.foreground#111921
  • breadcrumb.activeSelectionForeground#14D4B8
  • breadcrumb.focusForeground#DDE5EE
  • breadcrumb.foreground#6B8A9E
  • breadcrumbPicker.background#0C1118
  • button.background#14D4B8
  • button.foreground#111921
  • button.hoverBackground#0CAA96
  • button.secondaryBackground#9040D0
  • button.secondaryForeground#DDE5EE
  • button.secondaryHoverBackground#B06AE8
  • commandCenter.activeForeground#DDE5EE
  • commandCenter.background#0C1118
  • commandCenter.border#253545
  • commandCenter.foreground#6B8A9E
  • debugToolBar.background#182130
  • debugToolBar.border#253545
  • diffEditor.insertedTextBackground#14D4B820
  • diffEditor.removedTextBackground#FF5E7A20
  • dropdown.background#111921
  • dropdown.border#253545
  • dropdown.foreground#DDE5EE
  • editor.background#111921
  • editor.findMatchBackground#FFAB5E40
  • editor.findMatchHighlightBackground#FFAB5E25
  • editor.findRangeHighlightBackground#2F425550
  • editor.foreground#DDE5EE
  • editor.inactiveSelectionBackground#2F425540
  • editor.lineHighlightBackground#182130
  • editor.lineHighlightBorder#00000000
  • editor.placeholder.foreground#6B8A9E
  • editor.rangeHighlightBackground#B06AE815
  • editor.selectionBackground#2F425580
  • editor.selectionHighlightBackground#2F425560
  • editor.stackFrameHighlightBackground#FFAB5E20
  • editor.wordHighlightBackground#B06AE820
  • editor.wordHighlightStrongBackground#B06AE835
  • editorBracketHighlight.foreground1#FFAB5E
  • editorBracketHighlight.foreground2#C88CF0
  • editorBracketHighlight.foreground3#82B4E8
  • editorBracketHighlight.foreground4#FFAB5E
  • editorBracketHighlight.foreground5#C88CF0
  • editorBracketHighlight.foreground6#82B4E8
  • editorBracketMatch.background#B06AE820
  • editorBracketMatch.border#B06AE8
  • editorCursor.background#111921
  • editorCursor.foreground#14D4B8
  • editorError.border#ffffff00
  • editorError.foreground#FF5E7A
  • editorGhostText.border#00000000
  • editorGhostText.foreground#0CAA96
  • editorGroup.border#000000
  • editorGroup.dropBackground#2F425580
  • editorGroupHeader.tabsBackground#111921
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#14D4B8
  • editorGutter.deletedBackground#FF5E7A
  • editorGutter.modifiedBackground#FFAB5E
  • editorHoverWidget.background#0C1118
  • editorHoverWidget.border#253545
  • editorIndentGuide.activeBackground1#6B8A9E
  • editorIndentGuide.background1#253545
  • editorInfo.foreground#0CAA96
  • editorInlayHint.background#1E2A3A
  • editorInlayHint.foreground#6B8A9E
  • editorLineNumber.activeForeground#6B8A9E
  • editorLineNumber.foreground#2F425580
  • editorLink.activeForeground#14D4B8
  • editorRuler.foreground#2535451A
  • editorSuggestWidget.background#0C1118
  • editorSuggestWidget.border#253545
  • editorSuggestWidget.foreground#DDE5EE
  • editorSuggestWidget.highlightForeground#14D4B8
  • editorSuggestWidget.selectedBackground#1E2A3A
  • editorWarning.border#ffffff00
  • editorWarning.foreground#FFAB5E
  • editorWhitespace.foreground#253545
  • editorWidget.background#0C1118
  • editorWidget.border#253545
  • errorForeground#FF5E7A
  • extensionBadge.remoteBackground#9040D0
  • extensionBadge.remoteForeground#DDE5EE
  • extensionButton.background#9040D0
  • extensionButton.foreground#DDE5EE
  • extensionButton.hoverBackground#B06AE8
  • extensionButton.prominentBackground#14D4B8
  • extensionButton.prominentForeground#111921
  • extensionButton.prominentHoverBackground#0CAA96
  • extensionIcon.starForeground#FFCA85
  • extensionIcon.verifiedForeground#14D4B8
  • focusBorder#B06AE833
  • foreground#DDE5EE
  • gitDecoration.addedResourceForeground#14D4B8
  • gitDecoration.conflictingResourceForeground#B06AE8
  • gitDecoration.deletedResourceForeground#FF5E7A
  • gitDecoration.ignoredResourceForeground#4A6070
  • gitDecoration.modifiedResourceForeground#FFCA85
  • gitDecoration.renamedResourceForeground#82B4E8
  • gitDecoration.untrackedResourceForeground#14D4B8
  • input.background#111921
  • input.border#253545
  • input.foreground#DDE5EE
  • input.placeholderForeground#0CAA96
  • inputOption.activeBackground#B06AE814
  • inputOption.activeBorder#B06AE8
  • inputOption.activeForeground#DDE5EE
  • inputValidation.errorBackground#111921
  • inputValidation.errorBorder#FF5E7A
  • inputValidation.infoBackground#111921
  • inputValidation.infoBorder#82B4E8
  • inputValidation.warningBackground#111921
  • inputValidation.warningBorder#FFAB5E
  • list.activeSelectionBackground#1E2A3A
  • list.activeSelectionForeground#14D4B8
  • list.focusBackground#253545
  • list.focusForeground#0CAA96
  • list.highlightForeground#FFAB5E
  • list.hoverBackground#253545
  • list.hoverForeground#DDE5EE
  • list.inactiveSelectionBackground#1E2A3A
  • list.inactiveSelectionForeground#0CAA96
  • menu.background#0C1118
  • menu.foreground#DDE5EE
  • menu.selectionBackground#1E2A3A
  • menu.selectionForeground#14D4B8
  • menu.separatorBackground#253545
  • menubar.selectionBackground#182130
  • menubar.selectionForeground#DDE5EE
  • notificationCenterHeader.background#0C1118
  • notificationCenterHeader.foreground#6B8A9E
  • notifications.background#182130
  • notifications.border#253545
  • notificationsErrorIcon.foreground#FF5E7A
  • notificationsInfoIcon.foreground#82B4E8
  • notificationsWarningIcon.foreground#FFAB5E
  • panel.border#000000
  • panelTitle.activeBorder#14D4B8
  • panelTitle.activeForeground#DDE5EE
  • panelTitle.inactiveForeground#6B8A9E
  • peekViewEditor.background#0C1118
  • peekViewEditor.matchHighlightBackground#FFAB5E30
  • peekViewResult.background#111921
  • peekViewResult.fileForeground#DDE5EE
  • peekViewResult.lineForeground#6B8A9E
  • peekViewResult.matchHighlightBackground#FFAB5E40
  • peekViewResult.selectionBackground#1E2A3A
  • peekViewResult.selectionForeground#B06AE8
  • peekViewTitle.background#0C1118
  • peekViewTitleDescription.foreground#6B8A9E
  • peekViewTitleLabel.foreground#DDE5EE
  • progressBar.background#14D4B8
  • quickInputList.focusBackground#1E2A3A
  • quickInputList.focusForeground#14D4B8
  • scrollbar.shadow#111921
  • scrollbarSlider.activeBackground#2F425580
  • scrollbarSlider.background#B06AE833
  • scrollbarSlider.hoverBackground#B06AE833
  • search.resultsInfoForeground#6B8A9E
  • selection.background#2F425580
  • sideBar.background#0C1118
  • sideBar.border#000000
  • sideBar.foreground#DDE5EE
  • sideBarSectionHeader.background#0C1118
  • sideBarSectionHeader.foreground#6B8A9E
  • sideBarTitle.foreground#6B8A9E
  • statusBar.background#0C1118
  • statusBar.border#000000
  • statusBar.debuggingBackground#FFAB5E
  • statusBar.debuggingForeground#111921
  • statusBar.foreground#6B8A9E
  • statusBar.noFolderBackground#0C1118
  • statusBarItem.activeBackground#B06AE8
  • statusBarItem.hoverBackground#182130
  • statusBarItem.remoteBackground#9040D0
  • statusBarItem.remoteForeground#DDE5EE
  • tab.activeBackground#182130
  • tab.activeBorderTop#14D4B8
  • tab.activeForeground#14D4B8
  • tab.activeModifiedBorder#B06AE8
  • tab.border#000000
  • tab.hoverBackground#1E2A3A
  • tab.inactiveBackground#111921
  • tab.inactiveForeground#4A6070
  • tab.inactiveModifiedBorder#6B8A9E
  • tab.unfocusedActiveBackground#182130
  • tab.unfocusedActiveForeground#6B8A9E
  • tab.unfocusedActiveModifiedBorder#9040D0
  • tab.unfocusedInactiveModifiedBorder#4A6070
  • terminal.ansiBlack#0C1118
  • terminal.ansiBlue#82B4E8
  • terminal.ansiBrightBlack#6B8A9E
  • terminal.ansiBrightBlue#B06AE8
  • terminal.ansiBrightCyan#3EEEDD
  • terminal.ansiBrightGreen#3EEEDD
  • terminal.ansiBrightMagenta#C88CF0
  • terminal.ansiBrightRed#FF8FA0
  • terminal.ansiBrightWhite#DDE5EE
  • terminal.ansiBrightYellow#FFCA85
  • terminal.ansiCyan#14D4B8
  • terminal.ansiGreen#14D4B8
  • terminal.ansiMagenta#B06AE8
  • terminal.ansiRed#FF5E7A
  • terminal.ansiWhite#DDE5EE
  • terminal.ansiYellow#FFAB5E
  • terminal.background#111921
  • terminal.foreground#DDE5EE
  • terminal.selectionBackground#2F425580
  • terminalCursor.background#253545
  • terminalCursor.foreground#14D4B8
  • textLink.activeForeground#3EEEDD
  • textLink.foreground#14D4B8
  • titleBar.activeBackground#0C1118
  • titleBar.activeForeground#DDE5EE
  • titleBar.border#000000
  • titleBar.inactiveBackground#182130
  • titleBar.inactiveForeground#6B8A9E
  • tree.indentGuidesStroke#253545
  • welcomePage.background#0C1118
  • welcomePage.tileBackground#111921
  • welcomePage.tileBorder#253545
  • widget.shadow#0C1118

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage, keyword.control.flow, storage.modifier, keyword.operator, variable.language, entity.name.tag, markup.heading, markup.underline.link, variable.other.env, punctuation.definition.list.begin.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, entity.other.keyframe-offset, constant.length.units.css, constant.percentage.units.css#B06AE8—
string, markup.inserted, markup.raw, constant, source.env, support.type.builtin.graphql, variable.other.quoted.double, markup.inline.raw.string.markdown, entity.other.attribute-name.id.css, JSXNested#14D4B8—
entity.name.function, entity.name.function.elixir, entity.name.function-call.elixir, meta.function-call.generic.python, markup.changed, entity.name.section.markdown, storage.type.annotation.dart#FFAB5E—
support.function, support.class.component.tsx, support.class.component.open.jsx, support.class.component.close.jsx#FFAB5E—
invalid, markup.deleted#FF5E7A—
string.unquoted, punctuation.separator, entity.other.attribute-name, meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property, variable.other.constant.property, meta.type.annotation, support.type.property-name.css, support.type.vendored, constant.language.symbol.elixir, variable.graphql, meta.attribute.python, source.dart#C88CF0—
variable, markup.list, support.constant.property-value.css, variable.parameter.keyframe-list.css, source.css, support.constant.font-name, support.constant.vendored.property-value, variable.parameter, meta.class, meta.method.declaration, parameter.variable.function.elixir, punctuation.definition.tag, punctuation.section.embedded, meta.embedded.expression, punctuation.terminator.dart, punctuation.dot.dart, meta.jsx.children#DDE5EE—
comment, string.quoted.docstring.multi.python#4A6070—
entity.name.type, entity.name.class, support.class.builtin, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.quasi.element.begin, punctuation.quasi.element.end, entity.other.inherited-class, variable.other.constant.elixir, entity.other.attribute-name.class.css, support.class.dart#82B4E8—
meta.type.parameters, meta.return.type, entity.name.type.interface, meta.type.annotation, markup.italic.markdown—italic
markup.underline—underline
markup.bold.markdown, storage.type.annotation.dart—bold
support.function.powershell#FFCA85—
support.function.attribute.powershell#FFAB5E—
variable.other.member.powershell#FFCA85—
variable.other.powershell#DDE5EE—
keyword.operator.comparison.powershell, keyword.operator.logical.powershell, keyword.operator.assignment.powershell#B06AE8—
variable.other.php, variable.other.property.php#DDE5EE—
entity.name.function.php, support.function.construct.php#14D4B8—
entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml#DDE5EE—
entity.name.type.bicep, support.type.primitive.bicep#82B4E8—
source.bicep, meta.parameters.bicep, meta.function.parameters.bicep, meta.type.annotation.bicep, variable.other.readwrite.bicep, variable.other.property.bicep, entity.name.type.bicep, support.type.primitive.bicep—
support.type.property-name.json#C88CF0—
string.quoted.double.json#14D4B8—
entity.name.tag.yaml#C88CF0—
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml#14D4B8—
entity.name.type.anchor.yaml, variable.other.alias.yaml#FFAB5E—
constant.numeric#FFCA85—
constant.language.boolean, constant.language.null, constant.language.undefined#B06AE8—
entity.other.attribute-name.class.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#14D4B8—
support.type.property-name.css#C88CF0—
meta.decorator, punctuation.decorator#FFAB5Eitalic
punctuation.definition.template-expression, punctuation.section.embedded#B06AE8—
KXC - Cipher by Korthcore - VS Code Theme