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#141f1a
  • activityBar.border#2a3830
  • activityBar.foreground#6ABA7A
  • activityBar.inactiveForeground#5a7060
  • activityBarBadge.background#6ABA7A
  • activityBarBadge.foreground#141f1a
  • badge.background#6ABA7A
  • badge.foreground#141f1a
  • button.background#6ABA7A
  • button.foreground#141f1a
  • button.hoverBackground#8ADA9A
  • descriptionForeground#a0a8a0
  • dropdown.background#243530
  • dropdown.border#2a3830
  • dropdown.foreground#e8e4df
  • editor.background#1a2822
  • editor.findMatchBackground#6ABA7A50
  • editor.findMatchHighlightBackground#6ABA7A40
  • editor.foreground#e8e4df
  • editor.hoverHighlightBackground#6ABA7A20
  • editor.lineHighlightBackground#243530
  • editor.selectionBackground#6ABA7A40
  • editor.selectionHighlightBackground#6ABA7A30
  • editor.wordHighlightBackground#6ABA7A30
  • editor.wordHighlightStrongBackground#6ABA7A50
  • editorBracketHighlight.foreground1#a0a8a0
  • editorBracketHighlight.foreground2#a0a8a0
  • editorBracketHighlight.foreground3#a0a8a0
  • editorBracketHighlight.foreground4#a0a8a0
  • editorBracketHighlight.foreground5#a0a8a0
  • editorBracketHighlight.foreground6#a0a8a0
  • editorBracketHighlight.unexpectedBracket.foreground#e07070
  • editorBracketMatch.background#6ABA7A50
  • editorBracketMatch.border#6ABA7A
  • editorCursor.foreground#6ABA7A
  • editorError.foreground#e07070
  • editorGroupHeader.tabsBackground#101a15
  • editorGutter.background#1a2822
  • editorIndentGuide.activeBackground#3a4840
  • editorIndentGuide.background#2a3830
  • editorInfo.foreground#5BBCD6
  • editorLineNumber.activeForeground#e8e4df
  • editorLineNumber.foreground#4a6055
  • editorWarning.foreground#e0b050
  • editorWhitespace.foreground#3a4840
  • focusBorder#6ABA7A
  • foreground#e8e4df
  • gitDecoration.addedResourceForeground#6ABA7A
  • gitDecoration.conflictingResourceForeground#c08050
  • gitDecoration.deletedResourceForeground#e07070
  • gitDecoration.ignoredResourceForeground#3a4a40
  • gitDecoration.modifiedResourceForeground#e0b050
  • gitDecoration.untrackedResourceForeground#6ABA7A
  • input.background#243530
  • input.border#2a3830
  • input.foreground#e8e4df
  • input.placeholderForeground#5a7060
  • inputOption.activeBorder#6ABA7A
  • list.activeSelectionBackground#6ABA7A40
  • list.activeSelectionForeground#e8e4df
  • list.focusBackground#6ABA7A40
  • list.highlightForeground#6ABA7A
  • list.hoverBackground#2a3830
  • list.inactiveSelectionBackground#2a3830
  • list.inactiveSelectionForeground#e8e4df
  • panel.background#141f1a
  • panel.border#2a3830
  • panelTitle.activeBorder#6ABA7A
  • panelTitle.activeForeground#e8e4df
  • panelTitle.inactiveForeground#a0a8a0
  • peekView.border#6ABA7A
  • peekViewEditor.background#1a2822
  • peekViewEditor.matchHighlightBackground#6ABA7A50
  • peekViewResult.background#141f1a
  • peekViewResult.selectionBackground#6ABA7A40
  • peekViewTitle.background#141f1a
  • peekViewTitleDescription.foreground#a0a8a0
  • peekViewTitleLabel.foreground#e8e4df
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#5a6860
  • scrollbarSlider.background#3a484080
  • scrollbarSlider.hoverBackground#4a5850a0
  • selection.background#6ABA7A40
  • sideBar.background#141f1a
  • sideBar.border#2a3830
  • sideBar.foreground#e8e4df
  • sideBarSectionHeader.background#101a15
  • sideBarSectionHeader.foreground#e8e4df
  • sideBarTitle.foreground#e8e4df
  • statusBar.background#101a15
  • statusBar.border#2a3830
  • statusBar.debuggingBackground#6ABA7A
  • statusBar.debuggingForeground#141f1a
  • statusBar.foreground#a0a8a0
  • statusBar.noFolderBackground#101a15
  • tab.activeBackground#1a2822
  • tab.activeBorder#6ABA7A
  • tab.activeBorderTop#6ABA7A
  • tab.activeForeground#e8e4df
  • tab.border#2a3830
  • tab.inactiveBackground#141f1a
  • tab.inactiveForeground#a0a8a0
  • terminal.ansiBlack#141f1a
  • terminal.ansiBlue#5BBCD6
  • terminal.ansiBrightBlack#5a7060
  • terminal.ansiBrightBlue#7BCCE6
  • terminal.ansiBrightCyan#AAEABA
  • terminal.ansiBrightGreen#9AEAAA
  • terminal.ansiBrightMagenta#c090b0
  • terminal.ansiBrightRed#f09090
  • terminal.ansiBrightWhite#f0ece7
  • terminal.ansiBrightYellow#f0c060
  • terminal.ansiCyan#8ADA9A
  • terminal.ansiGreen#6ABA7A
  • terminal.ansiMagenta#b080a0
  • terminal.ansiRed#e07070
  • terminal.ansiWhite#e8e4df
  • terminal.ansiYellow#e0b050
  • terminal.background#1a2822
  • terminal.foreground#e8e4df
  • titleBar.activeBackground#141f1a
  • titleBar.activeForeground#e8e4df
  • titleBar.border#2a3830
  • titleBar.inactiveBackground#101a15
  • titleBar.inactiveForeground#a0a8a0
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a7060italic
comment.block.documentation, comment.block.javadoc#6a8070italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#6ABA7A
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#a0a8a0
entity.name.function, meta.function-call, support.function#8ADA9A
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, support.type, support.class#c09860
entity.other.inherited-class#c09860
variable, variable.other, variable.parameter, variable.other.readwrite#E8DCD0
variable.language, variable.other.constant#e07080
entity.name.tag, meta.tag#6ABA7A
entity.other.attribute-name#E8DCD0
string, string.quoted, string.template#5BBCD6
string.regexp#6ACCE6
constant.character.escape#7BCCE6
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#e07080
constant.language, constant.language.boolean#e07080
constant.other#e07080
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#a0a8a0
meta.brace, punctuation.definition.block, punctuation.definition.parameters#a0a8a0
support.constant, support.variable#e07080
meta.decorator, entity.name.function.decorator#c09860
markup.heading#6ABA7Abold
markup.italicitalic
markup.boldbold
markup.underline.link#8ADA9A
markup.inline.raw, markup.fenced_code#5BBCD6
markup.inserted#6ABA7A
markup.deleted#e07070
markup.changed#e0b050
invalid, invalid.illegal#e07070
Formosa Theme by Takeshi Yu - VS Code Theme