Skip to main content
CodingTheme

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

Shiki preview

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

Loading...

Wind Theme by Calvin Ludwig - VS Code Theme