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#292524
  • activityBar.border#44403c
  • activityBar.foreground#a8a29e
  • activityBarBadge.background#44403c
  • badge.background#44403c
  • badge.foreground#f5f5f4
  • button.background#1c1917
  • checkbox.background#292524
  • checkbox.border#44403c
  • checkbox.foreground#e7e5e4
  • debugIcon.breakpointCurrentStackframeForeground#60a5fa
  • debugIcon.breakpointDisabledForeground#57534e
  • debugIcon.breakpointForeground#f87171
  • debugIcon.breakpointStackframeForeground#60a5fa
  • debugIcon.breakpointUnverifiedForeground#57534e
  • debugIcon.continueForeground#f87171
  • debugIcon.disconnectForeground#f87171
  • debugIcon.pauseForeground#f87171
  • debugIcon.restartForeground#60a5fa
  • debugIcon.startForeground#60a5fa
  • debugIcon.stepBackForeground#f87171
  • debugIcon.stepIntoForeground#f87171
  • debugIcon.stepOutForeground#f87171
  • debugIcon.stepOverForeground#f87171
  • debugIcon.stopForeground#60a5fa
  • diffEditor.insertedTextBackground#14532d
  • diffEditor.removedTextBackground#7f1d1d
  • dropdown.background#292524
  • editor.activeSelectionForeground#44403c
  • editor.background#1c1917
  • editor.foreground#d6d3d1
  • editor.inactiveSelectionBackground#44403c
  • editor.lineHighlightBackground#292524
  • editor.lineHighlightBorder#292524
  • editor.selectionBackground#44403c
  • editorBracketHighlight.foreground1#ffe4e6
  • editorBracketHighlight.foreground2#fecdd3
  • editorBracketHighlight.foreground3#fda4af
  • editorBracketHighlight.foreground4#fb7185
  • editorBracketHighlight.foreground5#f43f5e
  • editorBracketHighlight.foreground6#e11d48
  • editorBracketHighlight.unexpectedBracket.foreground#be123c
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#292524
  • editorGroupHeader.tabsBorder#292524
  • editorIndentGuide.activeBackground#44403c
  • editorIndentGuide.background#1c1917
  • editorLineNumber.activeForeground#fafaf9
  • editorLineNumber.foreground#78716c
  • editorRuler.foreground#1c1917
  • editorSuggestWidget.background#292524
  • editorWhitespace.foreground#292524
  • editorWidget.background#292524
  • editorWidget.border#44403c
  • editorWidget.foreground#d6d3d1
  • focusBorder#44403c
  • foreground#e7e5e4
  • gitDecoration.ignoredResourceForeground#57534e
  • input.background#1c1917
  • input.foreground#e7e5e4
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#1c1917
  • list.activeSelectionForeground#f5f5f4
  • list.focusBackground#1c1917
  • list.highlightForeground#e7e5e4
  • list.hoverBackground#44403c
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#1c1917
  • list.inactiveSelectionForeground#fafaf9
  • panel.border#44403c
  • panelTitle.activeBorder#1c1917
  • panelTitle.activeForeground#fafaf9
  • panelTitle.inactiveForeground#484848
  • peekView.border#44403c
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#e7e5e4
  • progressBar.background#fafaf9
  • scrollbar.shadow#1c1917
  • sideBar.background#292524
  • sideBar.border#44403c
  • sideBar.foreground#a8a29e
  • sideBarSectionHeader.background#292524
  • statusBar.background#292524
  • statusBar.border#44403c
  • statusBar.debuggingBackground#292524
  • statusBar.foreground#a8a29e
  • statusBar.noFolderBackground#292524
  • statusBarItem.prominentBackground#fafaf9
  • statusBarItem.remoteBackground#29252400
  • statusBarItem.remoteForeground#a8a29e
  • symbolIcon.classForeground#fb923c
  • symbolIcon.constructorForeground#c084fc
  • symbolIcon.enumeratorForeground#fb923c
  • symbolIcon.enumeratorMemberForeground#60a5fa
  • symbolIcon.eventForeground#fb923c
  • symbolIcon.fieldForeground#60a5fa
  • symbolIcon.functionForeground#c084fc
  • symbolIcon.interfaceForeground#60a5fa
  • symbolIcon.methodForeground#c084fc
  • symbolIcon.variableForeground#60a5fa
  • tab.activeBackground#1c1917
  • tab.activeBorder#1c1917
  • tab.activeBorderTop#60a5fa
  • tab.activeForeground#fafaf9
  • tab.activeModifiedBorder#fb7185
  • tab.inactiveBackground#292524
  • tab.inactiveForeground#78716c
  • terminal.ansiBlack#292524
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#44403c
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightMagenta#c084fc
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightWhite#fafaf9
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#a855f7
  • terminal.ansiRed#f43f5e
  • terminal.ansiWhite#f5f5f4
  • terminal.ansiYellow#facc15
  • terminal.border#292524
  • textLink.activeForeground#fafaf9
  • textLink.foreground#CCC
  • titleBar.activeBackground#292524
  • titleBar.border#44403c
  • titleBar.inactiveBackground#292524

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#f87171bold
markup.italic.markdownitalic
meta.link.inline.markdown#38bdf8underline
comment, string.quoted.docstring.multi#fde047
entity.name.type, constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#60a5fa
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json#e7e5e4
constant.numeric#67e8f9
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#fb7185
variable#fafaf9
entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#a78bfa
entity.name.tag, keyword.other.template#ffab70
string, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml#34d399
token.info-token#06b6d4
token.warn-token#fb923c
token.error-token#f87171
token.debug-token#e879f9
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#bbbbbb
markup.underline.link#ffab70
beginning.punctuation.definition.list.markdown#f87171
punctuation.definition.metadata.markdown#ffab70
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#60a5fa