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
ThemeDatabase All Themes by enes ozturk - VS Code Theme