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#161616
  • activityBar.foreground#686868
  • activityBarBadge.background#303030
  • badge.background#303030
  • badge.foreground#a0a0a0
  • breadcrumb.activeSelectionForeground#a0a0a0
  • breadcrumb.focusForeground#a0a0a0
  • breadcrumb.foreground#585858
  • breadcrumbPicker.background#1a1a1a
  • button.background#2a2a2a
  • button.foreground#a0a0a0
  • button.hoverBackground#333333
  • debugIcon.breakpointCurrentStackframeForeground#a0a0a0
  • debugIcon.breakpointDisabledForeground#404040
  • debugIcon.breakpointForeground#a88080
  • debugIcon.breakpointStackframeForeground#787878
  • debugIcon.breakpointUnverifiedForeground#505050
  • debugIcon.continueForeground#a88080
  • debugIcon.disconnectForeground#a88080
  • debugIcon.pauseForeground#a88080
  • debugIcon.restartForeground#8090a0
  • debugIcon.startForeground#8090a0
  • debugIcon.stepBackForeground#787878
  • debugIcon.stepIntoForeground#787878
  • debugIcon.stepOutForeground#787878
  • debugIcon.stepOverForeground#787878
  • debugIcon.stopForeground#a88080
  • descriptionForeground#606060
  • diffEditor.insertedLineBackground#80a08010
  • diffEditor.insertedTextBackground#80a08020
  • diffEditor.removedLineBackground#a8808010
  • diffEditor.removedTextBackground#a8808020
  • dropdown.background#1a1a1a
  • dropdown.border#282828
  • dropdown.foreground#a0a0a0
  • dropdown.listBackground#1a1a1a
  • editor.background#161616
  • editor.foreground#a0a0a0
  • editor.lineHighlightBorder#222222
  • editorBracketHighlight.foreground1#888888
  • editorBracketHighlight.foreground2#707070
  • editorBracketHighlight.foreground3#585858
  • editorBracketHighlight.foreground4#888888
  • editorBracketHighlight.foreground5#707070
  • editorBracketHighlight.foreground6#585858
  • editorBracketHighlight.unexpectedBracket.foreground#a88080
  • editorBracketMatch.background#25252500
  • editorBracketMatch.border#404040
  • editorCursor.foreground#787878
  • editorError.foreground#a88080
  • editorGroupHeader.tabsBackground#161616
  • editorGroupHeader.tabsBorder#161616
  • editorGutter.addedBackground#889888
  • editorGutter.deletedBackground#a88080
  • editorGutter.modifiedBackground#909090
  • editorHint.foreground#606060
  • editorIndentGuide.activeBackground#303030
  • editorIndentGuide.background#232323
  • editorInfo.foreground#8090a0
  • editorLineNumber.activeForeground#707070
  • editorLineNumber.foreground#404040
  • editorOverviewRuler.addedForeground#88988850
  • editorOverviewRuler.bracketMatchForeground#50505080
  • editorOverviewRuler.deletedForeground#a8808050
  • editorOverviewRuler.errorForeground#a88080
  • editorOverviewRuler.findMatchForeground#60606080
  • editorOverviewRuler.infoForeground#8090a0
  • editorOverviewRuler.modifiedForeground#90909050
  • editorOverviewRuler.warningForeground#a0a080
  • editorRuler.foreground#232323
  • editorSuggestWidget.background#1a1a1a
  • editorSuggestWidget.border#282828
  • editorSuggestWidget.selectedBackground#252525
  • editorWarning.foreground#a0a080
  • errorForeground#a88080
  • focusBorder#353535
  • foreground#787878
  • gitDecoration.conflictingResourceForeground#a09898
  • gitDecoration.deletedResourceForeground#a88080
  • gitDecoration.ignoredResourceForeground#383838
  • gitDecoration.modifiedResourceForeground#889888
  • gitDecoration.stageDeletedResourceForeground#a09090
  • gitDecoration.stageModifiedResourceForeground#98a098
  • gitDecoration.untrackedResourceForeground#889888
  • icon.foreground#686868
  • input.background#1e1e1e
  • input.border#2a2a2a
  • input.foreground#a0a0a0
  • input.placeholderForeground#505050
  • inputOption.activeBackground#2a2a2a
  • inputValidation.errorBackground#2a1e1e
  • inputValidation.errorBorder#a88080
  • inputValidation.infoBackground#1e2228
  • inputValidation.infoBorder#8090a0
  • inputValidation.warningBackground#2a2a1e
  • inputValidation.warningBorder#a0a080
  • list.activeSelectionBackground#1e1e1e
  • list.activeSelectionForeground#c0c0c0
  • list.errorForeground#a88080
  • list.focusBackground#222222
  • list.highlightForeground#c0c0c0
  • list.hoverBackground#1e1e1e
  • list.hoverForeground#888888
  • list.inactiveSelectionBackground#1e1e1e
  • list.inactiveSelectionForeground#c0c0c0
  • list.warningForeground#a0a080
  • menu.background#1a1a1a
  • menu.border#282828
  • menu.foreground#a0a0a0
  • menu.selectionBackground#252525
  • menu.selectionForeground#c0c0c0
  • menu.separatorBackground#282828
  • minimap.errorHighlight#a8808060
  • minimap.findMatchHighlight#60606080
  • minimap.selectionHighlight#50505080
  • minimap.warningHighlight#a0a08060
  • minimapGutter.addedBackground#88988860
  • minimapGutter.deletedBackground#a8808060
  • minimapGutter.modifiedBackground#90909060
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#a0a0a0
  • notificationLink.foreground#909090
  • notifications.background#1a1a1a
  • notifications.border#282828
  • notifications.foreground#a0a0a0
  • notificationsErrorIcon.foreground#a88080
  • notificationsInfoIcon.foreground#8090a0
  • notificationsWarningIcon.foreground#a0a080
  • panel.background#161616
  • panel.border#232323
  • panelTitle.activeBorder#161616
  • panelTitle.activeForeground#a0a0a0
  • panelTitle.inactiveForeground#404040
  • peekView.border#303030
  • peekViewEditor.background#161616
  • peekViewResult.background#1a1a1a
  • peekViewResult.fileForeground#a0a0a0
  • peekViewResult.lineForeground#787878
  • peekViewResult.matchHighlightBackground#40404040
  • peekViewResult.selectionBackground#252525
  • peekViewResult.selectionForeground#c0c0c0
  • peekViewTitle.background#1a1a1a
  • peekViewTitleDescription.foreground#606060
  • peekViewTitleLabel.foreground#a0a0a0
  • pickerGroup.border#282828
  • pickerGroup.foreground#a0a0a0
  • problemsErrorIcon.foreground#a88080
  • problemsInfoIcon.foreground#8090a0
  • problemsWarningIcon.foreground#a0a080
  • progressBar.background#787878
  • quickInput.background#1a1a1a
  • quickInput.foreground#a0a0a0
  • quickInputList.focusBackground#252525
  • quickInputTitle.background#1a1a1a
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#60606080
  • scrollbarSlider.background#40404040
  • scrollbarSlider.hoverBackground#50505060
  • sideBar.background#161616
  • sideBar.border#16161600
  • sideBarSectionHeader.background#161616
  • sideBarTitle.foreground#707070
  • statusBar.background#161616
  • statusBar.debuggingBackground#161616
  • statusBar.foreground#585858
  • statusBar.noFolderBackground#161616
  • statusBarItem.errorBackground#16161600
  • statusBarItem.errorForeground#a88080
  • statusBarItem.prominentBackground#ffffff10
  • statusBarItem.remoteBackground#16161600
  • statusBarItem.remoteForeground#585858
  • statusBarItem.warningBackground#16161600
  • statusBarItem.warningForeground#a0a080
  • symbolIcon.classForeground#a0a0a0
  • symbolIcon.constructorForeground#909090
  • symbolIcon.enumeratorForeground#a0a0a0
  • symbolIcon.enumeratorMemberForeground#888888
  • symbolIcon.eventForeground#a0a0a0
  • symbolIcon.fieldForeground#888888
  • symbolIcon.functionForeground#909090
  • symbolIcon.interfaceForeground#888888
  • symbolIcon.methodForeground#909090
  • symbolIcon.variableForeground#888888
  • tab.activeBorder#161616
  • tab.activeForeground#a0a0a0
  • tab.border#161616
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#404040
  • terminal.ansiBlack#161616
  • terminal.ansiBlue#8090a0
  • terminal.ansiBrightBlack#505050
  • terminal.ansiBrightBlue#90a0b0
  • terminal.ansiBrightCyan#90b0b0
  • terminal.ansiBrightGreen#90b090
  • terminal.ansiBrightMagenta#b090b0
  • terminal.ansiBrightRed#b89090
  • terminal.ansiBrightWhite#c0c0c0
  • terminal.ansiBrightYellow#b0b090
  • terminal.ansiCyan#80a0a0
  • terminal.ansiGreen#80a080
  • terminal.ansiMagenta#a080a0
  • terminal.ansiRed#a88080
  • terminal.ansiWhite#a0a0a0
  • terminal.ansiYellow#a0a080
  • terminal.selectionBackground#40404060
  • textLink.activeForeground#a0a0a0
  • textLink.foreground#909090
  • titleBar.activeBackground#161616
  • titleBar.activeForeground#787878
  • titleBar.border#00000000
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#484848
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#a0a0a0—
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#b0b0b0—
emphasis—italic
strong, markup.heading.markdown, markup.bold.markdown#ccccccbold
markup.italic.markdown—italic
meta.link.inline.markdown#909090underline
string, markup.fenced_code, markup.inline#889888—
comment, string.quoted.docstring.multi#484848—
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#98a0a0—
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#c0c0c0—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#b09898—
variable.parameter.function#a09898—
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#b0b0b0—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#98a898—
token.info-token#8090a0—
token.warn-token#a0a080—
token.error-token#a88080—
token.debug-token#787878—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#606060—
markup.underline.link#889888—
beginning.punctuation.definition.list.markdown#b09898—
punctuation.definition.metadata.markdown#98a898—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#909090—