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#15141B
  • activityBar.border#3E4045
  • activityBar.foreground#FAFEFF
  • activityBar.inactiveForeground#6A6D70
  • activityBarBadge.background#FFE0BC
  • activityBarBadge.foreground#2D2F32
  • button.background#FFE0BC
  • button.foreground#2D2F32
  • button.hoverBackground#FFD09A
  • diffEditor.insertedLineBackground#00800020
  • diffEditor.insertedTextBackground#00800040
  • diffEditor.removedLineBackground#FF000020
  • diffEditor.removedTextBackground#FF000040
  • dropdown.background#34363A
  • dropdown.border#3E4045
  • dropdown.foreground#FAFEFF
  • editor.background#110F18
  • editor.findMatchBackground#7FAAFF
  • editor.findMatchForeground#000000
  • editor.findMatchHighlightBackground#354B7780
  • editor.findMatchHighlightForeground#FAFEFFCC
  • editor.foldBackground#15141B80
  • editor.foreground#FAFEFF
  • editor.inactiveSelectionBackground#5A5A5A80
  • editor.lineHighlightBackground#09151C
  • editor.selectionBackground#7FAAFF
  • editor.selectionForeground#000000
  • editorBracketMatch.background#4040C0
  • editorBracketMatch.border#C0C0C0
  • editorCursor.foreground#FAFEFF
  • editorError.foreground#FF0000
  • editorGutter.background#110F18
  • editorHint.foreground#BCE784
  • editorInfo.foreground#F0E3D0
  • editorLineNumber.activeForeground#FAFEFF
  • editorLineNumber.foreground#6A6D70
  • editorOverviewRuler.border#3E4045
  • editorRuler.foreground#3E4045
  • editorWarning.foreground#66CDFF
  • editorWhitespace.foreground#5A5A5A
  • focusBorder#FFE0BC
  • input.background#34363A
  • input.border#3E4045
  • input.foreground#FAFEFF
  • input.placeholderForeground#6A6D70
  • inputOption.activeBorder#FFE0BC
  • list.activeSelectionBackground#3E4045
  • list.activeSelectionForeground#FAFEFF
  • list.focusBackground#34363A
  • list.focusForeground#FAFEFF
  • list.hoverBackground#34363A
  • list.inactiveSelectionBackground#34363A
  • menu.background#15141B
  • menu.border#3E4045
  • menu.foreground#FAFEFF
  • menu.selectionBackground#3E4045
  • scrollbar.shadow#15141B
  • scrollbarSlider.activeBackground#7FAAFF
  • scrollbarSlider.background#5A5A5A
  • scrollbarSlider.hoverBackground#6A6D70
  • sideBar.background#15141B
  • sideBar.border#3E4045
  • sideBar.foreground#FAFEFF
  • sideBarSectionHeader.background#15141B
  • sideBarSectionHeader.foreground#FAFEFF
  • sideBarTitle.foreground#FAFEFF
  • statusBar.background#15141B
  • statusBar.border#3E4045
  • statusBar.debuggingBackground#CB4C32
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FAFEFF
  • statusBar.noFolderBackground#15141B
  • tab.activeBackground#110F18
  • tab.activeBorderTop#FFE0BC
  • tab.activeForeground#FAFEFF
  • tab.border#3E4045
  • tab.inactiveBackground#15141B
  • tab.inactiveForeground#6A6D70
  • terminal.ansiBlack#2D2F32
  • terminal.ansiBlue#7FAAFF
  • terminal.ansiBrightBlack#5A5A5A
  • terminal.ansiBrightBlue#7FAAFF
  • terminal.ansiBrightCyan#66CDFF
  • terminal.ansiBrightGreen#BCE784
  • terminal.ansiBrightMagenta#FF7FAA
  • terminal.ansiBrightRed#FF4040
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE0BC
  • terminal.ansiCyan#66CDFF
  • terminal.ansiGreen#BCE784
  • terminal.ansiMagenta#FF7FAA
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#FAFEFF
  • terminal.ansiYellow#FFE0BC
  • terminal.background#15141B
  • terminal.foreground#FAFEFF
  • titleBar.activeBackground#15141B
  • titleBar.activeForeground#FAFEFF
  • titleBar.border#3E4045

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, keyword.other, storage.type, storage.modifier, storage.support, constant.language, entity.name.tag, entity.name.tag.pascal#FFE0BCbold
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment, string.regexp#BCE784italic
string.quoted.single, string.quoted.double#7FAAFF
constant.numeric, constant.character#FF7FAA
variable, variable.other, variable.parameter, entity.name, entity.name.function, entity.name.type, support.class, support.constant#FFF9F0
keyword.operator, punctuation, punctuation.terminator, punctuation.separator#FFF9F0
keyword.control.directive, meta.preprocessor#BCE784
source.asm, meta.embedded.asm#F0E3D0
support.attribute, punctuation.definition.annotation, meta.attribute#FFFFFF
support.type.property-name.json, support.type.property-name#FFE0BC
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#C0C0C0
markup.heading, punctuation.definition.heading, entity.name.section#FFE0BCbold
markup.bold#FFE0BCbold
markup.italic#BCE784italic
markup.quote, punctuation.definition.quote#C0C0C0
punctuation.definition.list.begin#66CDFF
markup.inline.raw#FF7FAA
punctuation.definition.markdown, fenced_code.block.language, meta.separator#C0C0C0
markup.strikethrough#808080strikethrough
markup.underline.link#2A7FFFunderline
invalid.illegal, meta.script, source.script#FF0000