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#F7F7F7
  • badge.background#DCDCE2
  • badge.foreground#202020
  • button.background#E9E9EC
  • button.foreground#202020
  • button.hoverBackground#00000008
  • editor.background#FFFFFF
  • editor.findMatchBackground#00000014
  • editor.findMatchHighlightBackground#00000010
  • editor.foreground#202020
  • editor.inactiveSelectionBackground#00000010
  • editor.lineHighlightBackground#00000008
  • editor.selectionBackground#00000010
  • editorCursor.foreground#202020
  • editorGutter.background#FFFFFF
  • editorIndentGuide.activeBackground#B5B5B8
  • editorIndentGuide.background#D0D0D5
  • editorLineNumber.activeForeground#202020
  • editorLineNumber.foreground#C0C1C8
  • editorWhitespace.foreground#D0D0D5
  • editorWidget.background#F7F7F7
  • focusBorder#7A7A7A70
  • input.background#E9E9EC
  • input.foreground#202020
  • list.activeSelectionBackground#00000012
  • list.highlightForeground#202020
  • list.hoverBackground#00000006
  • list.inactiveSelectionBackground#00000008
  • panel.background#F7F7F7
  • scrollbarSlider.activeBackground#B5B5B8
  • scrollbarSlider.background#B5B5B880
  • scrollbarSlider.hoverBackground#B5B5B8
  • sideBar.background#F7F7F7
  • statusBar.background#F7F7F7
  • statusBar.foreground#202020
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#1B63B4
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#1B63B4
  • terminal.ansiBrightCyan#3C9C7A
  • terminal.ansiBrightGreen#3C9C7A
  • terminal.ansiBrightMagenta#706A80
  • terminal.ansiBrightRed#FF4D4D
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D47F34
  • terminal.ansiCyan#3C9C7A
  • terminal.ansiGreen#3C9C7A
  • terminal.ansiMagenta#706A80
  • terminal.ansiRed#C83A4A
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#9A9530
  • terminal.background#FFFFFF
  • terminal.foreground#202020
  • titleBar.activeBackground#F7F7F7
  • titleBar.activeForeground#202020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8A8A90
string#C8742E
keyword, storage.type, storage.modifier#0090D0
constant.numeric#D4534A
constant.language.boolean#D47F34
entity.name.function, support.function, meta.function-call#A85620
entity.name.function.method#B65A16
storage.type, entity.name.type, support.class, support.type#B65A16
variable#303038
variable.other.property#202020
entity.name.namespace#0090D0
keyword.operator#7A7A82
punctuation, meta.brace#8A8A90
entity.name.tag#B65A16
entity.other.attribute-name#0090D0
Qubik Themes by Templin Konstantin - VS Code Theme