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.activeBackground#00000000
  • activityBar.activeBorder#93f20d
  • activityBar.background#1c1736
  • activityBar.border#41367d
  • activityBar.foreground#93f20d
  • activityBar.inactiveForeground#d4ccff
  • activityBarBadge.background#bef76e
  • activityBarBadge.foreground#251f47
  • badge.background#bef76e
  • badge.foreground#251f47
  • breadcrumb.background#251f47
  • button.background#d4ccff
  • button.border#d4ccff
  • button.foreground#251f47
  • button.hoverBackground#d4ccfff2
  • button.secondaryBackground#251f47
  • button.secondaryForeground#d4ccff
  • button.secondaryHoverBackground#251f47f2
  • button.separator#251f474d
  • commandCenter.activeBackground#7e70c21a
  • commandCenter.activeBorder#41367d
  • commandCenter.background#1c1736
  • commandCenter.border#41367d
  • commandCenter.foreground#d4ccff
  • commandCenter.inactiveBorder#41367d
  • commandCenter.inactiveForeground#d4ccff80
  • debugToolBar.background#251f47
  • diffEditor.border#41367d
  • diffEditor.diagonalFill#d4ccff1a
  • diffEditor.insertedLineBackground#004ba640
  • diffEditor.insertedTextBackground#004ba640
  • diffEditor.removedLineBackground#92002b40
  • diffEditor.removedTextBackground#92002b40
  • diffEditorGutter.insertedLineBackground#004ba640
  • diffEditorGutter.removedLineBackground#92002b40
  • diffEditorOverview.insertedForeground#6da8ff
  • diffEditorOverview.removedForeground#ff6882
  • disabledForeground#d4ccff80
  • dropdown.background#251f47
  • dropdown.border#7e70c2
  • dropdown.foreground#d4ccff
  • dropdown.listBackground#251f47
  • editor.background#251f47
  • editor.findMatchBackground#914a0080
  • editor.findMatchHighlightBackground#914a0080
  • editor.findRangeHighlightBackground#5e630080
  • editor.foldBackground#00000000
  • editor.foreground#d4ccff
  • editor.inactiveSelectionBackground#09aaaa4d
  • editor.lineHighlightBackground#1c1736
  • editor.rangeHighlightBackground#5e630080
  • editor.selectionBackground#09aaaa4d
  • editor.wordHighlightBackground#0063ca80
  • editor.wordHighlightStrongBackground#9f2b9580
  • editorBracketHighlight.foreground1#85a94f
  • editorBracketHighlight.foreground2#46adb0
  • editorBracketHighlight.foreground3#c3936e
  • editorBracketHighlight.foreground4#85a94f
  • editorBracketHighlight.foreground5#46adb0
  • editorBracketHighlight.foreground6#c3936e
  • editorBracketHighlight.unexpectedBracket.foreground#ff6882
  • editorBracketMatch.background#09aaaa26
  • editorBracketMatch.border#09aaaa80
  • editorCodeLens.foreground#8f8aa8
  • editorCursor.foreground#93f20d
  • editorGroup.border#41367d
  • editorGroup.dropBackground#09aaaa4d
  • editorGroupHeader.border#41367d
  • editorGroupHeader.noTabsBackground#251f47
  • editorGroupHeader.tabsBackground#1c1736
  • editorGroupHeader.tabsBorder#41367d
  • editorGutter.addedBackground#6da8ff
  • editorGutter.deletedBackground#ff6882
  • editorGutter.modifiedBackground#ff75f1
  • editorHoverWidget.background#1c1736
  • editorHoverWidget.border#7e70c2
  • editorIndentGuide.activeBackground#41367d
  • editorIndentGuide.background#41367d80
  • editorLightBulb.foreground#83d411
  • editorLightBulbAutoFix.foreground#0bdada
  • editorLineNumber.activeForeground#d4ccff
  • editorLineNumber.foreground#7e70c2
  • editorLink.activeForeground#6da8ff
  • editorOverviewRuler.border#41367d40
  • editorRuler.foreground#41367d80
  • editorSuggestWidget.background#1c1736
  • editorSuggestWidget.border#7e70c2
  • editorWidget.background#251f47
  • editorWidget.border#7e70c2
  • editorWidget.foreground#d4ccff
  • editorWidget.resizeBorder#7e70c2
  • errorForeground#ff6882
  • focusBorder#93f20d
  • foreground#d4ccff
  • gitDecoration.conflictingResourceForeground#00cbc0
  • gitDecoration.deletedResourceForeground#ff6882
  • gitDecoration.ignoredResourceForeground#d4ccff66
  • gitDecoration.modifiedResourceForeground#6da8ff
  • gitDecoration.untrackedResourceForeground#ff75f1
  • icon.foreground#d4ccff
  • input.background#251f47
  • input.border#7e70c2
  • input.placeholderForeground#d4ccff66
  • inputOption.activeBorder#d4ccff
  • keybindingLabel.background#00000000
  • keybindingLabel.border#41367d
  • keybindingLabel.bottomBorder#41367d
  • keybindingLabel.foreground#d4ccff
  • list.activeSelectionBackground#d4ccff
  • list.activeSelectionForeground#251f47
  • list.activeSelectionIconForeground#251f47
  • list.dropBackground#09aaaa4d
  • list.errorForeground#ff6882
  • list.focusForeground#d4ccff
  • list.focusHighlightForeground#251f47
  • list.highlightForeground#93f20d
  • list.hoverBackground#7e70c240
  • list.inactiveSelectionBackground#251f47
  • list.inactiveSelectionForeground#d4ccff
  • list.inactiveSelectionIconForeground#d4ccff
  • list.warningForeground#f29324
  • menu.background#1c1736
  • menu.border#41367d
  • menu.foreground#d4ccff
  • menu.separatorBackground#41367d
  • merge.currentContentBackground#004ba640
  • merge.currentHeaderBackground#004ba6a6
  • merge.incomingContentBackground#92002b40
  • merge.incomingHeaderBackground#92002ba6
  • notificationCenterHeader.background#1c1736
  • notificationCenterHeader.foreground#d4ccff
  • notificationLink.foreground#9b89f5
  • notifications.background#1c1736
  • notifications.foreground#d4ccff
  • notificationToast.border#41367d
  • panel.background#1c1736
  • panel.border#41367d
  • panelSection.border#41367d
  • panelSectionHeader.border#41367d
  • panelTitle.activeBorder#93f20d
  • panelTitle.activeForeground#93f20d
  • panelTitle.inactiveForeground#d4ccff
  • peekView.border#7e70c2
  • peekViewEditor.background#251f47
  • peekViewResult.background#251f47
  • peekViewResult.fileForeground#d4ccff
  • peekViewResult.lineForeground#d4ccff
  • peekViewTitle.background#251f47
  • peekViewTitleDescription.foreground#9b89f5
  • peekViewTitleLabel.foreground#d4ccff
  • pickerGroup.border#41367d80
  • progressBar.background#d4ccff
  • quickInput.background#1c1736
  • quickInputList.focusBackground#d4ccff
  • quickInputList.focusForeground#251f47
  • quickInputList.focusIconForeground#251f47
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7e70c299
  • scrollbarSlider.background#7e70c266
  • scrollbarSlider.hoverBackground#7e70c280
  • settings.checkboxBackground#1c1736
  • settings.dropdownBackground#1c1736
  • settings.headerForeground#83d411
  • settings.modifiedItemIndicator#0bdada
  • settings.numberInputBackground#1c1736
  • settings.rowHoverBackground#1c173640
  • settings.textInputBackground#1c1736
  • sideBar.background#1c1736
  • sideBar.border#41367d
  • sideBar.dropBackground#09aaaa4d
  • sideBarSectionHeader.background#1c1736
  • sideBarSectionHeader.border#41367d
  • statusBar.background#1c1736
  • statusBar.border#41367d
  • statusBar.debuggingBackground#1c1736
  • statusBar.foreground#d4ccff
  • statusBar.noFolderBackground#1c1736
  • statusBarItem.activeBackground#7e70c266
  • statusBarItem.hoverBackground#7e70c233
  • tab.activeBackground#251f47
  • tab.activeBorder#41367d
  • tab.activeBorderTop#93f20d
  • tab.activeForeground#d4ccff
  • tab.border#41367d
  • tab.inactiveBackground#1c1736
  • tab.inactiveForeground#d4ccffcc
  • tab.unfocusedActiveBorder#41367d
  • tab.unfocusedActiveBorderTop#93f20d
  • terminal.ansiBlack#4e3d7d
  • terminal.ansiBlue#6da8ff
  • terminal.ansiBrightBlack#4e3d7d
  • terminal.ansiBrightBlue#6da8ff
  • terminal.ansiBrightCyan#00cbc0
  • terminal.ansiBrightGreen#83d411
  • terminal.ansiBrightMagenta#ff75f1
  • terminal.ansiBrightRed#ff6882
  • terminal.ansiBrightWhite#f7f1ff
  • terminal.ansiBrightYellow#f29324
  • terminal.ansiCyan#00cbc0
  • terminal.ansiGreen#83d411
  • terminal.ansiMagenta#ff75f1
  • terminal.ansiRed#ff6882
  • terminal.ansiWhite#f7f1ff
  • terminal.ansiYellow#f29324
  • terminal.background#1c1736
  • terminal.foreground#d4ccff
  • textBlockQuote.background#00000000
  • textBlockQuote.border#d4ccff
  • textLink.activeForeground#93f20d
  • textLink.foreground#93f20d
  • textPreformat.foreground#0bdada
  • titleBar.activeBackground#1c1736
  • titleBar.activeForeground#d4ccff
  • titleBar.border#41367d
  • titleBar.inactiveBackground#1c1736
  • titleBar.inactiveForeground#d4ccffb3
  • toolbar.activeBackground#7e70c280
  • toolbar.hoverBackground#7e70c24d
  • tree.indentGuidesStroke#41367d80
  • widget.border#41367d
  • widget.shadow#1c1736

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#d4ccff
emphasisitalic
strongbold
header#83d411
comment, punctuation.definition.comment#8f8aa8
constant.language#ff9933
constant.regexp#ffb366
support.class.component, entity.name.tag#c6e996
entity.name.tag.css#d4ccff
entity.other.attribute-name#0bdada
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#0bdada
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#09aaaa
invalid#ff6882
markup.underlineunderline
markup.bold#0bdadabold
markup.heading#83d411bold
markup.italic#0bdadaitalic
markup.strikethroughstrikethrough
markup.inserted#6da8ff
markup.deleted#ff6882
markup.changed#f29324
punctuation.definition.quote.begin.markdown#9b89f5
punctuation.definition.list.begin.markdown#9b89f5
markup.inline.raw#0bdada
punctuation.definition.tag#9b89f5
meta.preprocessor, entity.name.function.preprocessor#0bdada
meta.preprocessor.string#ffb366
constant.numeric, meta.preprocessor.numeric#ffcc99
meta.structure.dictionary.key.python#83d411
source.diff#9b89f5
meta.diff.header#f7f1ff
storage#d4ccff
source.java storage.type, source.go storage.type#0bdada
storage.type#83d411
storage.modifier, keyword.operator.noexcept#83d411
string, meta.embedded.assembly, constant.other.symbol#ffb366
string.tag#ffb366
string.value#ffb366
string.regexp#ffb366
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#9b89f5
meta.template.expression, meta.interpolation#d4ccff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#c6e996
keyword#83d411
keyword.control#83d411
keyword.operator.type.annotation#9b89f5
keyword.operator#83d411
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#83d411
keyword.other.unit#ff9933
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#9b89f5
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4ccff
variable.language#09aaaa
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#9efafa
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#0bdada
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#0bdada
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#83d411
variable, meta.definition.variable.name, support.variable, entity.name.variable#d4ccff
meta.object-literal.key#c6e996
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#9efafa
constant.other.placeholder#83d411
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#ffcc99
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ffcc99
keyword.operator.or.regexp, keyword.control.anchor.regexp#9b89f5
keyword.operator.quantifier.regexp#ffcc99
constant.character, constant.other.option#ffcc99
constant.character.escape#ffcc99
entity.name.label#d4ccff
punctuation, meta.brace#9b89f5
ThemeDatabase All Themes by enes ozturk - VS Code Theme