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#003847
  • badge.background#047aa6
  • button.background#2aa19899
  • debugExceptionWidget.background#00212b
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#00212b
  • dropdown.background#00212b
  • dropdown.border#2aa19899
  • editor.background#002b36
  • editor.foreground#839496
  • editor.lineHighlightBackground#073642
  • editor.selectionBackground#274642
  • editor.selectionHighlightBackground#005a6faa
  • editor.wordHighlightBackground#004454aa
  • editor.wordHighlightStrongBackground#005a6faa
  • editorBracketHighlight.foreground1#268bd2
  • editorBracketHighlight.foreground2#b58900
  • editorBracketHighlight.foreground3#cb4b16
  • editorBracketHighlight.foreground4#2aa198
  • editorBracketHighlight.foreground5#859900
  • editorBracketHighlight.foreground6#d33682
  • editorCursor.foreground#d30102
  • editorGroup.border#00212b
  • editorGroup.dropBackground#2aa19844
  • editorGroupHeader.tabsBackground#004052
  • editorHoverWidget.background#004052
  • editorIndentGuide.activeBackground1#c3e1e180
  • editorIndentGuide.background1#93a1a180
  • editorLineNumber.activeForeground#949494
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorWhitespace.foreground#93a1a180
  • editorWidget.background#00212b
  • errorForeground#ffeaea
  • focusBorder#2aa19899
  • input.background#003847
  • input.foreground#93a1a1
  • input.placeholderForeground#93a1a1aa
  • inputOption.activeBorder#2aa19899
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005a6f
  • list.dropBackground#00445488
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454aa
  • list.inactiveSelectionBackground#00445488
  • minimap.selectionHighlight#274642
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewResult.background#00212b
  • peekViewTitle.background#00212b
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#047aa6
  • quickInputList.focusBackground#005a6f
  • selection.background#2aa19899
  • sideBar.background#00212b
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#00212b
  • statusBar.debuggingBackground#00212b
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#00212b
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • statusBarItem.remoteBackground#2aa19899
  • tab.activeBackground#002b37
  • tab.activeForeground#d6dbdb
  • tab.border#003847
  • tab.inactiveBackground#004052
  • tab.inactiveForeground#93a1a1
  • tab.lastPinnedBorder#2aa19844
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • titleBar.activeBackground#002c39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#859900
constant.numeric#b58900
constant.language.boolean#cb4b16
constant.language.nil#cb4b16
constant.language, support.constant, support.function, variable.other.enummember#268bd2
keyword, storage.modifier.local, storage.type, keyword.operator.wordlike#b58900
keyword.operator, keyword.operator.type, keyword.operator.typecast, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic#839496
entity.name.type, support.type.primitive#6c71c4
entity.name.function#cb4b16
variable.language, variable.other#839496
variable.other.property#93a1a1
meta.preprocessor#cb4b16
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#002b36
comment#586e75italic
string.regexp#dc322f
entity.name.class, entity.name.namespace, entity.name.scope-resolution#268bd2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#dc322f
support.function.construct, keyword.other.new#cb4b16
constant.character, constant.other#cb4b16
entity.other.inherited-class#6c71c4
entity.name.tag#268bd2
punctuation.definition.tag#586e75
entity.other.attribute-name#93a1a1
punctuation.separator.continuation#dc322f
support.variable
support.type, support.class#cb4b16
support.type.exception#cb4b16
support.other.variable
invalid#dc322f
meta.diff, meta.diff.header#268bd2italic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#859900
markup.quote#859900
markup.list#b58900
markup.bold, markup.italic#d33682
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2aa198
markup.heading#268bd2bold
markup.heading.setext#268bd2
ref.matchtext#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

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

Loading...

Solarized Luau - Coding Theme