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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b392f0
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#b392f0
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#FF7A84bold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code, markup.inline#9db1c5
comment, string.quoted.docstring.multi#6b737c
meta.object.member#f8f8f8
meta.object-literal.key#7cf2b6
variable.other.object.property, variable.other.property#ffab70
#FFFFFF
punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.export.default, meta.import, meta.import.default#C8C8C8
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#79b8ff
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#f8f8f8
support.type.property-name#d1b8ff
#79B8FF
punctuation.separator.key-value#00FF00
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression, constant.language.boolean.false#f97583
variable.parameter.function, variable.parameter, variable.object.property#e8e8e8
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#af95e9
entity.name.tag#F7768E
string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#ffab70italic
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#bbbbbb
markup.underline.link#ffab70
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.metadata.markdown#ffab70
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#79b8ff

Shiki preview

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

Loading...