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#e5b358
  • activityBar.background#20242F
  • activityBar.border#20242F
  • activityBar.foreground#C5C3C1BF
  • activityBar.inactiveForeground#4d556699
  • activityBarBadge.background#EDC164
  • activityBarBadge.foreground#20242F
  • badge.background#EDC16433
  • badge.foreground#EDC164
  • button.background#EDC164
  • button.foreground#20242F
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#20242F
  • debugExceptionWidget.border#20242F
  • debugIcon.breakpointDisabledForeground#70CEFF
  • debugIcon.breakpointForeground#EDC164
  • debugToolBar.background#20242F
  • descriptionForeground#4d5566
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#20242F
  • dropdown.border#2b303a
  • dropdown.foreground#4d5566
  • editor.background#20242F
  • editor.findMatchBackground#20242F
  • editor.findMatchBorder#EDC164
  • editor.findMatchHighlightBackground#EDC1640d
  • editor.findMatchHighlightBorder#EDC164BE
  • editor.findRangeHighlightBackground#1b2733f2
  • editor.findRangeHighlightBorder#20242F00
  • editor.foreground#e5e3e1
  • editor.inactiveSelectionBackground#1b2733f2
  • editor.lineHighlightBackground#1A2028
  • editor.rangeHighlightBackground#20242F
  • editor.selectionBackground#1E2A3A
  • editor.selectionHighlightBackground#1b2733f2
  • editor.selectionHighlightBorder#304357
  • editor.wordHighlightBackground#6994bf12
  • editor.wordHighlightBorder#6994bf80
  • editor.wordHighlightStrongBackground#91b36212
  • editor.wordHighlightStrongBorder#91b36280
  • editorBracketMatch.background#4d55664d
  • editorBracketMatch.border#4d556699
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#EDC164
  • editorGroup.border#1A2028
  • editorGroupHeader.noTabsBackground#20242F
  • editorGroupHeader.tabsBackground#20242F
  • editorGroupHeader.tabsBorder#20242F
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#20242F
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#4d5566b3
  • editorIndentGuide.background#4d556666
  • editorInfo.foreground#00000000
  • editorInlayHint.foreground#626A73
  • editorLineNumber.activeForeground#C5C3C1CC
  • editorLineNumber.foreground#C5C3C180
  • editorLink.activeForeground#EDC164
  • editorMarkerNavigation.background#20242F
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#1A2028
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#EDC164
  • editorRuler.foreground#4d556666
  • editorSuggestWidget.background#20242F
  • editorSuggestWidget.border#20242F
  • editorSuggestWidget.highlightForeground#e5b358
  • editorSuggestWidget.selectedBackground#1c2a42
  • editorWhitespace.foreground#4d556699
  • editorWidget.background#20242F
  • editorWidget.border#20242F
  • editorWidget.resizeBorder#20242F
  • errorForeground#FF9D5C
  • extensionButton.prominentBackground#EDC164
  • extensionButton.prominentForeground#20242F
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#20242F
  • foreground#C5C3C1
  • gitDecoration.addedResourceForeground#c2d94c
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#373d49
  • gitDecoration.modifiedResourceForeground#d4cb68
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#91b362b3
  • icon.foreground#C5C3C1
  • input.background#20242F
  • input.border#20242F
  • input.foreground#C5C3C1
  • input.placeholderForeground#C5C3C180
  • inputOption.activeBorder#EDC164
  • inputValidation.errorBackground#20242F
  • inputValidation.errorBorder#FF9D5C
  • inputValidation.infoBackground#20242F
  • inputValidation.infoBorder#70CEFF
  • inputValidation.warningBackground#20242F
  • inputValidation.warningBorder#EDC164
  • list.activeSelectionBackground#20242F
  • list.activeSelectionForeground#EDC164
  • list.errorForeground#FF9D5C
  • list.filterMatchBackground#EDC1640d
  • list.filterMatchBorder#EDC164
  • list.focusAndSelectionOutline#20242F
  • list.focusBackground#20242F
  • list.focusForeground#4d5566
  • list.highlightForeground#EDC164
  • list.hoverBackground#20242F
  • list.hoverForeground#C5C3C1
  • list.inactiveSelectionBackground#20242F
  • list.inactiveSelectionForeground#4d5566
  • list.invalidItemForeground#414856
  • listFilterWidget.background#20242F
  • listFilterWidget.noMatchesOutline#FF9D5C
  • listFilterWidget.outline#EDC164
  • panel.background#20242F
  • panel.border#20242F
  • panelSectionHeader.foreground#C5C3C1
  • panelTitle.activeBorder#EDC164
  • panelTitle.activeForeground#C5C3C1
  • panelTitle.inactiveForeground#4d5566
  • peekView.border#20242F
  • peekViewEditor.background#20242F
  • peekViewEditor.matchHighlightBackground#EDC16433
  • peekViewResult.background#20242F
  • peekViewResult.fileForeground#4d5566
  • peekViewResult.matchHighlightBackground#EDC16433
  • peekViewTitle.background#20242F
  • peekViewTitleDescription.foreground#4d5566
  • peekViewTitleLabel.foreground#4d5566
  • pickerGroup.border#20242F
  • pickerGroup.foreground#373d49
  • progressBar.background#EDC164
  • quickInput.background#20242F
  • quickInput.foreground#C5C3C1BF
  • quickInputList.focusBackground#20242F
  • quickInputList.focusForeground#e5b358
  • scrollbar.shadow#20242F
  • scrollbarSlider.activeBackground#4d5566b3
  • scrollbarSlider.background#4d556666
  • scrollbarSlider.hoverBackground#4d556699
  • selection.background#1E2A3Afd
  • settings.headerForeground#C5C3C1
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#20242F
  • sideBar.border#20242F
  • sideBar.foreground#C5C3C1BF
  • sideBarSectionHeader.background#20242F
  • sideBarSectionHeader.border#20242F
  • sideBarSectionHeader.foreground#C5C3C1BF
  • sideBarTitle.foreground#20242F
  • statusBar.background#20242F
  • statusBar.border#20242F
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#20242F
  • statusBar.foreground#4d5566
  • statusBar.noFolderBackground#20242F
  • statusBarItem.activeBackground#1A2028
  • statusBarItem.hoverBackground#1A2028
  • statusBarItem.prominentBackground#1A2028
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#20242F
  • tab.activeBorder#EDC164
  • tab.activeForeground#C5C3C1
  • tab.border#20242F
  • tab.inactiveBackground#20242F
  • tab.inactiveForeground#4d5566
  • tab.unfocusedActiveBorder#4d5566
  • tab.unfocusedActiveForeground#4d5566
  • tab.unfocusedInactiveForeground#4d5566
  • terminal.ansiBlack#1A2028
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#70CEFF
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFBD6A
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#20242F
  • terminal.foreground#C5C3C1
  • textBlockQuote.background#20242F
  • textLink.activeForeground#EDC164
  • textLink.foreground#EDC164
  • textPreformat.foreground#C5C3C1
  • titleBar.activeBackground#20242F
  • titleBar.activeForeground#C5C3C1
  • titleBar.border#20242F
  • titleBar.inactiveBackground#20242F
  • titleBar.inactiveForeground#C5C3C1
  • tree.indentGuidesStroke#4d5566b3
  • walkThrough.embeddedEditorBackground#20242F
  • widget.shadow#20242F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.documentation storage.type.class, comment.block.documentation storage.type, comment.block.documentation storage, comment.block.documentation keyword.other#626A73italic
