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

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#e2e8f0
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#f8fafc
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