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#27272a
  • activityBar.border#3f3f46
  • activityBar.foreground#a1a1aa
  • activityBarBadge.background#3f3f46
  • badge.background#3f3f46
  • badge.foreground#f4f4f5
  • button.background#18181b
  • checkbox.background#27272a
  • checkbox.border#3f3f46
  • checkbox.foreground#e4e4e7
  • debugIcon.breakpointCurrentStackframeForeground#60a5fa
  • debugIcon.breakpointDisabledForeground#52525b
  • debugIcon.breakpointForeground#f87171
  • debugIcon.breakpointStackframeForeground#60a5fa
  • debugIcon.breakpointUnverifiedForeground#52525b
  • 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#27272a
  • editor.activeSelectionForeground#3f3f46
  • editor.background#18181b
  • editor.foreground#d4d4d8
  • editor.inactiveSelectionBackground#3f3f46
  • editor.lineHighlightBackground#27272a
  • editor.lineHighlightBorder#27272a
  • editor.selectionBackground#3f3f46
  • 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#27272a
  • editorGroupHeader.tabsBorder#27272a
  • editorIndentGuide.activeBackground#3f3f46
  • editorIndentGuide.background#18181b
  • editorLineNumber.activeForeground#fafafa
  • editorLineNumber.foreground#71717a
  • editorRuler.foreground#18181b
  • editorSuggestWidget.background#27272a
  • editorWhitespace.foreground#27272a
  • editorWidget.background#27272a
  • editorWidget.border#3f3f46
  • editorWidget.foreground#d4d4d8
  • focusBorder#3f3f46
  • foreground#e4e4e7
  • gitDecoration.ignoredResourceForeground#52525b
  • input.background#18181b
  • input.foreground#e4e4e7
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#18181b
  • list.activeSelectionForeground#f4f4f5
  • list.focusBackground#18181b
  • list.highlightForeground#e4e4e7
  • list.hoverBackground#3f3f46
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#18181b
  • list.inactiveSelectionForeground#fafafa
  • panel.border#3f3f46
  • panelTitle.activeBorder#18181b
  • panelTitle.activeForeground#fafafa
  • panelTitle.inactiveForeground#484848
  • peekView.border#3f3f46
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#e4e4e7
  • progressBar.background#fafafa
  • scrollbar.shadow#18181b
  • sideBar.background#27272a
  • sideBar.border#3f3f46
  • sideBar.foreground#a1a1aa
  • sideBarSectionHeader.background#27272a
  • statusBar.background#27272a
  • statusBar.border#3f3f46
  • statusBar.debuggingBackground#27272a
  • statusBar.foreground#a1a1aa
  • statusBar.noFolderBackground#27272a
  • statusBarItem.prominentBackground#fafafa
  • statusBarItem.remoteBackground#27272a00
  • statusBarItem.remoteForeground#a1a1aa
  • 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#18181b
  • tab.activeBorder#18181b
  • tab.activeBorderTop#60a5fa
  • tab.activeForeground#fafafa
  • tab.activeModifiedBorder#fb7185
  • tab.inactiveBackground#27272a
  • tab.inactiveForeground#71717a
  • terminal.ansiBlack#27272a
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#3f3f46
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightMagenta#c084fc
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#a855f7
  • terminal.ansiRed#f43f5e
  • terminal.ansiWhite#f4f4f5
  • terminal.ansiYellow#facc15
  • terminal.border#27272a
  • textLink.activeForeground#fafafa
  • textLink.foreground#CCC
  • titleBar.activeBackground#27272a
  • titleBar.border#3f3f46
  • titleBar.inactiveBackground#27272a

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#e4e4e7
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#fafafa
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