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#ECE9EC
  • activityBar.dropBackground#0CABA666
  • activityBar.foreground#B6034B
  • activityBarBadge.background#52E7E1
  • activityBarBadge.foreground#0C001F
  • badge.background#52E7E1
  • badge.foreground#0C001F
  • breadcrumb.activeSelectionForeground#00837F
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#00837FCC
  • breadcrumb.foreground#0C001FBB
  • button.background#FF82B466
  • button.foreground#0C001F
  • button.hoverBackground#FF82B499
  • debugToolBar.background#E7E4E7
  • descriptionForeground#0C001FBB
  • diffEditor.insertedTextBackground#009E3533
  • diffEditor.removedTextBackground#BD000033
  • dropdown.background#FFFFFF
  • dropdown.foreground#0C001F
  • editor.background#FFFFFF
  • editor.findMatchBackground#EEDA0066
  • editor.findMatchHighlightBackground#EEDA0044
  • editor.foreground#0C001F
  • editor.hoverHighlightBackground#ECE9EC
  • editor.inactiveSelectionBackground#E6247244
  • editor.lineHighlightBackground#F8F7F8
  • editor.rangeHighlightBackground#ECE9EC
  • editor.selectionBackground#E6247266
  • editor.selectionHighlightBackground#0CABA644
  • editor.wordHighlightBackground#EEDA0044
  • editor.wordHighlightStrongBackground#0081C244
  • editorBracketMatch.background#0081C244
  • editorBracketMatch.border#0000
  • editorCodeLens.foreground#B6034BCC
  • editorCursor.foreground#00837F
  • editorError.foreground#BD0000
  • editorGroup.border#0C001F99
  • editorGroup.dropBackground#0CABA666
  • editorGroup.emptyBackground#F8F7F8
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#F8F7F8
  • editorGroupHeader.tabsBorder#0000
  • editorGutter.addedBackground#06B741CC
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#E62424CC
  • editorGutter.modifiedBackground#0CABA6CC
  • editorHint.foreground#B6034B
  • editorHoverWidget.background#ECE9EC
  • editorHoverWidget.border#0C001F11
  • editorHoverWidget.statusBarBackground#ECE9EC
  • editorIndentGuide.activeBackground#0C001F99
  • editorIndentGuide.background#0C001F11
  • editorInfo.foreground#00837F
  • editorLineNumber.activeForeground#0C001F
  • editorLineNumber.foreground#0C001F99
  • editorOverviewRuler.addedForeground#06B741CC
  • editorOverviewRuler.border#0C001F33
  • editorOverviewRuler.bracketMatchForeground#0081C244
  • editorOverviewRuler.commonContentForeground#0000ffCC
  • editorOverviewRuler.currentContentForeground#ffffffCC
  • editorOverviewRuler.deletedForeground#E62424CC
  • editorOverviewRuler.errorForeground#E62424CC
  • editorOverviewRuler.findMatchForeground#00ff00CC
  • editorOverviewRuler.incomingContentForeground#00ff00CC
  • editorOverviewRuler.infoForeground#0CABA6CC
  • editorOverviewRuler.modifiedForeground#0CABA6CC
  • editorOverviewRuler.rangeHighlightForeground#0000ffCC
  • editorOverviewRuler.selectionHighlightForeground#E6247244
  • editorOverviewRuler.warningForeground#F27C18CC
  • editorRuler.foreground#0C001F33
  • editorSuggestWidget.background#E7E4E7
  • editorSuggestWidget.border#0C001F33
  • editorSuggestWidget.foreground#0C001FBB
  • editorSuggestWidget.highlightForeground#0C001F
  • editorSuggestWidget.selectedBackground#4B1E9766
  • editorUnnecessaryCode.border#0C001F99
  • editorUnnecessaryCode.opacity#00000088
  • editorWarning.foreground#D16100
  • editorWhitespace.foreground#0C001F22
  • editorWidget.background#E7E4E7
  • editorWidget.border#0C001F33
  • editorWidget.foreground#0C001F
  • editorWidget.resizeBorder#0C001F99
  • errorForeground#BD0000
  • extensionButton.prominentBackground#FF82B466
  • extensionButton.prominentForeground#0C001F
  • extensionButton.prominentHoverBackground#FF82B499
  • focusBorder#0C001F33
  • foreground#0C001F
  • gitDecoration.addedResourceForeground#009E35
  • gitDecoration.conflictingResourceForeground#B6034B
  • gitDecoration.deletedResourceForeground#BD0000
  • gitDecoration.ignoredResourceForeground#0C001F66
  • gitDecoration.modifiedResourceForeground#00837F
  • gitDecoration.untrackedResourceForeground#D16100
  • icon.foreground#0C001F
  • input.background#ECE9EC
  • input.border#0000
  • input.foreground#0C001F
  • input.placeholderForeground#0C001F99
  • inputOption.activeBackground#FF82B466
  • inputOption.activeBorder#0000
  • inputValidation.errorBackground#BD0000
  • inputValidation.errorBorder#E62424CC
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#00837F
  • inputValidation.infoBorder#0CABA6CC
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#D16100
  • inputValidation.warningBorder#F27C18CC
  • inputValidation.warningForeground#FFFFFF
  • list.activeSelectionBackground#4B1E9766
  • list.activeSelectionForeground#0C001F
  • list.dropBackground#0CABA666
  • list.errorForeground#BD0000
  • list.focusBackground#4B1E9766
  • list.focusForeground#0C001F
  • list.highlightForeground#0C001F
  • list.hoverBackground#4B1E9744
  • list.hoverForeground#0C001F
  • list.inactiveSelectionBackground#4B1E9744
  • list.inactiveSelectionForeground#0C001F
  • list.invalidItemForeground#BD0000
  • list.warningForeground#D16100
  • listFilterWidget.background#FFFFFF
  • listFilterWidget.noMatchesOutline#E62424CC
  • listFilterWidget.outline#0C001F33
  • minimap.findMatchHighlight#EEDA0066
  • minimap.selectionHighlight#E6247266
  • notificationCenter.border#0C001F33
  • notificationCenterHeader.background#FFFFFF
  • notificationCenterHeader.foreground#0C001F
  • notificationLink.foreground#00837F
  • notifications.background#E7E4E7
  • notifications.border#0C001F33
  • notifications.foreground#0C001F
  • notificationsErrorIcon.foreground#BD0000
  • notificationsInfoIcon.foreground#00837F
  • notificationsWarningIcon.foreground#D16100
  • notificationToast.border#0C001F33
  • panel.background#ECE9EC
  • panel.border#0C001F11
  • panel.dropBackground#0CABA666
  • panelTitle.activeBorder#E62472CC
  • panelTitle.activeForeground#0C001F
  • panelTitle.inactiveForeground#0C001FBB
  • peekView.border#0C001F99
  • peekViewEditor.background#FFFFFF
  • peekViewEditor.matchHighlightBackground#E7E4E7
  • peekViewResult.background#F8F7F8
  • peekViewResult.fileForeground#00837F
  • peekViewResult.lineForeground#0C001F
  • peekViewResult.matchHighlightBackground#EEDA0044
  • peekViewResult.selectionBackground#EEDA0066
  • peekViewTitle.background#ECE9EC
  • peekViewTitleDescription.foreground#0C001F
  • peekViewTitleLabel.foreground#0C001F99
  • pickerGroup.border#0C001F99
  • pickerGroup.foreground#0C001F99
  • progressBar.background#00837F
  • quickInput.background#E7E4E7
  • quickInput.foreground#0C001F
  • selection.background#E6247266
  • settings.dropdownBackground#ECE9EC
  • settings.dropdownForeground#0C001F
  • settings.headerForeground#B6034B
  • settings.modifiedItemIndicator#0CABA6CC
  • settings.textInputBackground#ECE9EC
  • settings.textInputForeground#0C001F
  • sideBar.background#F8F7F8
  • sideBar.dropBackground#E6247266
  • sideBar.foreground#0C001FBB
  • sideBarSectionHeader.background#F8F7F8
  • sideBarSectionHeader.border#0C001F11
  • sideBarSectionHeader.foreground#0C001F99
  • sideBarTitle.foreground#0C001F
  • statusBar.background#E7E4E7
  • statusBar.border#0000
  • statusBar.debuggingBackground#AD7DFF
  • statusBar.debuggingBorder#0000
  • statusBar.foreground#0C001F
  • statusBar.noFolderBackground#FFFFFF
  • statusBar.noFolderBorder#0000
  • statusBarItem.activeBackground#0CABA666
  • statusBarItem.hoverBackground#0CABA644
  • statusBarItem.prominentBackground#52E7E1
  • statusBarItem.prominentForeground#0C001F
  • statusBarItem.remoteBackground#FF82B466
  • statusBarItem.remoteForeground#0C001F
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#0C001F
  • tab.border#0000
  • tab.inactiveBackground#ECE9EC
  • tab.inactiveForeground#0C001F99
  • tab.unfocusedActiveForeground#0C001FBB
  • tab.unfocusedHoverBorder#E62472CC
  • tab.unfocusedInactiveForeground#0C001F99
  • terminal.ansiBlack#0C001FBB
  • terminal.ansiBlue#0081C2
  • terminal.ansiBrightBlack#0C001F
  • terminal.ansiBrightBlue#005C8A
  • terminal.ansiBrightCyan#00837F
  • terminal.ansiBrightGreen#009E35
  • terminal.ansiBrightMagenta#B6034B
  • terminal.ansiBrightRed#BD0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D0BF00
  • terminal.ansiCyan#0CABA6
  • terminal.ansiGreen#06B741
  • terminal.ansiMagenta#E62472
  • terminal.ansiRed#E62424
  • terminal.ansiWhite#F8F7F8
  • terminal.ansiYellow#EEDA00
  • terminal.selectionBackground#0CABA666
  • terminalCursor.background#E6247266
  • terminalCursor.foreground#E6247266
  • textBlockQuote.background#ECE9EC
  • textBlockQuote.border#E62472CC
  • textCodeBlock.background#F8F7F8
  • textLink.activeForeground#00837F
  • textLink.foreground#00837FCC
  • textPreformat.foreground#00837F
  • titleBar.activeBackground#E7E4E7
  • titleBar.activeForeground#0C001F
  • titleBar.border#0000
  • titleBar.inactiveBackground#F8F7F8
  • titleBar.inactiveForeground#0C001FBB
  • walkThrough.embeddedEditorBackground#F8F7F8
  • welcomePage.background#FFFFFF
  • welcomePage.buttonBackground#F8F7F8
  • welcomePage.buttonHoverBackground#ECE9EC
  • widget.shadow#0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#0C001F99
