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#ECEEF1
  • activityBar.foreground#333333
  • activityBarBadge.background#184B64
  • activityBarBadge.foreground#ffffff
  • badge.background#184B64
  • badge.foreground#ffffff
  • button.background#404754
  • debugToolBar.background#ECEEF1
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#ECEEF1
  • dropdown.border#ECEEF1
  • editor.background#ECEEF1
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#ffffff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#333333
  • editor.lineHighlightBackground#ECEEF1
  • editor.selectionBackground#e0e0e0
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#99aab526
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#748B97
  • editorCursor.foreground#748B97
  • editorError.foreground#9a2a2a
  • editorGhostText.foreground#333333
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#ECEEF1
  • editorGroupHeader.tabsBackground#ECEEF1
  • editorHoverWidget.background#ECEEF1
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#737984
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#ECEEF1
  • editorRuler.foreground#99aab526
  • editorSuggestWidget.background#ECEEF1
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.foreground#333333
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#DB7F67
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#ECEEF1
  • editorWidget.foreground#333333
  • errorForeground#9a2a2a
  • focusBorder#464646
  • icon.foreground#333333
  • input.background#ECEEF1
  • input.foreground#333333
  • list.activeSelectionBackground#e0e0e0
  • list.activeSelectionForeground#333333
  • list.errorForeground#9a2a2a
  • list.focusBackground#e0e0e0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#e8e8e8
  • list.inactiveSelectionBackground#e0e0e0
  • list.inactiveSelectionForeground#333333
  • list.warningForeground#DB7F67
  • menu.foreground#c8c8c8
  • notificationsErrorIcon.foreground#9a2a2a
  • notificationsInfoIcon.foreground#038268
  • notificationsWarningIcon.foreground#DB7F67
  • panel.foreground#333333
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#666666
  • peekViewEditor.background#ECEEF1
  • peekViewEditor.matchHighlightBackground#67769680
  • peekViewResult.background#ECEEF1
  • problemsErrorIcon.foreground#9a2a2a
  • problemsInfoIcon.foreground#038268
  • problemsWarningIcon.foreground#DB7F67
  • quickInput.foreground#333333
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#ECEEF1
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#ECEEF1
  • statusBar.background#ECEEF1
  • statusBar.debuggingBackground#DB7F67
  • statusBar.debuggingBorder#ff7651
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#ECEEF1
  • statusBarItem.errorBackground#9a2a2a
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#DB7F67
  • statusBarItem.remoteForeground#f8fafd
  • statusBarItem.warningBackground#DB7F67
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#ECEEF1
  • tab.activeBadgeBackground#184B64
  • tab.activeBadgeForeground#ffffff
  • tab.activeForeground#333333
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#ECEEF1
  • tab.inactiveBadgeBackground#184B64
  • tab.inactiveBadgeForeground#ffffff
  • tab.inactiveForeground#666666
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#038268
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#99aab5
  • terminal.ansiBrightGreen#038268
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#9a2a2a
  • terminal.ansiBrightWhite#23272f
  • terminal.ansiBrightYellow#E6BA5C
  • terminal.ansiCyan#99aab5
  • terminal.ansiGreen#038268
  • terminal.ansiMagenta#9a2a2a
  • terminal.ansiRed#184B64
  • terminal.ansiWhite#23272f
  • terminal.ansiYellow#E6BA5C
  • terminal.foreground#333333
  • terminal.iconForeground#333333
  • terminal.tab.activeForeground#333333
  • terminal.tabs.buttonForeground#333333
  • terminalCursor.foreground#333333
  • textLink.foreground#038268
  • titleBar.activeBackground#ECEEF1
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#ECEEF1
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#748B97
constant#DB7F67
emphasis#FF0000bold
entity.name.function#038268
entity.name.type#E6BA5C
entity.name.variable#038268
entity.name.variable.field#038268
invalid#9a2a2abold italic
keyword#9a2a2a
markup.boldbold
markup.italicitalic
markup.bold markup.italicbold italic
markup.heading#9a2a2abold
markup.underline.link#9a2a2aitalic
string.other.link.title.markdown, string.other.link.description.markdown#038268
markup.inline.raw#E6BA5C
markup.raw#E6BA5C
markup.heading punctuation, punctuation.definition.bold, punctuation.definition.italic, markup.fenced_code.block punctuation, fenced_code.block.language, punctuation.definition.quote#748B97
markup.quote#184B64
#038268italic
punctuation.definition.list.begin, meta.separator.markdown#038268
punctuation#96A6AF
storage.modifier#9a2a2a
storage.type#E6BA5C
string#DB7F67
strong#FF0000bold
variable#184B64
storage.type.struct.cpp, storage.type.built-in.primitive.cpp#9a2a2a
variable.parameter.cpp#038268
meta.preprocessor.csbold
variable.other.object.property.end.csbold
variable.other.object.property.underscore.csitalic
variable.other.object.property.end.cs variable.other.object.property.underscore.csbold italic
entity.name.tag.css, entity.name.tag.wildcard.css#9a2a2a
entity.other.attribute-name.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-element.css#E6BA5C
entity.other.attribute-name.class.css#038268
entity.other.attribute-name.pseudo-class.css#038268italic
support.type.property-name.css#184B64
support.type.vendored.property-name.css#184B64italic
meta.property-value.css, support.constant.property-value.css#038268
support.constant.vendored.property-value.css#038268italic
source.js meta.tag.attributes keyword.operator.assignment, source.js.jsx meta.tag.attributes keyword.operator.assignment, source.tsx meta.tag.attributes keyword.operator.assignment#96A6AF
source.tsx entity.name.tag, source.js entity.name.tag, source.jsx entity.name.tag#184B64
source.js support.class.component, source.js.jsx support.class.component, source.tsx support.class.component#184B64bold
source.js entity.other.attribute-name, source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name#038268
source.tsx storage.type, source.tsx storage.type.function, source.tsx storage.type.function.arrow, source.jsx storage.type, source.jsx storage.type.function, source.jsx storage.type.function.arrow#9a2a2a
entity.name.tag.html#184B64
entity.other.attribute-name.html#038268
source.http http.requestheaders#184B64
source.http string.other.http#038268
source.http http.requestline#E6BA5C
source.vue entity.name.tag#30bced
source.vue support.class.component.html#30bcedbold
source.vue entity.other#E6BA5Cbold
storage.type.primitive.array.java, storage.type.primitive.java, variable.language.this.java#9a2a2a
variable.other.definition.java, variable.parameter.java#038268
meta.method.body.java#184B64
meta.object-literal.key.js, support.variable.property.js#184B64
storage.type.function.arrow.js, variable.language.this.js, storage.type.class.jsdoc#9a2a2a
meta.brace.round.js#96A6AF
source.js support.constant, source.js support.class, source.js support.type, source.js support.variable, source.js entity.other#E6BA5Cbold
source.js support.function#038268bold
storage.type.js, storage.type.class.js, storage.type.function.js, storage.type.property.js#9a2a2a
support.type.property-name.json#184B64
string.quoted.double.json#038268
constant.language.json#DB7F67
constant.numeric.json#9a2a2a
punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.array.json#96A6AF
source.php entity.name.type, source.php support.class.php, source.php keyword.other.type.php#E6BA5C
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, source.php storage.type.class.php, source.php support.function.construct.output.php, source.php storage.type.function.php#9a2a2a
source.php punctuation.definition.variable.php#184B64
source.php support.function#038268bold
entity.name.tag.reference.scss, entity.name.tag.wildcard.scss#9a2a2a
meta.property-value.scss#038268
entity.other.attribute-name.attribute.scss#E6BA5C
source.ts storage.type, variable.language.this.ts#9a2a2a
source.ts support.constant, source.ts support.class, source.ts support.type, source.ts support.variable, source.ts entity.other#E6BA5Cbold
source.ts support.function#038268bold
keyword.operator.type.annotation.ts#99aab5
support.function.json.ts#038268
meta.object-literal.key.ts, support.variable.property.ts#184B64
source.yaml constant#9a2a2a
source.yaml string.unquoted#038268
source.yaml entity.name.tag.yaml#184B64
source.python storage.type.function#9a2a2a
source.python meta.function-call#038268
source.python meta.function-call.arguments#184B64
source.python entity.name.function.decorator#038268
source.python support.type#E6BA5Cbold
source.python#184B64
source.python punctuation.definition.list.begin#96A6AF
source.python support.function.builtin#038268bold
source.go#184B64
source.go support.function#038268
source.ts support.type#E6BA5C
Colorado Theme by StevenJBorik - VS Code Theme