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#002028
  • activityBar.background#0f1419
  • activityBar.border#5619191e
  • activityBar.foreground#0a5c5c
  • activityBar.inactiveForeground#9eacad
  • activityBarBadge.background#0a5c5c
  • activityBarBadge.foreground#9eacad
  • badge.background#0a5c5c
  • badge.foreground#9eacad
  • breadcrumb.activeSelectionForeground#eee8d5
  • breadcrumb.background#0f1419
  • breadcrumb.focusForeground#eee8d5
  • breadcrumb.foreground#9eacad
  • button.background#0a5c5c
  • button.foreground#9eacad
  • button.hoverBackground#0e2a35
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#9eacad
  • button.secondaryHoverBackground#45494e
  • checkbox.background#0f1419
  • checkbox.border#fffffffd
  • checkbox.foreground#adb8b8
  • debugExceptionWidget.background#073642
  • debugExceptionWidget.border#002b36
  • debugToolBar.background#073642
  • debugToolBar.border#002b36
  • diffEditor.border#002b36
  • diffEditor.insertedTextBackground#85990036
  • diffEditor.removedTextBackground#b7211f42
  • diffEditor.removedTextBorder#b7211f00
  • dropdown.background#0f1419
  • dropdown.border#fffffffd
  • dropdown.foreground#adb8b8
  • editor.background#0f1419
  • editor.findMatchBackground#cb4b1656
  • editor.findMatchBorder#cb4b1600
  • editor.findMatchHighlightBackground#ffc10032
  • editor.findMatchHighlightBorder#ffc10036
  • editor.findRangeHighlightBackground#073642
  • editor.findRangeHighlightBorder#073642
  • editor.foldBackground#002b36cb
  • editor.foreground#657b83
  • editor.hoverHighlightBackground#1a626597
  • editor.inactiveSelectionBackground#073642
  • editor.lineHighlightBackground#0e2a35
  • editor.lineHighlightBorder#0e2a35
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#002b36
  • editor.selectionHighlightBackground#1a6265c5
  • editor.selectionHighlightBorder#1a6265d3
  • editor.wordHighlightBackground#1a6265d3
  • editor.wordHighlightStrongBackground#1a62659d
  • editor.wordHighlightStrongBorder#1a6265d3
  • editorBracketHighlight.foreground1#CB4B16
  • editorBracketHighlight.foreground2#CB4B16
  • editorBracketHighlight.foreground3#CB4B16
  • editorBracketHighlight.foreground4#CB4B16
  • editorBracketHighlight.foreground5#CB4B16
  • editorBracketHighlight.foreground6#CB4B16
  • editorBracketHighlight.unexpectedBracket.foreground#F6524F
  • editorBracketMatch.background#002b3666
  • editorBracketMatch.border#087994
  • editorBracketPairGuide.activeBackground1#49AEF5
  • editorBracketPairGuide.activeBackground2#2AA198
  • editorBracketPairGuide.activeBackground3#268BD2
  • editorBracketPairGuide.activeBackground4#25aac2
  • editorBracketPairGuide.activeBackground5#859900
  • editorBracketPairGuide.activeBackground6#B58900
  • editorCodeLens.foreground#657b83
  • editorCursor.background#191919
  • editorCursor.foreground#9eacad
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#dc322f
  • editorGroup.border#002b36
  • editorGroup.dropBackground#ff0000
  • editorGroup.emptyBackground#0f1419
  • editorGroupHeader.border#0f1419
  • editorGroupHeader.tabsBackground#0f1419
  • editorGroupHeader.tabsBorder#0f1419
  • editorGutter.addedBackground#859900
  • editorGutter.background#0f1419
  • editorGutter.commentRangeForeground#657b83
  • editorGutter.deletedBackground#dc322f
  • editorGutter.foldingControlForeground#657b83
  • editorGutter.modifiedBackground#268bd2
  • editorHoverWidget.background#0f1419
  • editorHoverWidget.border#624e15
  • editorHoverWidget.foreground#afb8b8
  • editorIndentGuide.activeBackground1#073642
  • editorIndentGuide.background1#002b36
  • editorInfo.background#268bd200
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#bc5329
  • editorLineNumber.foreground#624e15
  • editorLink.activeForeground#2aa198
  • editorMarkerNavigation.background#002b36
  • editorMarkerNavigationError.background#f8520e
  • editorMarkerNavigationInfo.background#49aef5
  • editorMarkerNavigationWarning.background#ffc100
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#002b36
  • editorStickyScroll.shadow#0f1419
  • editorSuggestWidget.background#0f1419
  • editorSuggestWidget.border#624e15
  • editorSuggestWidget.foreground#afb8b8
  • editorSuggestWidget.highlightForeground#2aa198
  • editorSuggestWidget.selectedBackground#002b36
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#b58900
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0f1419
  • editorWidget.foreground#9eacad
  • editorWidget.resizeBorder#0a5c5c
  • focusBorder#0a5c5c
  • foreground#9EACAD
  • gitDecoration.addedResourceForeground#2aa198
  • gitDecoration.conflictingResourceForeground#6c71c4
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#657b83
  • gitDecoration.modifiedResourceForeground#B58900
  • gitDecoration.stageDeletedResourceForeground#dc322f
  • gitDecoration.stageModifiedResourceForeground#b58900
  • gitDecoration.submoduleResourceForeground#008df3
  • gitDecoration.untrackedResourceForeground#2AA198
  • icon.foreground#9EACAD
  • input.background#0f1419
  • input.border#002B36
  • input.foreground#ADB8B8
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#1a6265
  • inputOption.activeBorder#68072200
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#002b36
  • list.activeSelectionForeground#adb8b8
  • list.dropBackground#002b36
  • list.focusBackground#002b36
  • list.focusForeground#adb8b8
  • list.highlightForeground#2aa198
  • list.hoverBackground#002b36
  • list.hoverForeground#adb8b8
  • list.inactiveSelectionBackground#002b36
  • list.inactiveSelectionForeground#9eacad
  • listFilterWidget.background#1a6265
  • listFilterWidget.noMatchesOutline#002b36
  • listFilterWidget.outline#00000000
  • menu.background#002b36
  • menu.border#00000085
  • menu.foreground#9eacad
  • menu.selectionBackground#073642
  • menu.selectionBorder#00000000
  • menu.selectionForeground#adb8b8
  • menu.separatorBackground#0c433f
  • menubar.selectionBackground#002b36
  • menubar.selectionBorder#00141a
  • menubar.selectionForeground#adb8b8
  • merge.commonContentBackground#344145
  • merge.commonHeaderBackground#495e66
  • merge.currentContentBackground#1a6265
  • merge.currentHeaderBackground#2aa198
  • merge.incomingContentBackground#103956
  • merge.incomingHeaderBackground#1b6497
  • minimap.background#0f1419
  • minimap.errorHighlight#dc322f
  • minimap.findMatchHighlight#cb4b1656
  • minimap.selectionHighlight#002b36
  • minimap.warningHighlight#b58900
  • minimapGutter.addedBackground#859900
  • minimapGutter.deletedBackground#dc322f
  • minimapGutter.modifiedBackground#268bd2
  • notificationCenter.border#624e15
  • notificationCenterHeader.background#002b36
  • notificationCenterHeader.foreground#9eacad
  • notifications.background#002b36
  • notifications.border#073642
  • notifications.foreground#9eacad
  • notificationsErrorIcon.foreground#dc322f
  • notificationsInfoIcon.foreground#49aef5
  • notificationsWarningIcon.foreground#ffc100
  • notificationToast.border#073642
  • panel.background#0f1419
  • panel.border#002b36
  • panelSection.border#002b36
  • panelTitle.activeBorder#2aa198
  • panelTitle.activeForeground#adb8b8
  • panelTitle.inactiveForeground#657b83
  • peekView.border#0e2a35
  • peekViewEditor.background#163541
  • peekViewEditor.matchHighlightBackground#624e15b9
  • peekViewEditor.matchHighlightBorder#ae8b2d
  • peekViewEditorGutter.background#163541
  • peekViewResult.background#0e2a35
  • peekViewResult.fileForeground#9eacad
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#624e15b9
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0e2a35
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#9eacad
  • pickerGroup.border#1a6265
  • pickerGroup.foreground#2aa198
  • progressBar.background#0a5c5c
  • sash.hoverBorder#073642
  • scrollbar.shadow#19455624
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#256aa7
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#c7b2b2
  • sideBar.background#0f1419
  • sideBar.border#002028
  • sideBar.dropBackground#002b36
  • sideBar.foreground#9eacad
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#002028
  • sideBarSectionHeader.foreground#9eacad
  • sideBarStickyScroll.shadow#19455624
  • sideBarTitle.foreground#adb8b8
  • statusBar.background#0f1419
  • statusBar.border#00141a
  • statusBar.debuggingBackground#002b36
  • statusBar.debuggingForeground#adb8b8
  • statusBar.foreground#657b83
  • statusBar.noFolderBackground#0f1419
  • statusBar.noFolderForeground#657b83
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#0a5c5c
  • statusBarItem.remoteForeground#9eacad
  • tab.activeBackground#002b36
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#002b36
  • tab.inactiveBackground#0f1419
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1b6497
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#268bd2
  • terminal.ansiBrightCyan#29eedf
  • terminal.ansiBrightGreen#BAFB00
  • terminal.ansiBrightMagenta#d33682
  • terminal.ansiBrightRed#dc322f
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#FFC100
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#b7211f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.border#002b36
  • terminal.foreground#adb8b8
  • terminal.selectionBackground#00445642
  • terminalCursor.background#0a5c5c
  • terminalCursor.foreground#ffffff
  • textLink.foreground#2aa198
  • titleBar.activeBackground#0f1419
  • titleBar.activeForeground#9eacad
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0f1419
  • titleBar.inactiveForeground#9eacad
  • tree.indentGuidesStroke#002b36
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#586E75
variable.other.constant, punctuation.definition.constant, constant.language, support.constant#CB4B16
constant.numeric#2AA198
constant.other.symbol, constant.other.key, meta.attribute-selector#CB4B16
string#2AA198
entity.name.constant#2AA198
constant.character.escape#A13C11
storage.type#B58900
meta.var.expr storage.type, storage.modifier#859900
keyword.other#2AA198
keyword.operator.spread, keyword.operator.rest, keyword.operator#CB4B16
keyword.control, keyword.control.conditional, keyword.operator.assignment, keyword.operator.type.annotation#859900
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other#A8282D
keyword.other.DML#2AA198
entity.other.attribute-name.html, entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#268BD2
entity.name.tag#859900
entity.name.tag support.class.component#B58900
meta.tag#CB4B16
entity.name#268BD2
variable.other.object#2AA198
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars#9EACAD
meta.array.literal variable#268BD2
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property#268BD2
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property#268BD2
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs#268BD2
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function#268BD2
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable#CB4B16
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit#268BD2
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.other.declaration#9EACAD
entity.other.inherited-class#B58900
variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier#B58900
storage.type.class, storage.type.struct, storage.type.enum, storage.type.union, storage.type.trait, storage.type.interface, storage.type.impl, storage.type.type#859900
storage.type, keyword.control.flowitalic
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, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#268BD2
support.constant.font-name, meta.definition.variable#859900
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#9EACAD
entity.other.attribute-name.id#268BD2
entity.name.tag.css#B58900
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#B58900
meta.property-list#ADB8B8
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#859900
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#2AA198
meta.property-list meta.property-list#9EACAD
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value#9EACAD
keyword.other.unit#2AA198
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#9EACAD
variable.language#CB4B16
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this#CB4B16
variable.other punctuation.definition.variable#9EACAD
text.html constant.character.entity#859900
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html#268BD2
punctuation.definition.group#A13C11
constant.other.character-class.regexp#6C71C4
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp#664D00
keyword.operator.quantifier.regexp#1A6265
constant.character.escape.backslash#A13C11
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#268BD2
markup.boldbold
markup.underlineunderline
markup.italicitalic
message.error#DC322F
punctuation.definition.list_item.markdown#9EACAD
punctuation.separator, punctuation.terminator, punctuation.accessor#859900
string.regexp#29EEDF
entity.name.namespace, meta.namespace#268BD2
markup.inserted#2AA198
markup.deleted#F6524F
markup.changed#9CA0ED
meta.jsx.children, meta.embedded.block#9EACAD
text.html, text.log#9EACAD
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown#D33682bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown#6C71C4bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown#7aa2f7bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown#6d91debold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown#9aa5cebold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown#747ca1bold
markup.italic, markup.italic punctuation#9EACADitalic
markup.bold, markup.bold punctuation#9EACADbold
markup.bold markup.italic, markup.bold markup.italic punctuation#9EACADbold italic
markup.underline, markup.underline punctuationunderline
markup.quote punctuation.definition.blockquote.markdown#4e5579
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown#268BD2
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown#B58900
meta.separator#9EACADbold
markup.table#c0cefc
meta.preprocessor#DC322F
source.env#268BD2
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig#CB4B16
string.quoted#519F98
entity.name.type.parameter, storage.type.generic, punctuation.bracket.angle.tsx, punctuation.definition.typeparameters#CB4B16
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, punctuation.definition.binding-pattern#CB4B16
meta.type, support.type, support.class#B58900
keyword.blade#9EACAD