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.activeBorder#ff8c00
  • activityBar.background#1e3a8a
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ff8c00
  • activityBarBadge.foreground#ffffff
  • badge.background#ff8c00
  • badge.foreground#ffffff
  • button.background#1e3a8a
  • button.foreground#ffffff
  • button.hoverBackground#3b82f6
  • dropdown.background#ffffff
  • dropdown.border#dcdcdc
  • dropdown.foreground#2e2e2e
  • editor.background#fafafa
  • editor.findMatchBackground#ff8c00
  • editor.findMatchHighlightBackground#ffd699
  • editor.foreground#2e2e2e
  • editor.lineHighlightBackground#e5e7eb
  • editor.lineHighlightBorder#dcdcdc
  • editor.selectionBackground#a5b4fc
  • editor.selectionHighlightBackground#c7d2fe
  • editorBracketMatch.background#c7d2fe
  • editorBracketMatch.border#1e3a8a
  • editorCursor.foreground#1e3a8a
  • editorGroupHeader.tabsBackground#f5f5dc
  • editorIndentGuide.activeBackground#1e3a8a
  • editorIndentGuide.background#d1d5db
  • editorLineNumber.activeForeground#1e3a8a
  • editorLineNumber.foreground#7a7a7a
  • editorWhitespace.foreground#dcdcdc
  • focusBorder#ff8c00
  • gitDecoration.conflictingResourceForeground#ff8c00
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.modifiedResourceForeground#3b82f6
  • gitDecoration.untrackedResourceForeground#10b981
  • input.background#ffffff
  • input.border#dcdcdc
  • input.foreground#2e2e2e
  • input.placeholderForeground#7a7a7a
  • inputOption.activeBorder#ff8c00
  • list.activeSelectionBackground#a5b4fc
  • list.activeSelectionForeground#1e3a8a
  • list.focusBackground#c7d2fe
  • list.highlightForeground#ff8c00
  • list.hoverBackground#e5e7eb
  • minimap.background#ffffff
  • minimapSlider.activeBackground#d1d5dbbb
  • minimapSlider.background#d1d5db66
  • minimapSlider.hoverBackground#d1d5db99
  • panel.background#f5f5dc
  • panel.border#dcdcdc
  • panelTitle.activeBorder#ff8c00
  • panelTitle.activeForeground#1e3a8a
  • panelTitle.inactiveForeground#7a7a7a
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#c7d2febb
  • scrollbarSlider.background#c7d2fe66
  • scrollbarSlider.hoverBackground#c7d2fe99
  • sideBar.background#f5f5dc
  • sideBar.foreground#2e2e2e
  • sideBarSectionHeader.background#e2e8f0
  • sideBarSectionHeader.foreground#1e3a8a
  • sideBarTitle.foreground#2e2e2e
  • statusBar.background#1e3a8a
  • statusBar.debuggingBackground#ff8c00
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#e2e8f0
  • statusBarItem.hoverBackground#ff8c00
  • tab.activeBackground#ffffff
  • tab.activeBorder#ff8c00
  • tab.activeForeground#1e3a8a
  • tab.border#dcdcdc
  • tab.inactiveBackground#f0f4f8
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#1e3a8a
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#e879f9
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightYellow#fbbf24
  • terminal.ansiCyan#0ea5e9
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#d946ef
  • terminal.ansiRed#ef4444
  • terminal.ansiYellow#f59e0b
  • terminal.background#fafafa
  • terminal.foreground#2e2e2e
  • titleBar.activeBackground#1e3a8a
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#e2e8f0
  • titleBar.inactiveForeground#2e2e2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7a7aitalic
string, string.quoted, string.template#10b981
keyword, storage.type, storage.modifier#1e3a8abold
keyword.operator, punctuation.accessor#ff8c00
variable, variable.other#2e2e2e
variable.parameter#2e2e2eitalic
entity.name.function, support.function#3b82f6
meta.function-call#3b82f6
entity.name.class, entity.name.type.class, support.class#ff8c00bold
entity.name.type, support.type#d946ef
entity.name.type.interface#d946efitalic
constant.numeric#f59e0b
constant, constant.language, constant.character#ff8c00
constant.language.boolean#ef4444bold
variable.other.property, support.variable.property#1e3a8a
meta.object-literal.key#1e3a8a
entity.name.tag, punctuation.definition.tag#ff8c00
entity.other.attribute-name#ff8c00italic
punctuation, meta.brace#2e2e2e
string.regexp#d946ef
constant.character.escape#ef4444
meta.decorator, punctuation.decorator#3b82f6
invalid, invalid.illegal#ef4444strikethrough
markup.heading, entity.name.section#1e3a8abold
markup.bold#1e3a8abold
markup.italic#2e2e2eitalic
markup.underline.link#3b82f6
markup.inline.raw, markup.fenced_code#10b981
support.type.property-name.json#1e3a8a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff8c00
support.type.property-name.css#10b981
support.constant.property-value.css#f59e0b