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.background#263238
  • activityBar.border#26323860
  • activityBar.foreground#EEFFFF
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#546E7A
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#263238
  • breadcrumb.focusForeground#EEFFFF
  • breadcrumb.foreground#607a86
  • breadcrumbPicker.background#263238
  • button.background#80CBC420
  • debugToolBar.background#263238
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#263238
  • dropdown.border#FFFFFF10
  • editor.background#263238
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff30
  • editor.foreground#EEFFFF
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#80CBC420
  • editor.selectionHighlightBackground#FFCC0020
  • editorBracketMatch.background#263238
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#FF537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#263238
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#263238
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#37474F
  • editorIndentGuide.background#37474F70
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#607a86
  • editorLineNumber.foreground#37474F
  • editorLink.activeForeground#EEFFFF
  • editorMarkerNavigation.background#EEFFFF05
  • editorOverviewRuler.border#263238
  • editorOverviewRuler.errorForeground#FF537040
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#37474F
  • editorSuggestWidget.background#263238
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#EEFFFF
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#EEFFFF40
  • editorWidget.background#263238
  • editorWidget.border
  • editorWidget.resizeBorder#80CBC4
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#FF537090
  • gitDecoration.ignoredResourceForeground#607a8690
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#303C41
  • input.border#FFFFFF10
  • input.foreground#EEFFFF
  • input.placeholderForeground#EEFFFF60
  • inputOption.activeBackground#EEFFFF30
  • inputOption.activeBorder#EEFFFF30
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#263238
  • list.activeSelectionForeground#80CBC4
  • list.focusBackground#EEFFFF20
  • list.focusForeground#EEFFFF
  • list.highlightForeground#80CBC4
  • list.hoverBackground#263238
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80CBC4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#263238
  • menu.foreground#EEFFFF
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#EEFFFF
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#263238
  • notifications.foreground#EEFFFF
  • panel.background#263238
  • panel.border#26323860
  • panel.dropBackground#EEFFFF
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#EEFFFF
  • peekView.border#00000030
  • peekViewEditor.background#EEFFFF05
  • peekViewEditor.matchHighlightBackground#80CBC420
  • peekViewEditorGutter.background#EEFFFF05
  • peekViewResult.background#EEFFFF05
  • peekViewResult.matchHighlightBackground#80CBC420
  • peekViewResult.selectionBackground#607a8670
  • peekViewTitle.background#EEFFFF05
  • peekViewTitleDescription.foreground#EEFFFF60
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • scrollbar.shadow#26323800
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#EEFFFF20
  • scrollbarSlider.hoverBackground#EEFFFF10
  • selection.background#80CBC4
  • settings.checkboxBackground#263238
  • settings.checkboxForeground#EEFFFF
  • settings.dropdownBackground#263238
  • settings.dropdownForeground#EEFFFF
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#263238
  • settings.numberInputForeground#EEFFFF
  • settings.textInputBackground#263238
  • settings.textInputForeground#EEFFFF
  • sideBar.background#263238
  • sideBar.border#26323860
  • sideBar.foreground#607a86
  • sideBarSectionHeader.background#263238
  • sideBarSectionHeader.border#26323860
  • sideBarTitle.foreground#EEFFFF
  • statusBar.background#263238
  • statusBar.border#26323860
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#546E7A
  • statusBar.noFolderBackground#263238
  • statusBarItem.hoverBackground#546E7A20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#607a86
  • tab.border#263238
  • tab.inactiveBackground#263238
  • tab.inactiveForeground#607a86
  • tab.unfocusedActiveBorder#546E7A
  • tab.unfocusedActiveForeground#EEFFFF
  • terminal.ansiBlack#676e95
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#676e95
  • terminal.ansiBrightBlue#b2e4e6
  • terminal.ansiBrightCyan#b2e4e6
  • terminal.ansiBrightGreen#87de97
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#f2f3ec
  • terminal.ansiBrightYellow#f78c6c
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#dceaea
  • terminal.ansiYellow#ffcb6b
  • terminal.background#263238
  • terminal.foreground#DDEEEE
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#EEFFFF
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#263238
  • titleBar.activeForeground#EEFFFF
  • titleBar.border#26323860
  • titleBar.inactiveBackground#263238
  • titleBar.inactiveForeground#607a86
  • tree.indentGuidesStroke#37474F
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ddeeee
invalid, invalid.illegal#ff5370
invalid.deprecated#f78c6c
*url*, *link*, *uri*underline
storage.modifier.pointer, storage.modifier.reference#b2e4e6
punctuation.separator.pointer-access#b2e4e6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#89ddff
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#f78c6c
source.css variable#f2f3ec
source.css support.type.property-name#dceaea
comment, punctuation.definition.comment, string.quoted.docstring#676e95italic
keyword.type, entity.name.tag, meta.tag.sgml, entity.name.type.struct, support.type, support.class, support.type.sys-types, support.type.built-in#f07178
string, constant.other.symbol#c3e88d
entity.name, entity.other.attribute-name#ffcb6b
entity.name.function, variable.function#82aaff
keyword, storage#c792eabold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable#89ddff
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder#dceaea
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#ff5370
string.other.link#87de97
entity.name.type.parameter, entity.name.type.type-parameter, variable.other.generic-type#f78c6c
keyword.operator, support.function#b2e4e6
keyword.other#c792ea
punctuation.definition.tag, punctuation.definition, punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.separator#b2e4e6
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field#f2f3ec
markup.inserted#c3e88d
markup.deleted#f07178
markup.changed#ffcb6b
markup.deleted.git_gutter#f07178
markup.inserted.git_gutter#c3e88d
markup.changed.git_gutter#ffcb6b
markup.untracked.git_gutter#ff5370
markup.ignored.git_gutter#676e95
constant.other.haskell#f07178
storage.type.haskell#ffcb6b
source.js storage, source.js keyword.declaration#ffcb6b
constant.other.key meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c3e88d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#89ddff
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#89ddffitalic
source.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffcb6b
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f78c6c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c3e88d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82aaff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#89ddff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c792ea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dceaea
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f2f3ec
markup.bold, markup.bold string#f07178bold
markup.italic#c792eaitalic
markup.underline#c3e88dunderline
markup.strike#676e95strike
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ff5370bold
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.setext#f07178bold
constant.other.reference.link.markdown, string.other.link.title.markdown#ffcb6b
markup.raw, markup.fenced_code, markup.inline.raw#82aaff
string.other.link.description.title.markdown#c792ea
markup.table#89ddff
markup.quote#89ddffitalic
text.html.markdown, punctuation.definition.list_item.markdown#dceaea
variable.language.fenced.markdown#f2f3ec
source.purescript entity.name.type#ffcb6b
source.purescript entity.name.class#f78c6c
storage.type.string.python#b2e4e6
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime#f78c6c