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#18181b
  • activityBar.foreground#71717a
  • activityBarBadge.background#3f3f46
  • badge.background#3f3f46
  • badge.foreground#d4d4d8
  • button.background#3f3f46
  • debugIcon.breakpointCurrentStackframeForeground#7dd3fc
  • debugIcon.breakpointDisabledForeground#71717a
  • debugIcon.breakpointForeground#fb7185
  • debugIcon.breakpointStackframeForeground#7dd3fc
  • debugIcon.breakpointUnverifiedForeground#71717a
  • debugIcon.continueForeground#fb7185
  • debugIcon.disconnectForeground#fb7185
  • debugIcon.pauseForeground#fb7185
  • debugIcon.restartForeground#7dd3fc
  • debugIcon.startForeground#7dd3fc
  • debugIcon.stepBackForeground#fb7185
  • debugIcon.stepIntoForeground#fb7185
  • debugIcon.stepOutForeground#fb7185
  • debugIcon.stepOverForeground#fb7185
  • debugIcon.stopForeground#7dd3fc
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#18181b
  • editor.lineHighlightBorder#27272a
  • editorGroupHeader.tabsBackground#18181b
  • editorGroupHeader.tabsBorder#18181b
  • editorIndentGuide.activeBackground#3f3f46
  • editorIndentGuide.background#27272a
  • editorLineNumber.foreground#71717a
  • editorRuler.foreground#27272a
  • editorSuggestWidget.background#18181b
  • focusBorder#52525b00
  • foreground#d4d4d8
  • gitDecoration.ignoredResourceForeground#52525b
  • input.background#27272a
  • input.foreground#e4e4e7
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#27272a
  • list.activeSelectionForeground#f5f5f5
  • list.focusBackground#27272a
  • list.highlightForeground#d4d4d8
  • list.hoverBackground#27272a
  • list.hoverForeground#d4d4d8
  • list.inactiveSelectionBackground#71717a
  • list.inactiveSelectionForeground#f5f5f5
  • panelTitle.activeBorder#18181b
  • panelTitle.activeForeground#fafafa
  • panelTitle.inactiveForeground#71717a
  • peekView.border#3f3f46
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#d4d4d8
  • progressBar.background#fafafa
  • scrollbar.shadow#18181b
  • sideBar.background#18181b
  • sideBarSectionHeader.background#202020
  • statusBar.background#18181b
  • statusBar.debuggingBackground#18181b
  • statusBar.foreground#78716c
  • statusBar.noFolderBackground#18181b
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1a1a1a00
  • statusBarItem.remoteForeground#78716c
  • symbolIcon.classForeground#fb923c
  • symbolIcon.constructorForeground#a78bfa
  • symbolIcon.enumeratorForeground#fb923c
  • symbolIcon.enumeratorMemberForeground#7dd3fc
  • symbolIcon.eventForeground#fb923c
  • symbolIcon.fieldForeground#7dd3fc
  • symbolIcon.functionForeground#a78bfa
  • symbolIcon.interfaceForeground#7dd3fc
  • symbolIcon.methodForeground#a78bfa
  • symbolIcon.variableForeground#7dd3fc
  • tab.activeBorder#18181b
  • tab.activeForeground#fafafa
  • tab.border#18181b
  • tab.inactiveBackground#18181b
  • tab.inactiveForeground#71717a
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#fafafa
  • textLink.foreground#d4d4d4
  • titleBar.activeBackground#18181b
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a78bfa
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#a78bfa
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#fb7185bold
markup.italic.markdownitalic
meta.link.inline.markdown#3b82f6underline
string, markup.fenced_code, markup.inline#a1a1aa
comment, string.quoted.docstring.multi#71717a
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#7dd3fc
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#f4f4f5
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#f97583
variable.parameter.function#fb923c
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#a78bfa
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#ffab70
token.info-token#3b82f6
token.warn-token#ca8731
token.error-token#cd3131
token.debug-token#86198f
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#d4d4d8
markup.underline.link#ffab70
beginning.punctuation.definition.list.markdown#fb7185
punctuation.definition.metadata.markdown#ffab70
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#7dd3fc

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Pure Themes - Coding Theme