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.activeBorder#268BD2
  • activityBar.background#EEE8D5
  • activityBar.foreground#556B72
  • activityBar.inactiveForeground#7B8787
  • activityBarBadge.background#268BD2
  • activityBarBadge.foreground#FDF6E3
  • badge.background#268BD2
  • badge.foreground#FDF6E3
  • button.background#268BD2
  • button.foreground#FDF6E3
  • debugExceptionWidget.background#FCF8ED
  • debugExceptionWidget.border#DC322F
  • debugToolBar.background#FCF8ED
  • dropdown.background#FCF8ED
  • dropdown.border#E1DBCD
  • dropdown.foreground#556B72
  • editor.background#FDF6E3
  • editor.foreground#556B72
  • editor.lineHighlightBackground#F2E6CE
  • editor.selectionBackground#D8D1BD
  • editor.selectionHighlightBackground#D8EAF0AA
  • editor.wordHighlightBackground#EEE8D5AA
  • editor.wordHighlightStrongBackground#D8EAF0AA
  • editorBracketHighlight.foreground1#268BD2
  • editorBracketHighlight.foreground2#D33682
  • editorBracketHighlight.foreground3#859900
  • editorCursor.foreground#268BD2
  • editorError.foreground#DC322F
  • editorGroup.border#E1DBCD
  • editorGroup.dropBackground#268BD244
  • editorGroupHeader.tabsBackground#EEE8D5
  • editorHoverWidget.background#FCF8ED
  • editorIndentGuide.activeBackground#96A7A9A0
  • editorIndentGuide.background#D6D6D680
  • editorLineNumber.activeForeground#556B72
  • editorMarkerNavigationError.background#F8D8D4
  • editorMarkerNavigationWarning.background#F5E9C8
  • editorWhitespace.foreground#96A7A980
  • editorWidget.background#FCF8ED
  • errorForeground#DC322F
  • focusBorder#268BD299
  • input.background#FFFBF0
  • input.foreground#556B72
  • input.placeholderForeground#7B8787AA
  • inputOption.activeBorder#268BD299
  • inputValidation.errorBackground#F8D8D4
  • inputValidation.errorBorder#DC322F
  • inputValidation.infoBackground#E7F2F7
  • inputValidation.infoBorder#268BD2
  • inputValidation.warningBackground#F5E9C8
  • inputValidation.warningBorder#B58900
  • list.activeSelectionBackground#D8EAF0
  • list.activeSelectionForeground#073642
  • list.dropBackground#EEE8D588
  • list.errorForeground#D33682
  • list.foreground#556B72
  • list.highlightForeground#268BD2
  • list.hoverBackground#EEE8D5AA
  • list.hoverForeground#073642
  • list.inactiveSelectionBackground#EEE8D588
  • list.inactiveSelectionForeground#556B72
  • minimap.selectionHighlight#D8D1BD
  • panel.border#E1DBCD
  • peekView.border#E1DBCD
  • peekViewEditor.background#FCF7E8
  • peekViewEditor.matchHighlightBackground#268BD240
  • peekViewResult.background#FCF8ED
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#E1DBCD
  • pickerGroup.foreground#268BD2
  • ports.iconRunningProcessForeground#859900
  • progressBar.background#268BD2
  • quickInputList.focusBackground#D8EAF0
  • quickInputList.focusForeground#073642
  • selection.background#268BD244
  • sideBar.background#FCF8ED
  • sideBar.foreground#556B72
  • sideBarSectionHeader.background#EEE8D5
  • sideBarSectionHeader.foreground#556B72
  • sideBarTitle.foreground#556B72
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#556B72
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#FCF8ED
  • statusBarItem.prominentHoverBackground#FCF8ED
  • statusBarItem.remoteBackground#268BD299
  • tab.activeBackground#FDF6E3
  • tab.activeForeground#556B72
  • tab.border#E1DBCD
  • tab.inactiveBackground#EEE8D5
  • tab.inactiveForeground#7B8787
  • tab.lastPinnedBorder#268BD244
  • 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#EEE8D5
  • titleBar.activeForeground#556B72
  • titleBar.inactiveBackground#EEE8D5
  • titleBar.inactiveForeground#7B8787

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#556B72
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#556B72
comment#96A7A9italic
string.quoted.docstring#35A69C
string#2AA198
string.regexp#DC322F
constant.numeric#6C71C4
variable.language, variable.other#268BD2
keyword#859900
storage#859900bold
entity.name.class, entity.name.namespace, entity.name.scope-resolution#556B72
entity.name.type#B58900italic
entity.name.function#B58900
punctuation.definition.variable#268BD2
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#6C71C4
support.function.construct, keyword.other.new#268BD2
constant.character, constant.other#6C71C4
entity.other.inherited-class#6C71C4
variable.parameter
entity.name.tag#268BD2
punctuation.definition.tag#96A7A9
entity.other.attribute-name#7B8787
support.function#D33682italic
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#B58900italic
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#6C71C4
markup.boldbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#DC322Fbold
markup.heading.setext#DC322F
variable.parameter.definition.label.latex, meta.definition.label.latex#D33682
meta.function.section.section.latex#6C71C4
constant.other.reference.citation.latex, constant.other.reference.label.latex#D33682
meta.function.section.subsection.latex#268BD2
constant.character.math.tex, constant.numeric.math.tex, constant.other.math.tex, constant.character.escape.tex, punctuation.math, support.class.math#268BD2
support.function.be.latex#859900
meta.function.environment.math.latex#268BD2
constant.language.boolean.yaml#2AA198
doom-solarized by QuarkQuartet - VS Code Theme