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#EEF3F8
  • activityBar.border#D7DEE8
  • activityBar.foreground#1F2933
  • activityBar.inactiveForeground#52606D
  • activityBarBadge.background#FF781D
  • activityBarBadge.foreground#1F2933
  • badge.background#FF781D
  • badge.foreground#1F2933
  • button.background#FF781D
  • button.foreground#1F2933
  • button.hoverBackground#FF8A2A
  • button.secondaryBackground#EEF3F8
  • button.secondaryForeground#1F2933
  • button.secondaryHoverBackground#E3EAF2
  • commandCenter.border#D7DEE8
  • descriptionForeground#52606D
  • diffEditor.insertedLineBackground#00824816
  • diffEditor.insertedTextBackground#00824822
  • diffEditor.removedLineBackground#B12C5216
  • diffEditor.removedTextBackground#B12C5224
  • disabledForeground#7C8796
  • dropdown.background#FBFCFE
  • dropdown.border#D7DEE8
  • dropdown.foreground#1F2933
  • editor.background#FBFCFE
  • editor.findMatchBackground#FF781D55
  • editor.findMatchHighlightBackground#A35B0038
  • editor.findRangeHighlightBackground#EEF3F888
  • editor.foreground#1F2933
  • editor.hoverHighlightBackground#D2E9FF66
  • editor.inactiveSelectionBackground#C9D6E355
  • editor.lineHighlightBackground#F3F7FB
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#CFE6FF
  • editor.selectionHighlightBackground#FF781D22
  • editor.wordHighlightBackground#C9D6E366
  • editor.wordHighlightStrongBackground#FF781D24
  • editorBracketHighlight.foreground1#1F2933
  • editorBracketHighlight.foreground2#005FB8
  • editorBracketHighlight.foreground3#8A3FFC
  • editorBracketHighlight.foreground4#C44F00
  • editorBracketHighlight.foreground5#008248
  • editorBracketHighlight.foreground6#007C89
  • editorBracketHighlight.unexpectedBracket.foreground#B12C52
  • editorBracketMatch.background#FF781D1F
  • editorBracketMatch.border#005FB8
  • editorCursor.background#FBFCFE
  • editorCursor.foreground#FF781D
  • editorError.foreground#B12C52
  • editorGroup.border#D7DEE8
  • editorGroupHeader.tabsBackground#F3F7FB
  • editorGroupHeader.tabsBorder#D7DEE8
  • editorGutter.addedBackground#008248
  • editorGutter.background#FBFCFE
  • editorGutter.deletedBackground#B12C52
  • editorGutter.modifiedBackground#FF781D
  • editorHint.foreground#008248
  • editorIndentGuide.activeBackground1#8A94A3
  • editorIndentGuide.background1#D7DEE8
  • editorInfo.foreground#005FB8
  • editorLineNumber.activeForeground#52606D
  • editorLineNumber.foreground#667085
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#B12C52CC
  • editorOverviewRuler.findMatchForeground#FF781D99
  • editorOverviewRuler.infoForeground#005FB899
  • editorOverviewRuler.warningForeground#A35B00CC
  • editorWarning.foreground#A35B00
  • editorWhitespace.foreground#D7DEE8
  • errorForeground#B12C52
  • focusBorder#FF781D88
  • foreground#1F2933
  • gitDecoration.addedResourceForeground#008248
  • gitDecoration.deletedResourceForeground#B12C52
  • gitDecoration.ignoredResourceForeground#667085
  • gitDecoration.modifiedResourceForeground#C44F00
  • gitDecoration.untrackedResourceForeground#007C89
  • input.background#FBFCFE
  • input.border#D7DEE8
  • input.foreground#1F2933
  • input.placeholderForeground#667085
  • inputOption.activeBorder#FF781D
  • inputValidation.errorBackground#FFF0F0
  • inputValidation.errorBorder#B12C52
  • inputValidation.infoBackground#EAF4FF
  • inputValidation.infoBorder#005FB8
  • inputValidation.warningBackground#FFF7E0
  • inputValidation.warningBorder#A35B00
  • list.activeSelectionBackground#D2E9FF
  • list.activeSelectionForeground#17202A
  • list.activeSelectionIconForeground#17202A
  • list.errorForeground#B12C52
  • list.focusOutline#00000000
  • list.highlightForeground#C44F00
  • list.hoverBackground#E3F0FF
  • list.hoverForeground#17202A
  • list.inactiveSelectionBackground#EAF4FF
  • list.inactiveSelectionForeground#1F2933
  • list.warningForeground#A35B00
  • menu.background#FBFCFE
  • menu.foreground#1F2933
  • menu.selectionBackground#D2E9FF
  • menu.selectionForeground#17202A
  • menu.separatorBackground#D7DEE8
  • notifications.background#FBFCFE
  • notifications.border#D7DEE8
  • notifications.foreground#1F2933
  • panel.background#FBFCFE
  • panel.border#D7DEE8
  • panelTitle.activeBorder#FF781D
  • panelTitle.activeForeground#17202A
  • panelTitle.inactiveForeground#667085
  • peekView.border#9BC8F4
  • peekViewEditor.background#FBFCFE
  • peekViewEditor.matchHighlightBackground#FF781D30
  • peekViewResult.background#F3F7FB
  • peekViewResult.selectionBackground#D2E9FF
  • peekViewTitle.background#F3F7FB
  • peekViewTitleLabel.foreground#17202A
  • progressBar.background#FF781D
  • scrollbar.shadow#D7DEE8
  • scrollbarSlider.activeBackground#FF781D88
  • scrollbarSlider.background#AEBAC866
  • scrollbarSlider.hoverBackground#7C8796A6
  • sideBar.background#F3F7FB
  • sideBar.border#D7DEE8
  • sideBar.foreground#1F2933
  • sideBarSectionHeader.background#EEF3F8
  • sideBarSectionHeader.border#D7DEE8
  • sideBarSectionHeader.foreground#1F2933
  • sideBarTitle.foreground#1F2933
  • statusBar.background#EEF3F8
  • statusBar.border#D7DEE8
  • statusBar.debuggingBackground#C44F00
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#1F2933
  • statusBar.noFolderBackground#EEF3F8
  • statusBarItem.hoverBackground#E3EAF2
  • statusBarItem.prominentBackground#EEF3F8
  • statusBarItem.remoteBackground#FF781D
  • statusBarItem.remoteForeground#1F2933
  • tab.activeBackground#FBFCFE
  • tab.activeBorderTop#FF781D
  • tab.activeForeground#17202A
  • tab.border#D7DEE8
  • tab.hoverBackground#E9F1F8
  • tab.hoverForeground#1F2933
  • tab.inactiveBackground#EEF3F8
  • tab.inactiveForeground#52606D
  • tab.unfocusedActiveBorderTop#8A94A3
  • terminal.ansiBlack#1F2933
  • terminal.ansiBlue#005FB8
  • terminal.ansiBrightBlack#667085
  • terminal.ansiBrightBlue#0066CC
  • terminal.ansiBrightCyan#007A99
  • terminal.ansiBrightGreen#007A3D
  • terminal.ansiBrightMagenta#8038C2
  • terminal.ansiBrightRed#B8325A
  • terminal.ansiBrightWhite#1F2933
  • terminal.ansiBrightYellow#B15C00
  • terminal.ansiCyan#007C89
  • terminal.ansiGreen#008248
  • terminal.ansiMagenta#8A3FFC
  • terminal.ansiRed#B12C52
  • terminal.ansiWhite#52606D
  • terminal.ansiYellow#A35B00
  • terminal.background#FBFCFE
  • terminal.foreground#1F2933
  • terminalCursor.foreground#FF781D
  • textBlockQuote.background#F3F7FB
  • textBlockQuote.border#C9D6E3
  • textCodeBlock.background#F3F7FB
  • textLink.activeForeground#C44F00
  • textLink.foreground#005FB8
  • textPreformat.foreground#A35B00
  • textSeparator.foreground#D7DEE8
  • titleBar.activeBackground#F3F7FB
  • titleBar.activeForeground#1F2933
  • titleBar.border#D7DEE8
  • titleBar.inactiveBackground#F3F7FBCC
  • titleBar.inactiveForeground#52606D
  • tree.indentGuidesStroke#D7DEE8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#667085italic
