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#8300ea
  • activityBar.background#e6f1f0
  • activityBar.border#bdd3d1
  • activityBar.foreground#8300ea
  • activityBar.inactiveForeground#003836
  • activityBarBadge.background#8300ea
  • activityBarBadge.foreground#fff
  • activityBarTop.activeBorder#8300ea
  • activityBarTop.dropBorder#8300ea
  • activityBarTop.foreground#8300ea
  • activityBarTop.inactiveForeground#003836
  • badge.background#8300ea
  • badge.foreground#fff
  • breadcrumb.background#fff
  • button.background#007671
  • button.border#007671
  • button.foreground#fff
  • button.hoverBackground#007671e6
  • button.secondaryBackground#e6f1f0
  • button.secondaryForeground#007671
  • button.secondaryHoverBackground#ffffffe6
  • button.separator#ffffff4d
  • commandCenter.activeBackground#e6f1f0
  • commandCenter.activeBorder#bdd3d1
  • commandCenter.background#e6f1f0
  • commandCenter.border#bdd3d1
  • commandCenter.foreground#003836
  • commandCenter.inactiveBorder#bdd3d1
  • commandCenter.inactiveForeground#bdd3d1
  • debugToolBar.background#e6f1f0
  • diffEditor.border#bdd3d1
  • diffEditor.diagonalFill#001d1b1a
  • diffEditor.insertedLineBackground#a9cfff40
  • diffEditor.insertedTextBackground#a9cfff40
  • diffEditor.removedLineBackground#ff769440
  • diffEditor.removedTextBackground#ff769440
  • diffEditorGutter.insertedLineBackground#a9cfff40
  • diffEditorGutter.removedLineBackground#ff769440
  • diffEditorOverview.insertedForeground#006fd6
  • diffEditorOverview.removedForeground#d2004f
  • disabledForeground#708583
  • dropdown.background#fff
  • dropdown.border#708583
  • dropdown.foreground#003836
  • dropdown.listBackground#fff
  • editor.background#fff
  • editor.findMatchBackground#ff9e5d80
  • editor.findMatchHighlightBackground#ff9e5d80
  • editor.findRangeHighlightBackground#dabe0080
  • editor.foldBackground#00000000
  • editor.foreground#003836
  • editor.inactiveSelectionBackground#6fdb554d
  • editor.lineHighlightBackground#0038360d
  • editor.rangeHighlightBackground#dabe0040
  • editor.selectionBackground#6fdb554d
  • editor.wordHighlightBackground#7bc3ff80
  • editor.wordHighlightStrongBackground#de9dff80
  • editorBracketHighlight.foreground1#8156c0
  • editorBracketHighlight.foreground2#bb4717
  • editorBracketHighlight.foreground3#448502
  • editorBracketHighlight.foreground4#8156c0
  • editorBracketHighlight.foreground5#bb4717
  • editorBracketHighlight.foreground6#448502
  • editorBracketHighlight.unexpectedBracket.foreground#bb005e
  • editorBracketMatch.background#de9dff80
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#bb005e
  • editorGroup.border#bdd3d1
  • editorGroup.dropBackground#6fdb554d
  • editorGroupHeader.border#bdd3d1
  • editorGroupHeader.noTabsBackground#f9fdfc
  • editorGroupHeader.tabsBackground#e6f1f0
  • editorGroupHeader.tabsBorder#bdd3d1
  • editorGutter.addedBackground#006fd6
  • editorGutter.deletedBackground#d2004f
  • editorGutter.modifiedBackground#a200e9
  • editorHoverWidget.background#fefedf
  • editorHoverWidget.border#838267
  • editorIndentGuide.activeBackground1#00383680
  • editorIndentGuide.background1#0038361a
  • editorLightBulb.foreground#ff9e5d
  • editorLightBulbAutoFix.foreground#dabe00
  • editorLineNumber.activeForeground#003836
  • editorLineNumber.foreground#708583
  • editorLink.activeForeground#0009fb
  • editorOverviewRuler.border#bdd3d140
  • editorRuler.foreground#bdd3d180
  • editorStickyScroll.border#bdd3d1
  • editorSuggestWidget.background#fefedf
  • editorSuggestWidget.border#838267
  • editorWidget.background#e6f1f0
  • editorWidget.border#708583
  • editorWidget.foreground#003836
  • editorWidget.resizeBorder#e6f1f0
  • errorForeground#d2004f
  • focusBorder#8300ea
  • foreground#003836
  • gitDecoration.conflictingResourceForeground#008188
  • gitDecoration.deletedResourceForeground#d2004f
  • gitDecoration.ignoredResourceForeground#00383666
  • gitDecoration.modifiedResourceForeground#006fd6
  • gitDecoration.untrackedResourceForeground#a200e9
  • icon.foreground#003836
  • input.background#fff
  • input.border#708583
  • input.placeholderForeground#708583
  • inputOption.activeBorder#003836
  • keybindingLabel.background#00000000
  • keybindingLabel.border#bdd3d1
  • keybindingLabel.bottomBorder#bdd3d1
  • keybindingLabel.foreground#003836
  • list.activeSelectionBackground#8300ea
  • list.activeSelectionForeground#fff
  • list.activeSelectionIconForeground#fff
  • list.dropBackground#6fdb554d
  • list.errorForeground#d2004f
  • list.focusForeground#003836
  • list.focusHighlightForeground#fff
  • list.highlightForeground#8300ea
  • list.hoverBackground#7085831a
  • list.inactiveSelectionBackground#70858326
  • list.inactiveSelectionForeground#003836
  • list.inactiveSelectionIconForeground#003836
  • list.warningForeground#b74700
  • menu.background#e6f1f0
  • menu.border#bdd3d1
  • menu.foreground#003836
  • menu.separatorBackground#bdd3d1
  • merge.currentContentBackground#a9cfff40
  • merge.currentHeaderBackground#a9cfffa6
  • merge.incomingContentBackground#ff769440
  • merge.incomingHeaderBackground#ff7694a6
  • notificationCenterHeader.background#e6f1f0
  • notificationCenterHeader.foreground#003836
  • notificationLink.foreground#0009fb
  • notifications.background#e6f1f0
  • notifications.foreground#003836
  • notificationToast.border#708583
  • panel.background#f9fdfc
  • panel.border#bdd3d1
  • panelSection.border#bdd3d1
  • panelSectionHeader.border#bdd3d1
  • panelTitle.activeBorder#8300ea
  • panelTitle.activeForeground#8300ea
  • panelTitle.inactiveForeground#003836
  • peekView.border#838267
  • peekViewEditor.background#fefedf
  • peekViewResult.background#fefedf
  • peekViewResult.fileForeground#003836
  • peekViewResult.lineForeground#003836
  • peekViewTitle.background#fefedf
  • peekViewTitleDescription.foreground#003836
  • peekViewTitleLabel.foreground#003836
  • pickerGroup.border#bdd3d1
  • progressBar.background#003836
  • quickInput.background#e6f1f0
  • quickInputList.focusBackground#8300ea
  • quickInputList.focusForeground#fff
  • quickInputList.focusIconForeground#fff
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#00383699
  • scrollbarSlider.background#00383633
  • scrollbarSlider.hoverBackground#00383680
  • settings.checkboxBackground#fff
  • settings.dropdownBackground#fff
  • settings.headerForeground#003836
  • settings.modifiedItemIndicator#8300ea
  • settings.numberInputBackground#fff
  • settings.rowHoverBackground#e6f1f040
  • settings.textInputBackground#fff
  • sideBar.background#e6f1f0
  • sideBar.border#bdd3d1
  • sideBar.dropBackground#6fdb554d
  • sideBarSectionHeader.background#e6f1f0
  • sideBarSectionHeader.border#bdd3d1
  • statusBar.background#e6f1f0
  • statusBar.border#bdd3d1
  • statusBar.debuggingBackground#e6f1f0
  • statusBar.foreground#003836
  • statusBar.noFolderBackground#e6f1f0
  • statusBarItem.errorBackground#bb005e
  • statusBarItem.errorForeground#fff
  • statusBarItem.errorHoverBackground#bb005e
  • statusBarItem.errorHoverForeground#fff
  • statusBarItem.remoteBackground#e6f1f0
  • statusBarItem.remoteForeground#003836
  • tab.activeBackground#fff
  • tab.activeBorder#bdd3d1
  • tab.activeBorderTop#8300ea
  • tab.activeForeground#001d1b
  • tab.border#bdd3d1
  • tab.inactiveBackground#e6f1f0
  • tab.inactiveForeground#003836
  • tab.unfocusedActiveBorder#bdd3d1
  • tab.unfocusedActiveBorderTop#8300ea
  • terminal.ansiBlack#484848
  • terminal.ansiBlue#006fd6
  • terminal.ansiBrightBlack#484848
  • terminal.ansiBrightBlue#006fd6
  • terminal.ansiBrightCyan#008188
  • terminal.ansiBrightGreen#080
  • terminal.ansiBrightMagenta#a200e9
  • terminal.ansiBrightRed#d2004f
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#b74700
  • terminal.ansiCyan#008188
  • terminal.ansiGreen#080
  • terminal.ansiMagenta#a200e9
  • terminal.ansiRed#d2004f
  • terminal.ansiWhite#fff
  • terminal.ansiYellow#b74700
  • terminal.background#f9fdfc
  • terminal.foreground#001d1b
  • terminal.tab.activeBorder#8300ea
  • textBlockQuote.background#00000000
  • textBlockQuote.border#001d1b
  • textLink.activeForeground#0009fb
  • textLink.foreground#0009fb
  • textPreformat.foreground#337d00
  • titleBar.activeBackground#e6f1f0
  • titleBar.activeForeground#003836
  • titleBar.border#bdd3d1
  • titleBar.inactiveBackground#e6f1f0
  • titleBar.inactiveForeground#708583
  • toolbar.activeBackground#70858366
  • toolbar.hoverBackground#70858333
  • tree.indentGuidesStroke#00383640
  • widget.border#bdd3d1
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#001d1b
emphasisitalic
strongbold
header#7900d8bold
comment, punctuation.definition.comment#717171italic
constant.language#337d00bold
constant.regexp#337d00
support.class.component, entity.name.tag#bd2b00
entity.name.tag.css#001d1b
entity.other.attribute-name#56009f
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#56009f
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#a62300bold
invalid#bb005e
markup.underline#0009fbunderline
markup.bold#7900d8bold
markup.heading#7900d8bold
markup.italic#7900d8italic
markup.strikethroughstrikethrough
markup.inserted#006fd6
markup.deleted#d2004f
markup.changed#b74700
punctuation.definition.quote.begin.markdown#8156c0
punctuation.definition.list.begin.markdown#8156c0
markup.inline.raw#337d00
punctuation.definition.tag#8156c0
meta.preprocessor, entity.name.function.preprocessor#bd2b00
meta.preprocessor.string#337d00
constant.numeric, meta.preprocessor.numeric, entity.other.keyframe-offset.percentage.css#337d00
meta.structure.dictionary.key.python#7900d8bold
source.diff#8156c0
meta.diff.header#fff
storage#001d1b
source.java storage.type, source.go storage.type#a62300bold
storage.type#7900d8bold
storage.modifier, keyword.operator.noexcept#7900d8bold
string, meta.embedded.assembly, constant.other.symbol#337d00
string.tag#7900d8bold
string.value#337d00
string.regexp#337d00
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#8156c0
meta.template.expression, meta.interpolation#001d1b
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#007c77
keyword#7900d8bold
keyword.control#7900d8bold
keyword.operator.type.annotation#8156c0
keyword.operator#8156c0
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#7900d8bold
keyword.other.unit#337d00bold
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8156c0
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#001d1b
variable.language#337d00bold
meta.attribute, variable.other.property, variable.other.object.property#007c77
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#bd2b00
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#a62300bold
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a62300bold
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#7900d8bold
variable, meta.definition.variable.name, support.variable, entity.name.variable#001d1b
variable.parameter#007c77
meta.object-literal.key, variable.object.property, source.json support.type.property-name#56009f
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#337d00bold
constant.other.placeholder#7900d8bold
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#007c77
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#007c77
keyword.operator.or.regexp, keyword.control.anchor.regexp#007c77
keyword.operator.quantifier.regexp#007c77
constant.character, constant.other.option#007c77
constant.character.escape#007c77
entity.name.label#001d1b
punctuation, meta.brace#8156c0
ThemeDatabase All Themes by enes ozturk - VS Code Theme