Skip to main content
CodingTheme

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#DDD6C1
  • activityBar.dropBackground#EEE8D5
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#FDF6E3
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editor.selectionHighlightBackground#EEE8D5
  • editorCursor.foreground#657B83
  • editorGroup.background#FFFBF2
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground#CCC4B0
  • editorIndentGuide.background#EDE7D3
  • editorLineNumber.activeForeground#666666
  • editorLineNumber.foreground#CCCCCC
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#D3AF86
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8866
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • notification.background#999178
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • progressBar.background#B58900
  • selection.background#CCC4B0
  • sideBar.background#EEE8D5
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • tab.activeBackground#FDF6E3
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#888
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#777
  • terminal.ansiYellow#b58900
  • titleBar.activeBackground#EEE8D5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#999999italic
stringitalic
string, constant.language.boolean.false, constant.language.boolean.true, constant.numeric, string.regexp#5747BC
keyword.other.debugger, support.function.console.js, support.class.console.js#D30102
constant.numeric#333333
variable.language, variable.other#333333
keyword#666666italic
storage#666666italic
entity.name.class, entity.name.type, entity.name.function, punctuation.definition.variable#333333
punctuation.section.embedded.begin, punctuation.section.embedded.end#D30102
constant.language, meta.preprocessor#666666
support.function.construct, keyword.other.new#D30102
constant.character, constant.other#CB4B16
entity.other.inherited-class
variable.parameter
entity.name.tag#333333
punctuation.definition.tag.begin, punctuation.definition.tag.end#666666
entity.other.attribute-name#666666
support.function#333333
punctuation.separator.continuation#D30102
support.constant
support.type, support.class#333333
support.type.exception#CB4B16
support.other.variable
invalid
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#333333italic
markup.list#333333
markup.bold#666666bold
markup.italic#666666italic
markup.inline.raw#2AA198
markup.heading#333333bold
markup.heading.setext#333333

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...