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#1A1A1A
  • activityBar.foreground#7D7D7D
  • activityBarBadge.background#383838
  • badge.background#383838
  • badge.foreground#C1C1C1
  • button.background#333
  • debugIcon.breakpointCurrentStackframeForeground#50fa7b
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#8be9fd
  • debugIcon.breakpointStackframeForeground#50fa7b
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#8be9fd
  • debugIcon.disconnectForeground#8be9fd
  • debugIcon.pauseForeground#8be9fd
  • debugIcon.restartForeground#50fa7b
  • debugIcon.startForeground#50fa7b
  • debugIcon.stepBackForeground#8be9fd
  • debugIcon.stepIntoForeground#8be9fd
  • debugIcon.stepOutForeground#8be9fd
  • debugIcon.stepOverForeground#8be9fd
  • debugIcon.stopForeground#FF5555
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#1f1f1f
  • editor.lineHighlightBorder#303030
  • editorBracketHighlight.foreground2#8be9fd
  • editorBracketHighlight.foreground3#8be9fd
  • editorBracketHighlight.foreground4#8be9fd
  • editorBracketHighlight.foreground5#8be9fd
  • editorBracketHighlight.foreground6#8be9fd
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#1A1A1A
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.foreground#727272
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#1A1A1A
  • focusBorder#444
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • input.background#2A2A2A
  • input.foreground#E0E0E0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#262626
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#F5F5F5
  • panelTitle.activeBorder#1f1f1f
  • panelTitle.activeForeground#FAFAFA
  • panelTitle.inactiveForeground#484848
  • peekView.border#444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FAFAFA
  • scrollbar.shadow#1f1f1f
  • sideBar.background#1A1A1A
  • sideBarSectionHeader.background#202020
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1a1a1a00
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#FF9800
  • symbolIcon.constructorForeground#50fa7b
  • symbolIcon.enumeratorForeground#FF9800
  • symbolIcon.enumeratorMemberForeground#50fa7b
  • symbolIcon.eventForeground#FF9800
  • symbolIcon.fieldForeground#50fa7b
  • symbolIcon.functionForeground#50fa7b
  • symbolIcon.interfaceForeground#50fa7b
  • symbolIcon.methodForeground#50fa7b
  • symbolIcon.variableForeground#50fa7b
  • tab.activeBorder#1e1e1e
  • tab.activeForeground#FAFAFA
  • tab.border#1A1A1A
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#727272
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#fafafa
  • textLink.foreground#CCC
  • titleBar.activeBackground#1A1A1A
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f2
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#FAFAFA
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#8be9fdbold
markup.italic.markdownitalic
meta.link.inline.markdown#fafafaunderline
string, markup.fenced_code, markup.inline#9db1c5
comment, string.quoted.docstring.multi#6b737c
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, string.other.link.title.markdown#fafafaitalic
meta.property-name, support, string.other.link.title.markdown#ff79c6italic
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#8be9fd
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#8be9fd
variable.parameter.function#fafafa
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#50fa7b
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#fafafa
token.info-token#ff79c6
token.warn-token#ffb86c
token.error-token#cd3131
token.debug-token#800080
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#bbbbbb
markup.underline.link#f1fa8c
beginning.punctuation.definition.list.markdown#8be9fd
punctuation.definition.metadata.markdown#f1fa8c
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff79c6