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#131313
  • activityBar.border#00000060
  • activityBar.foreground#eeffff
  • activityBarBadge.background#80cbc4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#4a4a4a
  • breadcrumb.activeSelectionForeground#80cbc4
  • breadcrumb.background#161616
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#1a1a1a
  • button.background#61616150
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#c3e88d15
  • diffEditor.removedTextBackground#ff537020
  • dropdown.background#212121
  • dropdown.border#ffffff10
  • editor.background#121212
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#61616150
  • editor.selectionHighlightBackground#ffcc0020
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#ffcc0050
  • editorCursor.foreground#ffcc00
  • editorError.foreground#ff537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.deletedBackground#ff537060
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground1#424242
  • editorIndentGuide.background1#42424270
  • editorLineNumber.activeForeground#848484
  • editorLineNumber.foreground#424242
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorOverviewRuler.border#212121
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#eeffff
  • editorSuggestWidget.highlightForeground#80cbc4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#c3e88d70
  • editorWhitespace.foreground#eeffff40
  • editorWidget.background#1a1a1a
  • editorWidget.border#ff0000
  • editorWidget.resizeBorder#80cbc4
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#ffffff00
  • gitDecoration.conflictingResourceForeground#ffcb6b90
  • gitDecoration.deletedResourceForeground#ff537090
  • gitDecoration.ignoredResourceForeground#84848490
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • input.background#2b2b2b
  • input.border#ffffff10
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputValidation.errorBorder#ff537050
  • inputValidation.infoBorder#82aaff50
  • inputValidation.warningBorder#ffcb6b50
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#80cbc4
  • list.focusBackground#eeffff20
  • list.focusForeground#eeffff
  • list.highlightForeground#80cbc4
  • list.hoverBackground#1a1a1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#80cbc4
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#212121
  • 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#212121
  • notifications.foreground#eeffff
  • panel.background#1a1a1a
  • panel.border#00000060
  • panelTitle.activeBorder#80cbc4
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#eeffff
  • peekView.border#00000030
  • peekViewEditor.background#eeffff05
  • peekViewEditor.matchHighlightBackground#61616150
  • peekViewEditorGutter.background#eeffff05
  • peekViewResult.background#eeffff05
  • peekViewResult.matchHighlightBackground#61616150
  • peekViewResult.selectionBackground#84848470
  • peekViewTitle.background#eeffff05
  • peekViewTitleDescription.foreground#eeffff60
  • pickerGroup.foreground#80cbc4
  • progressBar.background#80cbc4
  • scrollbar.shadow#21212100
  • scrollbarSlider.activeBackground#eeffff20
  • scrollbarSlider.background#eeffff20
  • scrollbarSlider.hoverBackground#eeffff10
  • selection.background#eeffff
  • settings.checkboxBackground#1a1a1a
  • settings.checkboxForeground#eeffff
  • settings.dropdownBackground#1a1a1a
  • settings.dropdownForeground#eeffff
  • settings.headerForeground#80cbc4
  • settings.modifiedItemIndicator#80cbc4
  • settings.numberInputBackground#1a1a1a
  • settings.numberInputForeground#eeffff
  • settings.textInputBackground#1a1a1a
  • settings.textInputForeground#eeffff
  • sideBar.background#101010
  • sideBar.border#00000060
  • sideBar.foreground#848484
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.border#00000060
  • sideBarTitle.foreground#eeffff
  • statusBar.background#141414
  • statusBar.border#00000060
  • statusBar.debuggingBackground#c792ea
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#616161
  • statusBar.noFolderBackground#181818
  • statusBarItem.hoverBackground#4a4a4a20
  • tab.activeBorder#80cbc4
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#848484
  • tab.border#212121
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#848484
  • tab.unfocusedActiveBorder#4a4a4a
  • tab.unfocusedActiveForeground#eeffff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • textLink.activeForeground#eeffff
  • textLink.foreground#80cbc4
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#eeffff
  • titleBar.border#00000060
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#848484
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring#BBBBBBitalic
constant#4EC9B0
constant.character.escape#AFCBFF
entity.name#AFCBFF
entity.name.function#AA93DD
entity.name.tag#AA93DD
entity.name.type, storage.type.cs#4EC9B0
entity.other.attribute-name#afcbffitalic
entity.other.inherited-class#4EC9B0
entity.other.attribute-name.id#4EC9B0
entity.name.function.operator.member.cpp, entity.name.function.operator.cpp, keyword.operator.bitwise.shift.cpp#BBBBBB
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#4EC9B0
entity.name.variable, variable#abdcd2
keyword#4EC9B0
keyword.operator, storage.type.function.arrow.js, meta.brace.round.js, meta.brace.square.js#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.control.directive, constant.other.placeholder.c#AFCBFF
keyword.other.unit#4EC9B0
markup.quote#AFCBFFitalic
markup.heading, entity.name.section#4EC9B0
markup.bold#4EC9B0bold
markup.italic#AFCBFFitalic
markup.inline.raw, markup.fenced_code.block, punctuation.definition.heading.markdown, punctuation.definition.list.begin.markdown#AA93DD
markup.underline.link#AFCBFFitalic
storage#AA93DD
string.quoted, string.template, variable.parameter.function.language.special.self.python#97e0b3
string.regexp#4EC9B0
string.other.link#4EC9B0
support#4EC9B0
support.function#AFCBFF
support.variable#AFCBFF
support.type.property-name, meta.object-literal.key, variable.parameter.js#AA93DD
support.type.property-name.css#AA93DD
variable.language#AA93DDitalic
variable.parameter#AFCBFF
string.template meta.embedded#BBBBBB
punctuation.definition.tag#ffcb6b
punctuation.separator#BBBBBBbold
punctuation.definition.template-expression#AFCBFF
punctuation, punctuation.separator.delimiter.comma.cpp, keyword.control.ternary.java#BBBBBB
punctuation.definition.list#BBBBBB
meta.function-call.generic, support.type.python, keyword.control, constant.other.caps.python, variable.language.special.self.python, keyword.operator.logical.python#AFCBFF
source.python#AA93DD
keyword.operator.logical#AA93DD
support.variable.magic.python#AA93DD
entity.name.type.cpp, entity.name.type.c, storage.type.built-in.c#AA93DD
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp, variable.other.global.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.directive.cpp, keyword.control.c#AFCBFF
support.type.python#AA93DD
keyword.control.flow.js, keyword.control.conditional.js, keyword.control.loop.js, variable.language.this.js#AFCBFF
support.type.primitive.ts, support.class.component.js#AA93DD