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.activeBackground#0a0a0a
  • activityBar.activeBorder#0c7d9d
  • activityBar.background#1b1b1b
  • activityBar.border#262626
  • activityBar.foreground#d4d4d4
  • activityBarBadge.background#0c7d9d
  • activityBarBadge.foreground#ffffff
  • banner.background#0a0a0a
  • banner.foreground#d4d4d4
  • banner.iconForeground#d4d4d4
  • breadcrumb.activeSelectionForeground#d4d4d4
  • breadcrumb.background#0a0a0a
  • breadcrumb.focusForeground#d4d4d4
  • breadcrumb.foreground#838b8d
  • breadcrumbPicker.background#0a0a0a
  • button.background#0c7d9d
  • button.foreground#ffffff
  • button.hoverBackground#248AA6
  • button.secondaryBackground#0c7d9d
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#248AA6
  • commandCenter.background#1b1b1b
  • commandCenter.border#262626
  • commandCenter.foreground#d4d4d4
  • debugToolBar.background#0a0a0a
  • editor.background#0a0a0a
  • editor.findMatchBackground#0c7d9d
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#0c0c0c
  • editor.lineHighlightBorder#0c0c0c
  • editor.selectionBackground#1b3f63
  • editor.selectionForeground#d4d4d4
  • editor.selectionHighlightBorder#3a3d41
  • editor.wordHighlightStrongBorder#0c7d9d
  • editorBracketMatch.background#3a3d41
  • editorBracketMatch.border#3a3d41
  • editorCodeLens.foreground#999999
  • editorCursor.background#d4d4d4
  • editorCursor.foreground#d4d4d4
  • editorError.foreground#f48771
  • editorGroup.border#262626
  • editorGroup.dropBackground#383b3d
  • editorGroupHeader.noTabsBackground#181818
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#262626
  • editorGutter.addedBackground#0c7d9d
  • editorGutter.background#0a0a0a
  • editorGutter.commentRangeForeground#d4d4d4
  • editorGutter.deletedBackground#f48771
  • editorGutter.foldingControlForeground#d4d4d4
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#262626
  • editorHoverWidget.foreground#d4d4d4
  • editorHoverWidget.statusBarBackground#0a0a0a
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#636363
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#3a3d41
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationWarning.background#d4d4d4
  • editorOverviewRuler.addedForeground#d4d4d4
  • editorOverviewRuler.border#3a3d41
  • editorOverviewRuler.commonContentForeground#d4d4d4
  • editorOverviewRuler.currentContentForeground#d4d4d4
  • editorOverviewRuler.deletedForeground#d4d4d4
  • editorOverviewRuler.errorForeground#d4d4d4
  • editorOverviewRuler.incomingContentForeground#d4d4d4
  • editorOverviewRuler.infoForeground#d4d4d4
  • editorOverviewRuler.modifiedForeground#d4d4d4
  • editorOverviewRuler.warningForeground#d4d4d4
  • editorRuler.foreground#3a3d41
  • editorSuggestWidget.background#0a0a0a
  • editorSuggestWidget.border#262626
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0c7d9d
  • editorSuggestWidget.selectedBackground#383b3d
  • editorWarning.foreground#d4d4d4
  • editorWhitespace.foreground#3a3d41
  • editorWidget.background#262626
  • editorWidget.border#0c7d9d
  • editorWidget.foreground#fcf7fb
  • extensionButton.prominentBackground#0a0a0ac2
  • extensionButton.prominentForeground#d4d4d4
  • extensionButton.prominentHoverBackground#383b3d
  • focusBorder#262626
  • gitDecoration.conflictingResourceForeground#f48771
  • gitDecoration.deletedResourceForeground#f48771
  • gitDecoration.ignoredResourceForeground#44474b
  • gitDecoration.modifiedResourceForeground#bb9d76
  • gitDecoration.untrackedResourceForeground#d4d4d4
  • inputOption.activeBackground#0c7d9d
  • inputOption.activeBorder#0c7d9d
  • inputOption.hoverBackground#248AA6
  • keybindingLabel.background#0a0a0a
  • keybindingLabel.border#262626
  • keybindingLabel.bottomBorder#262626
  • keybindingLabel.foreground#d4d4d4
  • list.activeSelectionBackground#0c7d9d
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusBackground#0c0c0c
  • list.focusForeground#d4d4d4
  • list.highlightForeground#85859c
  • list.hoverBackground#0c7d9d
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#2a2d2e
  • list.inactiveSelectionBackground#2a2d2e
  • list.inactiveSelectionForeground#d4d4d4
  • list.invalidItemForeground#a58700
  • menu.background#0a0a0a
  • menu.foreground#d4d4d4
  • menu.selectionBackground#1b1b1b
  • menu.selectionBorder#0a0a0a
  • menu.selectionForeground#d4d4d4
  • menu.separatorBackground#0a0a0a
  • menubar.selectionBackground#1b1b1b
  • menubar.selectionForeground#d4d4d4
  • merge.border#262626
  • notificationCenter.border#262626
  • notificationCenterHeader.background#1b1b1b
  • notificationCenterHeader.foreground#d4d4d4
  • notificationLink.foreground#0c7d9d
  • notifications.background#1b1b1b
  • notifications.border#262626
  • notifications.foreground#d4d4d4
  • notificationToast.border#262626
  • panel.background#0a0a0a
  • panel.border#262626
  • panelTitle.activeBorder#1b1b1b
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#d4d4d4
  • peekView.border#262626
  • peekViewEditor.background#1b1b1b
  • peekViewEditor.matchHighlightBackground#264f78
  • peekViewEditorGutter.background#1b1b1b
  • peekViewResult.background#1b1b1b
  • peekViewResult.fileForeground#d4d4d4
  • peekViewResult.lineForeground#d4d4d4
  • peekViewResult.matchHighlightBackground#264f78
  • peekViewResult.selectionBackground#383b3d
  • peekViewResult.selectionForeground#d4d4d4
  • peekViewTitle.background#1b1b1b
  • peekViewTitleDescription.foreground#d4d4d4
  • peekViewTitleLabel.foreground#d4d4d4
  • pickerGroup.border#262626
  • pickerGroup.foreground#d4d4d4
  • progressBar.background#0c7d9d
  • quickInput.background#0a0a0a
  • quickInput.foreground#d4d4d4
  • quickInputList.focusBackground#262626
  • quickInputList.focusForeground#d4d4d4
  • quickInputList.focusIconForeground#d4d4d4
  • quickInputTitle.background#262626
  • scrollbarSlider.activeBackground#413f3f
  • scrollbarSlider.background#222222
  • scrollbarSlider.hoverBackground#1e1e1f
  • settings.checkboxBackground#4e321a
  • settings.checkboxBorder#161008
  • settings.checkboxForeground#fff8f1
  • settings.dropdownBackground#4e321a
  • settings.dropdownBorder#161008
  • settings.dropdownForeground#fff8f1
  • settings.dropdownListBorder#800000
  • settings.headerForeground#e7e7e7
  • settings.modifiedItemIndicator#0c7d9d
  • settings.numberInputBackground#0c0c0c
  • settings.numberInputBorder#363537
  • settings.numberInputForeground#d4d4d4
  • settings.textInputBackground#0c0c0c
  • settings.textInputBorder#363537
  • settings.textInputForeground#d4d4d4
  • sideBar.background#0f0f0f
  • sideBar.foreground#838b8d
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.foreground#0c7d9d
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#1b1b1b
  • statusBar.border#1b1b1b
  • statusBar.debuggingBackground#1b1b1b
  • statusBar.debuggingBorder#262626
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#d4d4d4
  • statusBar.noFolderBackground#1b1b1b
  • statusBar.noFolderBorder#262626
  • statusBar.noFolderForeground#d4d4d4
  • statusBarItem.activeBackground#1b1b1b
  • statusBarItem.hoverBackground#383b3d
  • statusBarItem.prominentBackground#1b1b1b
  • statusBarItem.prominentHoverBackground#383b3d
  • statusBarItem.remoteBackground#0c7d9d
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#0a0a0a
  • tab.activeBorderTop#0c7d9d
  • tab.activeForeground#d4d4d4
  • tab.border#262626
  • tab.hoverBackground#383b3d
  • tab.hoverBorder#262626
  • tab.inactiveBackground#1b1b1b
  • tab.inactiveForeground#d4d4d4
  • tab.unfocusedActiveBorder#262626
  • tab.unfocusedActiveForeground#d4d4d4
  • tab.unfocusedHoverBackground#0a0a0a
  • tab.unfocusedHoverBorder#262626
  • tab.unfocusedInactiveForeground#d4d4d4
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#0c7d9d
  • terminal.ansiBrightBlack#3a3d41
  • terminal.ansiBrightBlue#0c7d9d
  • terminal.ansiBrightCyan#0c7d9d
  • terminal.ansiBrightGreen#0c7d9d
  • terminal.ansiBrightMagenta#0c7d9d
  • terminal.ansiBrightRed#f48771
  • terminal.ansiBrightWhite#d4d4d4
  • terminal.ansiBrightYellow#d4d4d4
  • terminal.ansiCyan#0c7d9d
  • terminal.ansiGreen#0c7d9d
  • terminal.ansiMagenta#4aa6c0
  • terminal.ansiRed#f48771
  • terminal.ansiWhite#4aa6c0
  • terminal.ansiYellow#646464
  • terminal.background#0a0a0a
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#264f78
  • terminalCursor.background#d4d4d4
  • terminalCursor.foreground#d4d4d4
  • textLink.activeForeground#248AA6
  • textLink.foreground#0c7d9d
  • titleBar.activeBackground#0a0a0a
  • titleBar.border#0a0a0a
  • walkThrough.embeddedEditorBackground#0a0a0a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8C8Citalic
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
constant.language#569cd6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, variable.other.constant#b5cea8
variable.other.enummember, variable.other.constant#4FC1FF
constant.regexp#646695
entity.name.tag#4EC9B0
entity.name.tag.css, entity.name.tag.less#d7ba7d
entity.other.attribute-name#a588b3italic
meta.property.objectitalic
entity.name.function#DCDCAA
variable.other.property#9CDCFE
variable.other.constant.object#4eb9f3
support.class.builtin#45b8a1
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#ce9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#569cd6
storage#569cd6
storage.type#569CD6
storage.modifier, keyword.operator.noexcept#569cd6
string, meta.embedded.assembly#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#a6a6c7
variable.other.readwrite#9CDCFE
variable.other.object#4FC1FF
variable.other.class#4EC9B0
constant.other.object.key#178fcf
source.ignore#248AA6
keyword#569cd6
keyword.control#C586C0
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#569cd6
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569cd6
Romero Dark by Yusefturin - VS Code Theme