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.activeFocusBorder#d4cc8f
  • activityBar.background#151515
  • activityBar.border#151515
  • activityBar.foreground#d4cc8f
  • activityBar.inactiveForeground#909090
  • activityBarBadge.background#d4cc8f
  • activityBarBadge.foreground#050505
  • button.background#404040
  • button.foreground#f7f1ff
  • button.secondaryBackground#404040
  • button.secondaryForeground#f7f1ff
  • button.separator#252525
  • charts.blue#2264de
  • charts.foreground#f7f1ff
  • charts.green#47c963
  • charts.lines#b8b4be
  • charts.orange#fc6911
  • charts.purple#5e4fd5
  • charts.red#fb1c5c
  • charts.yellow#fbdb21
  • checkbox.background#191919
  • checkbox.border#252525
  • checkbox.foreground#47c963
  • commandCenter.activeBackground#252525
  • commandCenter.activeForeground#b8b4be
  • commandCenter.background#151515
  • commandCenter.border#252525
  • debugConsole.errorForeground#fb1c5c
  • debugConsole.infoForeground#22c6de
  • debugConsole.sourceForeground#f7f1ff
  • debugConsole.warningForeground#fc6911
  • debugConsoleInputIcon.foreground#fbdb21
  • debugExceptionWidget.background#404040
  • debugExceptionWidget.border#252525
  • debugIcon.breakpointCurrentStackframeForeground#fbdb21
  • debugIcon.breakpointDisabledForeground#909090
  • debugIcon.breakpointForeground#fb1c5c
  • debugIcon.breakpointStackframeForeground#f7f1ff
  • debugIcon.breakpointUnverifiedForeground#fc6911
  • debugIcon.continueForeground#f7f1ff
  • debugIcon.disconnectForeground#f7f1ff
  • debugIcon.pauseForeground#f7f1ff
  • debugIcon.restartForeground#47c963
  • debugIcon.startForeground#47c963
  • debugIcon.stepBackForeground#f7f1ff
  • debugIcon.stepIntoForeground#f7f1ff
  • debugIcon.stepOutForeground#f7f1ff
  • debugIcon.stepOverForeground#f7f1ff
  • debugIcon.stopForeground#fb1c5c
  • debugTokenExpression.boolean#fc6911
  • debugTokenExpression.error#fb1c5c
  • debugTokenExpression.name#22c6de
  • debugTokenExpression.number#cc00cc
  • debugTokenExpression.string#fbdb21
  • debugTokenExpression.value#f7f1ff
  • debugToolBar.background#404040
  • debugView.exceptionLabelBackground#fb1c5c
  • debugView.exceptionLabelForeground#252525
  • debugView.stateLabelBackground#47c963
  • debugView.stateLabelForeground#252525
  • debugView.valueChangedHighlight#fbdb21
  • dropdown.background#252525
  • dropdown.border#00000000
  • dropdown.foreground#f7f1ff
  • dropdown.listBackground#252525
  • editor.background#151515
  • editor.foreground#f7f1ff
  • editor.lineHighlightBorder#00000000
  • editor.selectionHighlichtBorder#00000000
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#fb1c5c
  • editorBracketHighlight.foreground2#fc6911
  • editorBracketHighlight.foreground3#cc00cc
  • editorBracketHighlight.foreground4#47c963
  • editorBracketHighlight.foreground5#22c6de
  • editorBracketHighlight.foreground6#fbdb21
  • editorCursor.foreground#f7f1ff
  • editorError.background#00000000
  • editorError.border#00000000
  • editorError.foreground#fb1c5c
  • editorGroupHeader.noTabsBackground#191919
  • editorGroupHeader.tabsBackground#191919
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#47c963
  • editorGutter.background#151515
  • editorGutter.deletedBackground#fb1c5c
  • editorGutter.foldingControlForeground#b8b4be
  • editorGutter.modifiedBackground#fc6911
  • editorInfo.foreground#22c6de
  • editorLightBulb.foreground#fbdb21
  • editorLightBulbAutoFix.foreground#47c963
  • editorLineNumber.activeForeground#b8b4be
  • editorLink.activeForeground#22c6de
  • editorMarkerNavigationError.background#fb1c5c
  • editorMarkerNavigationInfo.background#22c6de
  • editorMarkerNavigationWarning.background#fc6911
  • editorOverviewRuler.addedForeground#47c963
  • editorOverviewRuler.border#252525
  • editorOverviewRuler.deletedForeground#fb1c5c
  • editorOverviewRuler.errorForeground#fb1c5c
  • editorOverviewRuler.infoForeground#22c6de
  • editorOverviewRuler.modifiedForeground#fc6911
  • editorOverviewRuler.warningForeground#fc6911
  • editorPane.background#252525
  • editorSuggestWidget.foreground#b8b4be
  • editorSuggestWidget.highlightForeground#f7f1ff
  • editorWarning.background#00000000
  • editorWarning.border#00000000
  • editorWarning.foreground#fc6911
  • errorForeground#fb1c5c
  • extensionBadge.remoteBackground#151515
  • extensionBadge.remoteForeground#d4cc8f
  • extensionButton.prominentBackground#151515
  • extensionButton.prominentForeground#f7f1ff
  • extensionIcon.preReleaseForeground#cc00cc
  • extensionIcon.sponsorForeground#22c6de
  • extensionIcon.starForeground#fbdb21
  • extensionIcon.verifiedForeground#47c963
  • focusBorder#404040
  • foreground#f7f1ff
  • gitDecoration.addedResourceForeground#47c963
  • gitDecoration.deletedResourceForeground#fb1c5c
  • gitDecoration.ignoredResourceForeground#525053
  • gitDecoration.modifiedResourceForeground#fc6911
  • gitDecoration.stageDeletedResourceForeground#fb1c5c
  • gitDecoration.stageModifiedResourceForeground#fc6911
  • gitDecoration.untrackedResourceForeground#b8b4be
  • list.activeSelectionBackground#d4cc8f80
  • list.errorForeground#fb1c5c
  • list.focusBackground#252525
  • list.focusForeground#f7f1ff
  • list.highlightForeground#f7f1ff
  • list.hoverBackground#0505054D
  • list.hoverForeground#f7f1ff
  • list.inactiveFocusBackground#252525
  • list.invalidItemForeground#fb1c5c
  • list.warningForeground#fc6911
  • listFilterWidget.background#252525
  • listFilterWidget.noMatchesOutline#fb1c5c
  • listFilterWidget.outline#252525
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#252525
  • notificationCenterHeader.foreground#b8b4be
  • notificationLink.foreground#d4cc8f
  • notifications.background#252525
  • notifications.border#00000000
  • notifications.foreground#b8b4be
  • notificationsErrorIcon.foreground#fb1c5c
  • notificationsInfoIcon.foreground#2264de
  • notificationsWarningIcon.foreground#fc6911
  • notificationToast.border#00000000
  • panel.background#151515
  • panel.border#404040
  • panelTitle.activeBorder#d4cc8f
  • panelTitle.activeForeground#d4cc8f
  • panelTitle.inactiveForeground#909090
  • pickerGroup.border#252525
  • pickerGroup.foreground#d4cc8f
  • problemsErrorIcon.foreground#fb1c5c
  • problemsInfoIcon.foreground#2264de
  • problemsWarningIcon.foreground#fc6911
  • progressBar.background#404040
  • settings.checkboxBackground#191919
  • settings.checkboxBorder#252525
  • settings.checkboxForeground#47c963
  • settings.dropdownBackground#191919
  • settings.dropdownBorder#252525
  • settings.dropdownForeground#f7f1ff
  • settings.dropdownListBorder#252525
  • settings.headerForeground#d4cc8f
  • settings.modifiedItemForeground#d4cc8f
  • settings.modifiedItemIndicator#d4cc8f
  • settings.numberInputBackground#191919
  • settings.numberInputBorder#252525
  • settings.numberInputForeground#f7f1ff
  • settings.textInputBackground#191919
  • settings.textInputBorder#252525
  • settings.textInputForeground#f7f1ff
  • sideBar.background#191919
  • sideBar.border#151515
  • sideBar.foreground#909090
  • sideBarSectionHeader.background#191919
  • sideBarSectionHeader.foreground#909090
  • sideBarTitle.foreground#b8b4be
  • statusBar.background#151515
  • statusBar.border#00000000
  • statusBar.debuggingBackground#404040
  • statusBar.debuggingBorder#151515
  • statusBar.debuggingForeground#f7f1ff
  • statusBar.focusBorder#00000000
  • statusBar.foreground#909090
  • statusBar.noFolderBackground#151515
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#909090
  • statusBarItem.activeBackground#252525
  • statusBarItem.errorBackground#151515
  • statusBarItem.errorForeground#fb1c5c
  • statusBarItem.focusBorder#00000000
  • statusBarItem.remoteBackground#151515
  • statusBarItem.remoteForeground#d4cc8f
  • tab.activeBackground#151515
  • tab.activeBorder#d4cc8f
  • tab.activeForeground#d4cc8f
  • tab.activeModifiedBorder#404040
  • tab.border#00000000
  • tab.hoverBackground#151515
  • tab.hoverBorder#404040
  • tab.hoverForeground#f7f1ff
  • tab.inactiveBackground#191919
  • tab.inactiveForeground#b8b4be
  • tab.inactiveModifiedBorder#404040
  • tab.lastPinnedBorder#404040
  • tab.unfocusedActiveBorder#909090
  • tab.unfocusedActiveForeground#b8b4be
  • tab.unfocusedActiveModifiedBorder#404040
  • tab.unfocusedHoverBackground#151515
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedHoverForeground#b8b4be
  • tab.unfocusedInactiveForeground#909090
  • tab.unfocusedInactiveModifiedBorder#404040
  • terminal.ansiBlack#050505
  • terminal.ansiBlue#2264de
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#86c8ff
  • terminal.ansiBrightCyan#86ffff
  • terminal.ansiBrightGreen#abffc7
  • terminal.ansiBrightMagenta#ff64ff
  • terminal.ansiBrightRed#ff80c0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff85
  • terminal.ansiCyan#22c6de
  • terminal.ansiGreen#47c963
  • terminal.ansiMagenta#cc00cc
  • terminal.ansiRed#fb1c5c
  • terminal.ansiWhite#f7f1ff
  • terminal.ansiYellow#fbdb21
  • terminal.background#151515
  • terminal.foreground#f7f1ff
  • terminalCommandDecoration.defaultBackground#f7f1ff
  • terminalCommandDecoration.errorBackground#fb1c5c
  • terminalCommandDecoration.successBackground#47c963
  • terminalCursor.background#00000000
  • terminalCursor.foreground#f7f1ff
  • textLink.activeForeground#f7f1ff
  • textLink.foreground#d4cc8f
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#b8b4be
  • titleBar.border#151515
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#909090
  • walkThrough.embeddedEditorBackground#191919
  • welcomePage.buttonBackground#404040
  • welcomePage.progress.background#404040
  • welcomePage.progress.foreground#d4cc8f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#F8F8F2
comment#88846f
string#E6DB74
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#F8F8F2
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable#F8F8F2
keyword#F92672
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#A6E22E
variable.parameter#FD971Fitalic
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.other.variable
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22Ebold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#FD971F
Gipsy Themes by Luca Gärisch - VS Code Theme