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#0D121D
  • activityBar.foreground#EAD9B4
  • activityBar.inactiveForeground#7C8899
  • activityBarBadge.background#E5913A
  • activityBarBadge.foreground#141B2A
  • badge.background#2C3B4D
  • badge.foreground#EAD9B4
  • breadcrumb.focusForeground#EAD9B4
  • breadcrumb.foreground#7C8899
  • button.background#E5913A
  • button.foreground#141B2A
  • button.hoverBackground#DDB05E
  • diffEditor.insertedTextBackground#7FA87122
  • diffEditor.removedTextBackground#CB685422
  • dropdown.background#1E2938
  • dropdown.border#2C3B4D
  • dropdown.foreground#EAD9B4
  • editor.background#141B2A
  • editor.findMatchBackground#DDB05E55
  • editor.findMatchHighlightBackground#DDB05E33
  • editor.foreground#EAD9B4
  • editor.inactiveSelectionBackground#1E2938
  • editor.lineHighlightBackground#1E293880
  • editor.selectionBackground#2C3B4D
  • editorBracketHighlight.foreground1#C9B58B
  • editorBracketHighlight.foreground2#DDB05E
  • editorBracketHighlight.foreground3#8AC6BF
  • editorBracketHighlight.foreground4#C9B58B
  • editorBracketHighlight.foreground5#DDB05E
  • editorBracketHighlight.foreground6#8AC6BF
  • editorBracketHighlight.unexpectedBracket.foreground#CB6854
  • editorBracketMatch.border#8AC6BF
  • editorCursor.foreground#EAD9B4
  • editorError.foreground#CB6854
  • editorGroupHeader.tabsBackground#0D121D
  • editorGutter.addedBackground#7FA871
  • editorGutter.deletedBackground#CB6854
  • editorGutter.modifiedBackground#DDB05E
  • editorHint.foreground#8AC6BF
  • editorHoverWidget.background#1E2938
  • editorHoverWidget.border#2C3B4D
  • editorIndentGuide.activeBackground1#2C3B4D
  • editorIndentGuide.background1#1E2938
  • editorInfo.foreground#649CD6
  • editorLineNumber.activeForeground#DDB05E
  • editorLineNumber.foreground#7C8899
  • editorWarning.foreground#DDB05E
  • editorWhitespace.foreground#2C3B4D
  • editorWidget.background#1E2938
  • editorWidget.border#2C3B4D
  • focusBorder#2C3B4D
  • gitDecoration.addedResourceForeground#7FA871
  • gitDecoration.deletedResourceForeground#CB6854
  • gitDecoration.ignoredResourceForeground#7C8899
  • gitDecoration.modifiedResourceForeground#DDB05E
  • gitDecoration.untrackedResourceForeground#74B0A0
  • input.background#0D121D
  • input.border#2C3B4D
  • input.foreground#EAD9B4
  • input.placeholderForeground#7C8899
  • list.activeSelectionBackground#2C3B4D
  • list.activeSelectionForeground#EAD9B4
  • list.highlightForeground#DDB05E
  • list.hoverBackground#1E2938
  • list.inactiveSelectionBackground#1E2938
  • menu.background#1E2938
  • menu.foreground#EAD9B4
  • menu.selectionBackground#2C3B4D
  • notifications.background#1E2938
  • notifications.foreground#EAD9B4
  • panel.background#141B2A
  • panel.border#2C3B4D
  • panelTitle.activeBorder#E5913A
  • panelTitle.activeForeground#EAD9B4
  • peekView.border#2C3B4D
  • peekViewEditor.background#0D121D
  • peekViewResult.background#0D121D
  • quickInput.background#1E2938
  • quickInputList.focusBackground#2C3B4D
  • scrollbarSlider.background#1E2938AA
  • scrollbarSlider.hoverBackground#2C3B4DAA
  • selection.background#2C3B4D
  • sideBar.background#0D121D
  • sideBar.foreground#C9B58B
  • sideBarSectionHeader.background#0D121D
  • sideBarTitle.foreground#EAD9B4
  • statusBar.background#0D121D
  • statusBar.debuggingBackground#CB6854
  • statusBar.debuggingForeground#141B2A
  • statusBar.foreground#C9B58B
  • statusBar.noFolderBackground#0D121D
  • tab.activeBackground#141B2A
  • tab.activeBorderTop#E5913A
  • tab.activeForeground#EAD9B4
  • tab.inactiveBackground#0D121D
  • tab.inactiveForeground#7C8899
  • terminal.ansiBlack#1E2938
  • terminal.ansiBlue#649CD6
  • terminal.ansiBrightBlack#7C8899
  • terminal.ansiBrightBlue#649CD6
  • terminal.ansiBrightCyan#8AC6BF
  • terminal.ansiBrightGreen#7FA871
  • terminal.ansiBrightMagenta#A188CC
  • terminal.ansiBrightRed#CB6854
  • terminal.ansiBrightWhite#EAD9B4
  • terminal.ansiBrightYellow#DDB05E
  • terminal.ansiCyan#8AC6BF
  • terminal.ansiGreen#7FA871
  • terminal.ansiMagenta#A188CC
  • terminal.ansiRed#CB6854
  • terminal.ansiWhite#C9B58B
  • terminal.ansiYellow#DDB05E
  • terminal.background#141B2A
  • terminal.foreground#EAD9B4
  • titleBar.activeBackground#0D121D
  • titleBar.activeForeground#C9B58B
  • titleBar.inactiveBackground#0D121D
  • titleBar.inactiveForeground#7C8899
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C8899italic
string, string.quoted, punctuation.definition.string#74B0A0
constant.character.escape, string.regexp#8AC6BF
constant.numeric#DDB05E
constant.language, constant.other, variable.other.constant#DDB05E
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression#E5913A
keyword.operator#C9B58B
entity.name.function, support.function, meta.function-call entity.name.function#649CD6
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace#A188CC
support.type.primitive, keyword.type#A188CCitalic
variable, meta.definition.variable, variable.other.readwrite#EAD9B4
variable.parameter#C9B58Bitalic
variable.other.property, meta.object-literal.key, support.type.property-name#EAD9B4
entity.name.tag#E5913A
entity.other.attribute-name#C9B58Bitalic
punctuation, meta.brace#C9B58B
keyword.control.exception, keyword.control.trycatch#CB6854
variable.language#8AC6BFitalic
invalid, invalid.illegal#CB6854
markup.heading, entity.name.section#E5913Abold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#74B0A0
markup.underline.link#649CD6
markup.inserted#7FA871
markup.deleted#CB6854
markup.changed#DDB05E