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#f5f5f3
  • activityBar.border#dcdcda
  • activityBar.foreground#2a7080
  • activityBar.inactiveForeground#8a8d93
  • activityBarBadge.background#2a7080
  • activityBarBadge.foreground#ffffff
  • badge.background#2a7080
  • badge.foreground#ffffff
  • button.background#2a7080
  • button.foreground#ffffff
  • button.hoverBackground#3a8090
  • descriptionForeground#5a5d63
  • dropdown.background#ffffff
  • dropdown.border#dcdcda
  • dropdown.foreground#1a1d23
  • editor.background#fafaf8
  • editor.findMatchBackground#d4e8ec
  • editor.findMatchHighlightBackground#d4e8ec80
  • editor.foreground#1a1d23
  • editor.hoverHighlightBackground#d4e8ec40
  • editor.lineHighlightBackground#f0f0ee80
  • editor.selectionBackground#d4e8ec80
  • editor.selectionHighlightBackground#d4e8ec60
  • editor.wordHighlightBackground#d4e8ec60
  • editor.wordHighlightStrongBackground#d4e8ec80
  • editorBracketHighlight.foreground1#5a5d63
  • editorBracketHighlight.foreground2#5a5d63
  • editorBracketHighlight.foreground3#5a5d63
  • editorBracketHighlight.foreground4#5a5d63
  • editorBracketHighlight.foreground5#5a5d63
  • editorBracketHighlight.foreground6#5a5d63
  • editorBracketHighlight.unexpectedBracket.foreground#b84a5a
  • editorBracketMatch.background#d4e8ec80
  • editorBracketMatch.border#2a7080
  • editorCursor.foreground#2a7080
  • editorError.foreground#b84a5a
  • editorGroupHeader.tabsBackground#ededeb
  • editorGutter.background#fafaf8
  • editorIndentGuide.activeBackground#d0d0ce
  • editorIndentGuide.background#e8e8e6
  • editorInfo.foreground#2a7a8a
  • editorLineNumber.activeForeground#1a1d23
  • editorLineNumber.foreground#b8b8b6
  • editorWarning.foreground#c49a3a
  • editorWhitespace.foreground#d8d8d6
  • focusBorder#2a7080
  • foreground#1a1d23
  • gitDecoration.addedResourceForeground#3d7a5a
  • gitDecoration.conflictingResourceForeground#8a5a2a
  • gitDecoration.deletedResourceForeground#b84a5a
  • gitDecoration.ignoredResourceForeground#b8b8b6
  • gitDecoration.modifiedResourceForeground#c49a3a
  • gitDecoration.untrackedResourceForeground#3d7a5a
  • input.background#ffffff
  • input.border#dcdcda
  • input.foreground#1a1d23
  • input.placeholderForeground#8a8d93
  • inputOption.activeBorder#2a7080
  • list.activeSelectionBackground#d4e8ec
  • list.activeSelectionForeground#1a1d23
  • list.focusBackground#d4e8ec
  • list.highlightForeground#2a7080
  • list.hoverBackground#e2e2e0
  • list.inactiveSelectionBackground#e8e8e6
  • list.inactiveSelectionForeground#1a1d23
  • panel.background#f5f5f3
  • panel.border#dcdcda
  • panelTitle.activeBorder#2a7080
  • panelTitle.activeForeground#1a1d23
  • panelTitle.inactiveForeground#5a5d63
  • peekView.border#2a7080
  • peekViewEditor.background#fafaf8
  • peekViewEditor.matchHighlightBackground#d4e8ec80
  • peekViewResult.background#f5f5f3
  • peekViewResult.selectionBackground#d4e8ec
  • peekViewTitle.background#f5f5f3
  • peekViewTitleDescription.foreground#5a5d63
  • peekViewTitleLabel.foreground#1a1d23
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#a0a0a0
  • scrollbarSlider.background#d0d0ce80
  • scrollbarSlider.hoverBackground#b8b8b6a0
  • selection.background#d4e8ec80
  • sideBar.background#f5f5f3
  • sideBar.border#dcdcda
  • sideBar.foreground#1a1d23
  • sideBarSectionHeader.background#ededeb
  • sideBarSectionHeader.foreground#1a1d23
  • sideBarTitle.foreground#1a1d23
  • statusBar.background#ededeb
  • statusBar.border#dcdcda
  • statusBar.debuggingBackground#2a7080
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5a5d63
  • statusBar.noFolderBackground#ededeb
  • tab.activeBackground#fafaf8
  • tab.activeBorder#2a7080
  • tab.activeBorderTop#2a7080
  • tab.activeForeground#1a1d23
  • tab.border#dcdcda
  • tab.inactiveBackground#f5f5f3
  • tab.inactiveForeground#5a5d63
  • terminal.ansiBlack#1a1d23
  • terminal.ansiBlue#2a7a8a
  • terminal.ansiBrightBlack#5a5d63
  • terminal.ansiBrightBlue#4a9aaa
  • terminal.ansiBrightCyan#3a8a9a
  • terminal.ansiBrightGreen#5a9a6a
  • terminal.ansiBrightMagenta#aa7a9a
  • terminal.ansiBrightRed#cf6679
  • terminal.ansiBrightWhite#f7f7f5
  • terminal.ansiBrightYellow#d4aa4a
  • terminal.ansiCyan#2a7080
  • terminal.ansiGreen#3d7a5a
  • terminal.ansiMagenta#8a5a7a
  • terminal.ansiRed#b84a5a
  • terminal.ansiWhite#e8e8e6
  • terminal.ansiYellow#c49a3a
  • terminal.background#fafaf8
  • terminal.foreground#1a1d23
  • titleBar.activeBackground#f5f5f3
  • titleBar.activeForeground#1a1d23
  • titleBar.border#dcdcda
  • titleBar.inactiveBackground#f7f7f5
  • titleBar.inactiveForeground#5a5d63
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8d93italic
comment.block.documentation, comment.block.javadoc#7a7d83italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#2a7080
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#5a5d63
entity.name.function, meta.function-call, support.function#3a8a9a
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, support.type, support.class#6a5340
entity.other.inherited-class#6a5340
variable, variable.other, variable.parameter, variable.other.readwrite#4a4d53
variable.language, variable.other.constant#5a5c5e
entity.name.tag, meta.tag#2a7080
entity.other.attribute-name#4a4d53
string, string.quoted, string.template#3d6a4a
string.regexp#3d7a5a
constant.character.escape#2a5a3a
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#b84a5a
constant.language, constant.language.boolean#b84a5a
constant.other#5a5c5e
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#5a5d63
meta.brace, punctuation.definition.block, punctuation.definition.parameters#5a5d63
support.constant, support.variable#5a5c5e
meta.decorator, entity.name.function.decorator#6a5340
markup.heading#2a7080bold
markup.italicitalic
markup.boldbold
markup.underline.link#3a8a9a
markup.inline.raw, markup.fenced_code#3d6a4a
markup.inserted#3d7a5a
markup.deleted#b84a5a
markup.changed#c49a3a
invalid, invalid.illegal#b84a5a
Formosa Theme by Takeshi Yu - VS Code Theme