Skip to main content
Coding Theme

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.activeBorder#141518
  • activityBar.background#141518
  • activityBar.border#141518
  • activityBar.foreground#ffff7e
  • activityBar.inactiveForeground#a9aea0
  • activityBarBadge.background#80cbc4
  • activityBarBadge.foreground#141518
  • badge.background#14151830
  • badge.foreground#464b5d
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#141518
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#c692fa
  • breadcrumbPicker.background#141518
  • button.background#717cb450
  • button.hoverBackground#77777727
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#141518
  • dropdown.border#141518
  • dropdown.foreground#00ffff
  • editor.background#141518
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.foldBackground#264f784d
  • editor.foreground#8f93a2
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d4175
  • editor.lineHighlightBackground#38343235
  • editor.lineHighlightBorder#45403d40
  • editor.selectionBackground#264f7850
  • editor.selectionHighlightBackground#384756
  • editor.snippetTabstopHighlightBackground#ffffff15
  • editor.snippetTabstopHighlightBorder#141518
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#f2ebe0
  • editorError.background#b73a3400
  • editorError.foreground#f48771
  • editorGroup.border#101010
  • editorGroup.dropBackground#45403d60
  • editorGroupHeader.noTabsBackground#141518
  • editorGroupHeader.tabsBackground#141518
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#29282800
  • editorGutter.commentRangeForeground#7c6f64
  • editorGutter.deletedBackground#94151b
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#1c1d21
  • editorHoverWidget.border#504945
  • editorIndentGuide.activeBackground#66d9ef
  • editorIndentGuide.background#3b3f5170
  • editorInfo.background#4490bf00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#66d9ef
  • editorLineNumber.foreground#7d7d7d
  • editorLink.activeForeground#8f93a2
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.border#141518
  • editorOverviewRuler.errorForeground#ff537040
  • editorOverviewRuler.findMatchForeground#80cbc4
  • editorOverviewRuler.infoForeground#82aaff40
  • editorOverviewRuler.warningForeground#ffcb6b40
  • editorRuler.foreground#3b3f51
  • editorSuggestWidget.background#141518
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#00ffff
  • editorWarning.background#a9904000
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#8f93a240
  • editorWidget.background#1d1d1f
  • editorWidget.border#7c6f64
  • editorWidget.foreground#e5e5e5
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#686d7e
  • foreground#8f93a2
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#52597590
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • input.background#29282800
  • input.border#3b3b3b
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#b85651
  • inputValidation.errorBorder#ea6962
  • inputValidation.errorForeground#f2ebe0
  • inputValidation.infoBackground#68948a
  • inputValidation.infoBorder#7daea3
  • inputValidation.infoForeground#f2ebe0
  • inputValidation.warningBackground#c18f41
  • inputValidation.warningBorder#e2bc80
  • inputValidation.warningForeground#f2ebe0
  • list.activeSelectionBackground#45403d40
  • list.activeSelectionForeground#00ffff
  • list.dropBackground#32302f80
  • list.errorForeground#ea6962
  • list.focusBackground#45403d60
  • list.focusForeground#00ffff
  • list.highlightForeground#00ffff
  • list.hoverBackground#29282800
  • list.hoverForeground#00ffff
  • list.inactiveFocusBackground#45403d48
  • list.inactiveSelectionBackground#45403d48
  • list.inactiveSelectionForeground#00ffff
  • list.invalidItemForeground#b85651
  • list.warningForeground#e2bc80
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#00ffff
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionBorder#c4c4c4
  • menubar.selectionForeground#cccccc
  • merge.currentContentBackground#27403b
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384b
  • merge.incomingHeaderBackground#395f8f
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notificationLink.foreground#9ba950
  • notifications.background#252526
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#ea6962
  • notificationsInfoIcon.foreground#7daea3
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#141518
  • panel.border#2b2d34
  • panelTitle.activeBorder#80cbc4
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#8f93a2
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f004a
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#141518
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#ddc7a11a
  • pickerGroup.foreground#80cbc4
  • progressBar.background#80cbc4
  • sash.hoverBorder#00ffff77
  • scrollbar.shadow#0f111a00
  • scrollbarSlider.activeBackground#ffffff7e
  • scrollbarSlider.background#7e7e7e7e
  • scrollbarSlider.hoverBackground#ffffff46
  • selection.background#256aa780
  • settings.checkboxBackground#0f111a
  • settings.checkboxForeground#8f93a2
  • settings.dropdownBackground#141518
  • settings.dropdownForeground#77ff77
  • settings.dropdownListBorder#141518
  • settings.headerForeground#80cbc4
  • settings.modifiedItemIndicator#00ffff
  • settings.numberInputBackground#141518
  • settings.numberInputBorder#141518
  • settings.numberInputForeground#ffff00
  • settings.textInputBackground#141518
  • settings.textInputBorder#141518
  • settings.textInputForeground#bb77ff
  • sideBar.background#141518
  • sideBar.border#2b2d34
  • sideBar.foreground#aaaaaa
  • sideBarSectionHeader.background#29282800
  • sideBarSectionHeader.foreground#ff7700
  • sideBarTitle.foreground#77ff77
  • statusBar.background#141518
  • statusBar.border#141518
  • statusBar.debuggingBackground#141518
  • statusBar.debuggingForeground#7e7e7e
  • statusBar.foreground#00ffff
  • statusBar.noFolderBackground#0f111a
  • statusBarItem.hoverBackground#01fdfd1a
  • statusBarItem.remoteBackground#80cbc4
  • statusBarItem.remoteForeground#141518
  • tab.activeBorder#141518
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#525975
  • tab.border#141518
  • tab.inactiveBackground#141518
  • tab.inactiveForeground#777777
  • tab.unfocusedActiveBorder#464b5d
  • tab.unfocusedActiveForeground#8f93a2
  • terminal.ansiBlack#141518
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#464b5d
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#bb77ff
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#bb77ff
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminal.background#141518
  • terminalCursor.background#141518
  • terminalCursor.foreground#ffcb6b
  • textLink.activeForeground#8f93a2
  • textLink.foreground#80cbc4
  • titleBar.activeBackground#141518
  • titleBar.activeForeground#f7f7f7
  • titleBar.border#141518
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#7c6f64

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strong, markup.bold—bold
emphasis, markup.italic—italic
markup.underline—underline
comment, punctuation.definition.comment, string.quoted.docstring#616263italic
comment.block#FF1493italic
source.cs meta.preprocessor#616263—
storage.type, source.cs storage.type, support.type.exception, variable.object.property, source.css entity.name.tag, entity.other.attribute-name, variable.other.constant.property, meta.definition.method entity.name.function, source.cs meta.method.identifier entity.name.function, text.html.markdown beginning.punctuation.definition.list#F3F99D—
keyword.type, support.type, entity.name.type, keyword.other.unit, storage.type.primitive, entity.other.attribute-name.id, text.html.markdown markup.quote, source.cs meta.method.return-type, entity.other.attribute-name.class#9AEDFE—
string, constant.numeric, support.constant, markup.inserted.diff, constant.language.null, meta.diff.header.to-file, constant.language.boolean, constant.language.undefined, source.java constant.language, source.python constant.language, meta.structure.dictionary.json string.quoted.double.json#5AF78E—
meta.require, markup.heading, support.function, keyword.other.get, keyword.other.set, meta.function-call, entity.name.function, variable.language.super, keyword.other.special-method, source.cs entity.name.function, meta.function entity.name.function, entity.name.section.group-title.ini, source.cs meta.method-call meta.method, source.java meta.method-call meta.method, source.java meta.definition.variable entity.name.function, source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method#57C7FF—
source., variable, meta.tag, support.class, meta.attribute., support.variable, support.constant, text.html.derivative, punctuation.definition.tag, keyword.operator.arithmetic, punctuation.definition.attribute., source.java storage.modifier.import, source.cs entity.name.type.namespace, source.java storage.modifier.package, source.python meta.function-call.arguments, meta.definition.variable entity.name.function, source.java meta.method-call meta.inner-class meta.method#EFF0EB—
markup., support.node, support.module, entity.name.tag, meta.link.reference, markup.deleted.diff, entity.name.tag.yaml, entity.name.type.class, meta.object-literal.key, meta.diff.header.from-file, markup.underline.link.image, keyword.other.definition.ini, punctuation.section.embedded, meta.object-literal.key string, support.type.property-name.json, text.html.markdown meta.link.inline, source.java storage.type.annotation, source.css support.type.property-name, source.cs meta.class.identifier storage.type, entity.other.inherited-class entity.name.type.module, source.python meta.function entity.name.function.decorator#FF5C57—
markup.bold#FF5C57bold
markup.bold markup., markup. markup.bold#FF5C57 bold
variable.parameter—italic
keyword, modifier, storage.modifier, constant.language, support.type.object, variable.language.this, constant.language.json, template.expression.end, template.expression.begin, variable.language.special.self, source.js storage.modifier.async, text.html.markdown markup.inline.raw, source.python meta.function storage.type.function#FF6AC1—
storage.modifier, storage.type.class.js, variable.language.this, variable.language.this.js—italic
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Its Dark by Ismile Hossain - VS Code Theme