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#001E33
  • activityBar.foreground#00CCFF
  • activityBarBadge.background#007FFF
  • activityBarBadge.foreground#ffffff
  • badge.background#007FFF
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#63C5DA
  • breadcrumbPicker.background#001E33
  • button.background#003A63
  • button.foreground#eceff4
  • button.separator#006680
  • commandCenter.activeBackground#003459
  • commandCenter.activeBorder#003459
  • commandCenter.activeForeground#AEC6CF
  • commandCenter.background#001E33
  • commandCenter.foreground#63C5DA
  • commandCenter.inactiveBorder#002C4C
  • debugIcon.breakpointCurrentStackframeForeground#00CCFF
  • debugIcon.breakpointDisabledForeground#006680
  • debugIcon.breakpointForeground#00CCFF
  • debugIcon.breakpointStackframeForeground#00CCFF
  • debugIcon.breakpointUnverifiedForeground#00CCFF
  • debugIcon.continueForeground#00CCFF
  • debugIcon.disconnectForeground#FF7566
  • debugIcon.pauseForeground#00CCFF
  • debugIcon.restartForeground#50C878
  • debugIcon.startForeground#00CCFF
  • debugIcon.stepBackForeground#00CCFF
  • debugIcon.stepIntoForeground#00CCFF
  • debugIcon.stepOutForeground#00CCFF
  • debugIcon.stepOverForeground#00CCFF
  • debugIcon.stopForeground#FF7566
  • debugToolBar.background#002E4F
  • descriptionForeground#63C5DA
  • dropdown.background#001E33
  • dropdown.foreground#63C5DA
  • editor.background#002138
  • editor.findMatchBackground#00528C8e
  • editor.findMatchBorder#00CCFF
  • editor.findMatchHighlightBackground#00528C8e
  • editor.foldBackground#002138
  • editor.foreground#63C5DA
  • editor.hoverHighlightBackground#00528C8e
  • editor.lineHighlightBackground#002C4C
  • editor.rangeHighlightBackground#00528C8e
  • editor.selectionBackground#003A63
  • editor.wordHighlightBackground#00528C8e
  • editor.wordHighlightStrongBackground#00528C8e
  • editor.wordHighlightStrongBorder#4F86F7
  • editorBracketHighlight.foreground1#00CCFF
  • editorBracketHighlight.foreground2#FFFD37
  • editorBracketHighlight.foreground3#63C5DA
  • editorBracketHighlight.foreground4#FFAD00
  • editorBracketHighlight.foreground5#079BF5
  • editorBracketHighlight.foreground6#0BDA51
  • editorBracketHighlight.unexpectedBracket.foreground#FF7566
  • editorBracketMatch.background#00528C8e
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#006680
  • editorCursor.foreground#0094FF
  • editorError.foreground#FF7566
  • editorGhostText.foreground#006680
  • editorGroup.border#003459
  • editorGroup.dropBackground#003A638e
  • editorGroupHeader.tabsBackground#001E33
  • editorGutter.addedBackground#2E8B57
  • editorGutter.commentRangeForeground#006680
  • editorGutter.deletedBackground#FF7566
  • editorGutter.modifiedBackground#005999
  • editorHoverWidget.background#001E33
  • editorHoverWidget.border#003459
  • editorHoverWidget.foreground#00CCFF
  • editorHoverWidget.statusBarBackground#002540
  • editorIndentGuide.activeBackground1#63C5DA
  • editorIndentGuide.background1#003459
  • editorInfo.foreground#85A1F2
  • editorInlayHint.background#002138
  • editorInlayHint.foreground#006680
  • editorInlayHint.parameterBackground#002138
  • editorInlayHint.parameterForeground#006680
  • editorInlayHint.typeForeground#00CCFF
  • editorLightBulb.foreground#FEF08A
  • editorLineNumber.activeForeground#63C5DA
  • editorLineNumber.foreground#006680
  • editorLink.activeForeground#0892D0
  • editorOverviewRuler.addedForeground#2E8B57
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00528C8e
  • editorOverviewRuler.deletedForeground#FF7566
  • editorOverviewRuler.errorForeground#FF7566
  • editorOverviewRuler.findMatchForeground#00528C8e
  • editorOverviewRuler.infoForeground#85A1F2
  • editorOverviewRuler.modifiedForeground#005999
  • editorOverviewRuler.rangeHighlightForeground#00528C8e
  • editorOverviewRuler.selectionHighlightForeground#00528C8e
  • editorOverviewRuler.warningForeground#FFAC40
  • editorOverviewRuler.wordHighlightForeground#00528C8e
  • editorOverviewRuler.wordHighlightStrongForeground#4F86F7
  • editorSuggestWidget.background#002540
  • editorSuggestWidget.border#003459
  • editorSuggestWidget.focusHighlightForeground#00CCFF
  • editorSuggestWidget.foreground#63C5DA
  • editorSuggestWidget.highlightForeground#00CCFF
  • editorSuggestWidget.selectedBackground#003A63
  • editorSuggestWidget.selectedForeground#D8DEE9
  • editorWarning.foreground#FFAC40
  • editorWhitespace.foreground#006680
  • editorWidget.background#001E33
  • editorWidget.foreground#63C5DA
  • editorWidget.resizeBorder#0094FF
  • errorForeground#FF7566
  • extensionButton.background#003A63
  • extensionButton.foreground#eceff4
  • extensionButton.separator#006680
  • extensionIcon.verifiedForeground#0094FF
  • focusBorder#003459
  • foreground#63C5DA
  • gitDecoration.addedResourceForeground#FEF08A
  • gitDecoration.conflictingResourceForeground#FF7566
  • gitDecoration.deletedResourceForeground#FF7566
  • gitDecoration.ignoredResourceForeground#006680
  • gitDecoration.modifiedResourceForeground#85A1F2
  • gitDecoration.renamedResourceForeground#85A1F2
  • gitDecoration.stageDeletedResourceForeground#FF7566
  • gitDecoration.stageModifiedResourceForeground#FEF08A
  • gitDecoration.untrackedResourceForeground#50C878
  • icon.foreground#63C5DA
  • input.background#001E33
  • input.border#002C4C
  • input.foreground#63C5DA
  • input.placeholderForeground#006680
  • inputValidation.errorBackground#002138
  • inputValidation.errorBorder#FF7566
  • inputValidation.errorForeground#63C5DA
  • inputValidation.infoBackground#002138
  • inputValidation.infoBorder#85A1F2
  • inputValidation.infoForeground#63C5DA
  • inputValidation.warningBackground#002138
  • inputValidation.warningBorder#FFAC40
  • inputValidation.warningForeground#63C5DA
  • keybindingLabel.background#002C4C
  • keybindingLabel.border#003459
  • keybindingLabel.foreground#63C5DA
  • keybindingTable.headerBackground#002C4C
  • keybindingTable.rowsBackground#001E33
  • list.activeSelectionForeground#eceff4
  • list.dropBackground#003A638e
  • list.errorForeground#FF7566
  • list.focusOutline#002138
  • list.hoverBackground#002540
  • list.inactiveFocusOutline#002138
  • list.inactiveSelectionBackground#002138
  • list.warningForeground#FFAC40
  • menu.background#002138
  • menu.foreground#63C5DA
  • menu.selectionBackground#003459
  • menu.selectionForeground#eceff4
  • menu.separatorBackground#003459
  • menubar.selectionBackground#003459
  • menubar.selectionForeground#eceff4
  • minimap.errorHighlight#FF7566
  • minimap.findMatchHighlight#00528C8e
  • minimap.selectionHighlight#00528C8e
  • minimap.selectionOccurrenceHighlight#00528C8e
  • minimap.warningHighlight#FFAC40
  • minimapGutter.addedBackground#2E8B57
  • minimapGutter.deletedBackground#FF7566
  • minimapGutter.modifiedBackground#005999
  • panel.border#003459
  • panelSection.dropBackground#003A638e
  • panelTitle.activeForeground#eceff4
  • panelTitle.inactiveForeground#63C5DA
  • peekView.border#003459
  • peekViewEditor.background#001E33
  • peekViewEditor.matchHighlightBackground#003A63
  • peekViewResult.background#001E33
  • peekViewResult.fileForeground#63C5DA
  • peekViewTitle.background#002138
  • peekViewTitleDescription.foreground#006680
  • peekViewTitleLabel.foreground#63C5DA
  • pickerGroup.border#003459
  • pickerGroup.foreground#00CCFF
  • problemsErrorIcon.foreground#FF7566
  • problemsInfoIcon.foreground#85A1F2
  • problemsWarningIcon.foreground#FFAC40
  • quickInput.background#001E33
  • quickInput.foreground#63C5DA
  • quickInputList.focusBackground#003459
  • quickInputList.focusForeground#eceff4
  • quickInputList.focusIconForeground#eceff4
  • quickInputTitle.background#003459
  • sash.hoverBorder#0094FF
  • scrollbarSlider.activeBackground#0059998e
  • scrollbarSlider.background#003A638e
  • scrollbarSlider.hoverBackground#004b808e
  • selection.background#003A63
  • settings.checkboxBackground#001E33
  • settings.checkboxBorder#003459
  • settings.checkboxForeground#63C5DA
  • settings.dropdownBackground#001E33
  • settings.dropdownBorder#003459
  • settings.dropdownForeground#63C5DA
  • settings.dropdownListBorder#003459
  • settings.focusedRowBackground#001E33
  • settings.focusedRowBorder#003459
  • settings.headerBorder#003459
  • settings.headerForeground#eceff4
  • settings.modifiedItemIndicator#0094FF
  • settings.numberInputBackground#001E33
  • settings.numberInputBorder#003459
  • settings.numberInputForeground#63C5DA
  • settings.rowHoverBackground#001E33
  • settings.sashBorder#003459
  • settings.settingsHeaderHoverForeground#eceff4
  • settings.textInputBackground#001E33
  • settings.textInputBorder#003459
  • settings.textInputForeground#63C5DA
  • sideBar.background#001E33
  • sideBar.dropBackground#003A638e
  • sideBar.foreground#63C5DA
  • sideBarSectionHeader.background#001E33
  • sideBarTitle.foreground#63C5DA
  • statusBar.background#001E33
  • statusBar.debuggingBackground#004B80
  • statusBar.debuggingForeground#eceff4
  • statusBar.focusBorder#00000000
  • statusBar.foreground#63C5DA
  • statusBar.noFolderBackground#001E33
  • statusBar.noFolderForeground#63C5DA
  • statusBarItem.activeBackground#003A63
  • statusBarItem.focusBorder#00000000
  • statusBarItem.hoverBackground#003459
  • statusBarItem.remoteBackground#006680
  • statusBarItem.remoteForeground#eceff4
  • tab.activeBackground#002540
  • tab.activeBorder#00CCFF
  • tab.activeForeground#eceff4
  • tab.activeModifiedBorder#0094FF
  • tab.border#00000000
  • tab.inactiveBackground#001E33
  • tab.inactiveForeground#006680
  • tab.inactiveModifiedBorder#0094FF
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#4F86F7
  • terminal.ansiBrightBlack#2E3440
  • terminal.ansiBrightBlue#079BF5
  • terminal.ansiBrightCyan#00CCFF
  • terminal.ansiBrightGreen#0BDA51
  • terminal.ansiBrightMagenta#F77FBE
  • terminal.ansiBrightRed#FF7566
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFD37
  • terminal.ansiCyan#AEC6CF
  • terminal.ansiGreen#50C878
  • terminal.ansiMagenta#FC8EAC
  • terminal.ansiRed#F9968B
  • terminal.ansiWhite#E5E9F0
  • terminal.ansiYellow#FEF08A
  • terminal.dropBackground#003A638e
  • terminal.findMatchBackground#00528C8e
  • terminal.findMatchBorder#00CCFF
  • terminal.foreground#63C5DA
  • terminal.inactiveSelectionBackground#002E4F
  • terminal.selectionBackground#003A63
  • terminalCommandDecoration.defaultBackground#63C5DA
  • terminalCommandDecoration.errorBackground#FF7566
  • terminalCommandDecoration.successBackground#85A1F2
  • terminalCursor.foreground#0094FF
  • terminalOverviewRuler.cursorForeground#0094FF
  • terminalOverviewRuler.findMatchForeground#00528C8e
  • textBlockQuote.background#001E33
  • textBlockQuote.border#0094FF
  • textCodeBlock.background#001E33
  • textLink.activeForeground#AEC6CF
  • textLink.foreground#0094FF
  • textPreformat.foreground#85A1F2
  • textSeparator.foreground#006680
  • titleBar.activeBackground#001E33
  • titleBar.activeForeground#63C5DA
  • titleBar.inactiveBackground#002138
  • titleBar.inactiveForeground#006680
  • tree.indentGuidesStroke#004B80
  • walkThrough.embeddedEditorBackground#001E33
  • walkthrough.stepTitle.foreground#63C5DA
  • welcomePage.progress.foreground#0094FF
  • welcomePage.tileBackground#001E33
  • welcomePage.tileHoverBackground#003459

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#006680italic
keyword.other.definition#ff0000—
keyword.control, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.other.fn.rust, keyword.other.rust#00CCFF—
keyword, storage.type, storage.modifier, keyword.other.definition, support.type.property-name#00CCFF—
keyword.other.unit#00CCFF—
variable, string constant.other.placeholder#FFAD00—
meta.block variable.other#FFAD00—
variable.parameter, support.other.variable, string.other.link, meta.attribute.python#FFAD00—
entity.other.attribute-name.id.css, source.sass keyword.control#FFAD00—
variable.other.object#0BDA51—
variable.other.property, variable.other.object.property#00CCFFitalic
constant.numeric, constant.language, support.constant, constant.character, constant.escape#F77FBEitalic
keyword.other#F77FBE
constant.other.color#F77FBEitalic
variable.language#F77FBEitalic
source.js constant.other.object.key.js string.unquoted.label.js#F77FBEitalic
support.type, entity.name.type.numeric.rust, entity.name.type.primitive#FFFD37—
entity.other.attribute-name#FFFD37italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFFD37italic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFFD37—
entity.other.attribute-name.class#FFFD37—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#079BF5—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#079BF5—
entity.name.method.js#079BF5italic
meta.class-method.js entity.name.function.js, variable.function.constructor#079BF5—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator.js, meta.decorator.ts#079BF5italic
entity.other.attribute-name.pseudo-class.css, meta.selector.css#079BF5—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF7566—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#63C5DA—
support.class.component#0BDA51—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#DBD59D—
invalid, invalid.illegal#FF7566—
markup.inserted#FEF08A—
markup.deleted#FF7566—
markup.changed#85A1F2—
string.regexp#0BDA51—
constant.character.escape#079BF5—
*url*, *link*, *uri*—underline
source.json meta.structure.dictionary.json support.type.property-name.json#00CCFF—
text.html.markdown, punctuation.definition.list_item.markdown#63C5DA—
text.html.markdown markup.inline.raw.markdown#00CCFF—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#0BDA51—
markdown.heading, entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#079BF5—
markup.quote punctuation.definition.blockquote.markdown#001E33—
string.other.link.title.markdown#FFAD00—
string.other.link.description.title.markdown#DBD59D—
constant.other.reference.link.markdown#FFAD00—
markup.raw.block.fenced.markdown#000000—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FFAD00—
variable.language.fenced.markdown#0BDA51—
meta.separator#eceff4bold
markup.italic#079BF5italic
markup.bold, markup.bold string#079BF5bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#079BF5italic bold
markup.underline#079BF5underline
markup.raw.block#079BF5—
markup.quote—italic
markup.table#63C5DA—

Shiki preview

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

Loading...