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#FF6B9A
  • activityBar.background#0C0C0C
  • activityBar.border#0C0C0C
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#767676
  • activityBarBadge.background#FF6B9A
  • activityBarBadge.foreground#0C0C0C
  • badge.background#FF6B9A
  • badge.foreground#0C0C0C
  • breadcrumb.activeSelectionForeground#FF6B9A
  • breadcrumb.background#0C0C0C
  • breadcrumb.focusForeground#D4D4D4
  • breadcrumb.foreground#767676
  • button.background#FF6B9A
  • button.foreground#0C0C0C
  • button.hoverBackground#FF8AAF
  • button.secondaryBackground#222222
  • button.secondaryForeground#D4D4D4
  • button.secondaryHoverBackground#2A2A2A
  • debugToolBar.background#141414
  • debugToolBar.border#222222
  • descriptionForeground#A0A0A0
  • diffEditor.insertedLineBackground#4EC9B014
  • diffEditor.insertedTextBackground#4EC9B026
  • diffEditor.removedLineBackground#FF6B9A14
  • diffEditor.removedTextBackground#FF6B9A26
  • dropdown.background#141414
  • dropdown.border#222222
  • dropdown.foreground#D4D4D4
  • editor.background#0C0C0C
  • editor.findMatchBackground#FF6B9A55
  • editor.findMatchBorder#FF6B9A
  • editor.findMatchHighlightBackground#DCDCAA33
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#1a1a1a6b
  • editor.selectionBackground#222222
  • editor.wordHighlightBackground#22222286
  • editor.wordHighlightStrongBackground#2A2A2A86
  • editorBracketMatch.background#222222
  • editorBracketMatch.border#767676
  • editorCursor.foreground#D4D4D4
  • editorError.foreground#FF8AAF
  • editorGroupHeader.noTabsBackground#0C0C0C
  • editorGroupHeader.tabsBackground#0C0C0C
  • editorGroupHeader.tabsBorder#0C0C0C
  • editorGutter.addedBackground#4EC9B0
  • editorGutter.background#0C0C0C
  • editorGutter.deletedBackground#FF6B9A
  • editorGutter.modifiedBackground#A0A0A0
  • editorHint.foreground#A0A0A0
  • editorHoverWidget.background#141414
  • editorHoverWidget.border#222222
  • editorHoverWidget.foreground#D4D4D4
  • editorIndentGuide.activeBackground1#767676
  • editorIndentGuide.background1#1A1A1A
  • editorInfo.foreground#4EC9B0
  • editorLineNumber.activeForeground#A0A0A0
  • editorLineNumber.foreground#767676
  • editorRuler.foreground#1A1A1A
  • editorSuggestWidget.background#141414
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.foreground#D4D4D4
  • editorSuggestWidget.highlightForeground#FF6B9A
  • editorSuggestWidget.selectedBackground#222222
  • editorWarning.foreground#DCDCAA
  • editorWhitespace.foreground#222222
  • editorWidget.background#141414
  • editorWidget.border#222222
  • editorWidget.foreground#D4D4D4
  • errorForeground#FF8AAF
  • focusBorder#FF6B9A
  • gauge.background#222222
  • gitDecoration.addedResourceForeground#4EC9B0
  • gitDecoration.conflictingResourceForeground#FF8AAF
  • gitDecoration.deletedResourceForeground#FF6B9A
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#DCDCAA
  • gitDecoration.untrackedResourceForeground#4EC9B0
  • input.background#141414
  • input.border#222222
  • input.foreground#D4D4D4
  • input.placeholderForeground#767676
  • inputOption.activeBackground#222222
  • inputOption.activeBorder#FF6B9A
  • list.activeSelectionBackground#1A1A1A
  • list.hoverBackground#141414
  • list.inactiveSelectionBackground#141414
  • menu.background#141414
  • menu.foreground#D4D4D4
  • menu.selectionBackground#222222
  • menu.selectionForeground#D4D4D4
  • menu.separatorBackground#222222
  • notificationCenter.border#222222
  • notifications.background#141414
  • notifications.border#222222
  • notifications.foreground#D4D4D4
  • notificationsErrorIcon.foreground#FF8AAF
  • notificationsInfoIcon.foreground#4EC9B0
  • notificationsWarningIcon.foreground#DCDCAA
  • notificationToast.border#222222
  • panel.background#0C0C0C
  • panel.border#222222
  • panelTitle.activeBorder#FF6B9A
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#767676
  • peekView.border#FF6B9A
  • peekViewEditor.background#0C0C0C
  • peekViewEditor.matchHighlightBackground#FF6B9A44
  • peekViewResult.background#141414
  • peekViewResult.fileForeground#D4D4D4
  • peekViewResult.lineForeground#A0A0A0
  • peekViewResult.matchHighlightBackground#FF6B9A44
  • peekViewResult.selectionBackground#222222
  • peekViewTitle.background#141414
  • peekViewTitleDescription.foreground#A0A0A0
  • peekViewTitleLabel.foreground#D4D4D4
  • problemsErrorIcon.foreground#FF8AAF
  • problemsInfoIcon.foreground#4EC9B0
  • problemsWarningIcon.foreground#DCDCAA
  • progressBar.background#FF6B9A
  • quickInput.background#0C0C0C
  • quickInput.foreground#D4D4D4
  • quickInputList.focusBackground#222222
  • quickInputList.focusForeground#D4D4D4
  • quickInputList.focusIconForeground#FF6B9A
  • scrollbarSlider.activeBackground#A0A0A066
  • scrollbarSlider.background#22222299
  • scrollbarSlider.hoverBackground#76767666
  • selection.background#222222
  • sideBar.background#0C0C0C
  • sideBar.border#0C0C0C
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#0C0C0C
  • sideBarSectionHeader.foreground#A0A0A0
  • sideBarTitle.foreground#A0A0A0
  • statusBar.background#0C0C0C
  • statusBar.debuggingBackground#FF6B9A
  • statusBar.debuggingForeground#0C0C0C
  • statusBar.foreground#D4D4D4
  • statusBar.noFolderBackground#0C0C0C
  • statusBar.noFolderForeground#D4D4D4
  • tab.activeBackground#0C0C0C
  • tab.activeBorder#FF6B9A
  • tab.activeBorderTop#0C0C0C
  • tab.activeForeground#D4D4D4
  • tab.border#0C0C0C
  • tab.inactiveBackground#0C0C0C
  • tab.inactiveForeground#767676
  • tab.lastPinnedBorder#1A1A1A
  • tab.unfocusedActiveBackground#0C0C0C
  • tab.unfocusedActiveBorder#767676
  • tab.unfocusedActiveForeground#A0A0A0
  • tab.unfocusedInactiveBackground#0C0C0C
  • tab.unfocusedInactiveForeground#767676
  • terminal.ansiBlack#0C0C0C
  • terminal.ansiBlue#A0A0A0
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#D4D4D4
  • terminal.ansiBrightCyan#7DDBC8
  • terminal.ansiBrightGreen#7DDBC8
  • terminal.ansiBrightMagenta#FF6B9A
  • terminal.ansiBrightRed#FF8AAF
  • terminal.ansiBrightWhite#F2F2F2
  • terminal.ansiBrightYellow#EFE6B6
  • terminal.ansiCyan#4EC9B0
  • terminal.ansiGreen#4EC9B0
  • terminal.ansiMagenta#FF6B9A
  • terminal.ansiRed#FF6B9A
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#DCDCAA
  • terminal.background#0C0C0C
  • terminal.foreground#D4D4D4
  • terminal.selectionBackground#222222
  • terminalCursor.foreground#D4D4D4
  • textLink.activeForeground#FFB1C9
  • textLink.foreground#FF8AAF
  • titleBar.activeBackground#0C0C0C
  • titleBar.activeForeground#D4D4D4
  • titleBar.inactiveBackground#0C0C0C
  • titleBar.inactiveForeground#767676

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#767676—
keyword, keyword.control, keyword.operator.new, storage, storage.type#FF6B9A—
string#4EC9B0—
constant.numeric, constant.character, constant.other#DCDCAA—
constant.language.boolean, constant.language.null#DCDCAA—
entity.name.function, meta.function-call, support.function, variable.function#D4D4D4—
variable, identifier, variable.other, variable.parameter#D4D4D4—
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, support.class, support.type#A0A0A0—
operator, keyword.operator#D4D4D4—
punctuation, meta.brace, meta.delimiter#767676—
invalid#F2F2F2underline
variable.other.property, support.variable.property, support.type.property-name, support.type.property-name.json, support.type.property-name.json.comments, support.type.property-name.css, support.type.vendored.property-name, meta.property-name, meta.object-literal.key string, meta.object-literal.key.ts, meta.object-literal.key.tsx, meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key, entity.name.tag#D4D4D4—
string.regexp, constant.character.escape#DCDCAA—
Minimal Pink by kotovsky - VS Code Theme