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#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
  • editorBracketHighlight.foreground1#268bd2
  • editorBracketHighlight.foreground2#b58900
  • editorBracketHighlight.foreground3#d33682
  • editorCursor.foreground#657b83
  • editorGroup.background#fffbf2
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#d9d2c2
  • editorGutter.background#eee8d5
  • editorHoverWidget.background#ccc4b0
  • editorLineNumber.activeForeground#6f7776
  • editorLineNumber.foreground#9ca8a6
  • 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
  • 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#657b83
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#657b83
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#eee8d5
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.foreground#657b83
  • titleBar.activeBackground#eee8d5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#333333ff
meta.embedded, source.groovy.embedded#657B83
comment#93A1A1italic
string#2AA198
string.regexp#D30102
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#073642bold
entity.name.class, entity.name.type#268BD2
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#D30102
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#D30102
constant.character, constant.other#CB4B16
entity.other.inherited-class
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag.begin, punctuation.definition.tag.end#93A1A1
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#D30102
support.constant
support.type, support.class#859900
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#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.inline.raw#2AA198
markup.heading#268BD2
markup.heading.setext#268BD2
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
storage.modifier#859900ff
storage.type#859900ff
keyword.control.import#D33682
storage.modifier.async#859900ff
meta.import#657b83
source.ts#657b83
meta.function-call#657b83
entity.name.type#b58900
entity.name.function#657b83
variable.other#657b83
storage.modifier.tsx#859900
storage.modifier#859900ff
storage.type#859900ff
keyword.control.import#D33682
storage.modifier.async#859900ff
meta.import#657b83
source.ts#657b83
meta.function-call#657b83
entity.name.type#b58900
entity.name.function#657b83
variable.other#657b83
storage.modifier.tsx#859900
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.separator.dictionary.pair.json#657B83
storage.type#268BD2
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#DC3272
support.type.primitive#b58900
keyword.control.import#cb4b16
keyword.control.from#cb4b16
source#657b83

Shiki preview

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

Loading...

Solarized - Coding Theme