meta.jsx.children, meta.jsx.children.tsx, meta.jsx.children.js, text.html.basic, text.html.derivative, text.html.markdown#1F2933—
string, markup.inline.raw, string.template#008248—
constant.numeric, constant.language, constant.character.escape#7A3DB8—
keyword, storage, storage.type, storage.modifier#C44F00—
variable.language.this, variable.language.this.ts, variable.language.this.js#C44F00—
keyword.operator.new, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.expression.new, keyword.operator.expression.new.js, keyword.operator.expression.new.ts, keyword.control.new#C44F00—
keyword.operator.typeof, keyword.operator.typeof.js, keyword.operator.typeof.jsx, keyword.operator.typeof.ts, keyword.operator.typeof.tsx, keyword.operator.expression.typeof, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.jsx, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx#B12C8F—
keyword.operator, storage.type.function.arrow#52606D—
entity.name.function, support.function, meta.function-call, variable.function, meta.member.access entity.name.function, meta.member.access variable.function, meta.property.access entity.name.function, meta.property.object entity.name.function#005FB8—
variable, variable.other, variable.other.readwrite, meta.definition.variable.name, support.variable#1F2933—
variable.other.property, meta.object-literal.key, support.variable.property#007C89—
variable.parameter, meta.parameters#B12C8F—
entity.name.type, entity.name.class, entity.name.interface, entity.other.inherited-class, support.type, support.class#8A3FFC—
meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.decorator entity.name.function, meta.decorator support.function, meta.decorator support.type, meta.decorator variable.other#B12C8F—
attribute.name, entity.other.attribute-name#007C89—
punctuation, meta.brace, meta.delimiter#52606D—
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.vue, entity.name.tag.svelte, entity.name.tag.localname, support.class.component#005FB8—
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.vue, punctuation.definition.tag.svelte#667085—
invalid, invalid.illegal#B12C52bold