comment.line#0C001F99italic
comment.block.documentation#0C001FBB
comment.single#0C001F99
constant.language.dart#00837F
constant.language.boolean.false#BD0000
constant.language.boolean.true#009E35
constant.language.import-export-all#005C8A
constant.language.null#BD0000
constant.language.symbol#B6034B
constant.numeric#B6034B
entity.name.tag#BD0000
entity.name.tag.reference#4B1E97
entity.name.tag.yaml#D16100
entity.name.type.module#D16100
entity.name.function#005C8A
entity.other.attribute-name.id#D16100
entity.other.attribute-name.class#D0BF00
entity.other.attribute-name#005C8A
keyword#4B1E97
keyword.control#4B1E97
keyword.control.import#4B1E97italic
keyword.control.from#4B1E97italic
keyword.control.flow#4B1E97
keyword.operator#0C001F
keyword.operator.logical#0C001F
keyword.other.unit#B6034B
markup.bold#280E54bold
markup.italic#005C8Aitalic
markup.fenced_code#0C001F
markup.heading#0C001Fbold
markup.quote#0C001FBBitalic
markup.underline.link#00837F
meta.brace.round#0C001F
meta.brace.square#0C001F
meta.class#D16100
meta.jsx.children#0C001F
meta.object#B6034B
meta.property-name.css#06B741
meta.property-value.css#06B741
meta.selector#06B741
meta.structure.dictionary#280E54
meta.tag.attributes#B6034B
meta.type.parameters#D0BF00
meta.var.expr#4B1E97
punctuation.accessor#0C001F
punctuation.definition.array#0C001F
punctuation.definition.block#0C001F
punctuation.definition.dictionary#0C001F
punctuation.definition.heading#D16100
punctuation.definition.list#BD0000
punctuation.definition.parameters#0C001F
punctuation.definition.string#009E35
punctuation.definition.tag#0C001F
punctuation.definition.typeparameters#0C001F
punctuation.definition.template-expression#BD0000
punctuation.section#0C001FBB
punctuation.separator#0C001F
punctuation.terminator#0C001F99
storage#4B1E97
string#009E35
support.class#D16100
support.class.component#D16100
support.constant.color#005C8A
support.constant.font-name#005C8A
support.constant.property-value#005C8A
support.function#4B1E97
support.type.property-name#00837F
support.type.property-name.css#0C001F
support.type.vendored#D16100
variable#00837F
variable.language.super#06B741italic
variable.language.this#EEDA00
variable.other#00837F
variable.other.constant#00837F
variable.other.readwrite.alias#00837F

Shiki preview

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

Loading...

Nu Disco Theme - Coding Theme