string, constant.other.symbol, constant.character.escape, string.quoted invalid.illegal.newline, markup.quote meta.paragraph#C2D94C—
constant.numeric, constant.language, support.constant, constant.other.color, string.unquoted.html#EDC164—
keyword, keyword.operator, storage.modifier, support.macro, storage.type.function, storage.type.class, punctuation.definition.decorator, punctuation.definition.annotation, punctuation.decorator, punctuation.separator.continuation.line, punctuation.separator.annotation.result, constant.character.escape.line-continuation.c, storage.type.struct.c, storage.type.enum.c, storage.type.union.c, meta.method.declaration storage.type, meta.var.expr storage.type, meta.interface storage.type.interface, storage.type.enum.ts, meta.type.declaration storage.type.type, punctuation.definition.attribute, punctuation.brackets.attribute, storage.type.rust, punctuation.separator.other.ruby, storage.type.function-type.lisp, punctuation.definition.storage.type.objc, punctuation.definition.keyword.objc, storage.type.alias.shell, entity.name.section.markdown, punctuation.definition.tag.begin, punctuation.definition.tag.end, source.toml support.type.property-name.table, source.toml support.type.property-name.array, entity.name.section.group-title, support.function.target.PHONY, storage.type.namespace.cs, storage.type.record.cs, storage.type.var.cs, storage.type.accessor.get.cs, storage.type.accessor.set.cs, storage.type.accessor.init.cs, storage.type.delegate.cs, storage.type.enum.cs, storage.type.struct.cs, storage.type.interface.cs, storage.type.event.cs, storage.type.operator.cs#FF9D5C—
meta.definition entity.name.function, meta.definition support.function, meta.function.definition entity.name.function, meta.function.python entity.name.function, meta.function.python support.function, meta.function.python support.variable, meta.function.python variable.legacy, meta.macro.rules entity.name.function.macro.rust, meta.function.method entity.name.function, meta.function.php entity.name.function, entity.name.function.go, meta.function.type-declaration entity.name.function, entity.other.keyframe-offset, meta.at-rule entity.name.function, meta.at-rule support.function, meta.function entity.name.function.shell, entity.name.function.lisp, meta.function entity.name.function.objc, meta.function entity.name.function.name-of-parameter.objc, markup.inline.raw.string, entity.other.attribute-name, entity.name.function.target.makefile#FFBD6A—
meta.class entity.name.type, entity.name.type.struct, entity.name.type.trait, support.class.dart, meta.module entity.name.type.module, meta.declaration storage.type.haskell, meta.type.declaration entity.name.type.alias, meta.interface entity.name.type.interface, entity.name.type.enum.ts, entity.name.type.lisp, meta.interface-or-protocol entity.name.type.objc, entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.alias.cs, entity.name.type.enum.cs, entity.name.tag.css, meta.link.inline string.other.link.title, meta.image.inline string.other.link.description#70CEFF—
storage.modifier.import, storage.modifier.package, entity.name.type.package, entity.name.function.support, entity.name.function.decorator, meta.function.decorator support.type, invalid, keyword.operator.key-value, keyword.operator.access.dot, keyword.operator.namespace, source.cs keyword.type, string.template meta.template, meta.class entity.name.type.module.js, meta.type.annotation entity.name.type, meta.return.type entity.name.type, meta.type.parameters entity.name.type, keyword.operator.type.annotation.ts, source.css support.constant, source.css meta.at-rule support.function, support.type.property-name, entity.name.tag.yaml, string.quoted.double.attribute-value, constant.language.symbol, constant.other.symbol.hashkey, meta.method-call.static keyword.operator, keyword.operator.return-value.php, keyword.operator.class.php, keyword.constant.lisp, source.objc keyword.other.property, source.editorconfig keyword.other.definition, source.ini punctuation.definition.entity, keyword.other.definition.ini, string.unquoted.argument.shell, string.interpolated.dollar.shell, source.shell string.unquoted.argument#C5C3C1—
markup.italic—italic
markup.bold—bold
markup.strikethrough—strikethrough