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.background#021a1e
  • activityBar.border#00000000
  • activityBar.foreground#A8A88D
  • activityBar.inactiveForeground#45475a
  • activityBarBadge.background#2DA697
  • activityBarBadge.foreground#042328
  • badge.background#2DA697
  • badge.foreground#042328
  • breadcrumb.activeSelectionForeground#A8A88D
  • breadcrumb.background#021a1e
  • breadcrumb.focusForeground#B3C4C5
  • breadcrumb.foreground#7a8e8c
  • breadcrumbPicker.background#021a1e
  • button.background#2DA697
  • button.foreground#042328
  • button.hoverBackground#3dc0b0
  • checkbox.background#021a1e
  • checkbox.border#2a5560
  • checkbox.foreground#A8A88D
  • descriptionForeground#45475a
  • diffEditor.insertedLineBackground#54ce6215
  • diffEditor.insertedTextBackground#54ce6220
  • diffEditor.removedLineBackground#f38ba815
  • diffEditor.removedTextBackground#f38ba820
  • dropdown.background#021a1e
  • dropdown.border#2a5560
  • dropdown.foreground#A8A88D
  • editor.background#042328
  • editor.findMatchBackground#f9e2af
  • editor.findMatchForeground#1e1e2e
  • editor.findMatchHighlightBackground#fab38780
  • editor.findMatchHighlightForeground#1e1e2eA0
  • editor.findRangeHighlightBackground#0a354040
  • editor.foreground#A8A88D
  • editor.inactiveSelectionBackground#1a3aaa45
  • editor.lineHighlightBackground#0a3540
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1a3aaa70
  • editorBracketHighlight.foreground1#4d8a7a
  • editorBracketHighlight.foreground2#5a8898
  • editorBracketHighlight.foreground3#6a9070
  • editorBracketHighlight.foreground4#427a85
  • editorBracketHighlight.foreground5#5e8878
  • editorBracketHighlight.foreground6#4a7a8a
  • editorBracketHighlight.unexpectedBracket.foreground#f38ba880
  • editorBracketMatch.background#cba6f730
  • editorBracketMatch.border#00e5bf
  • editorCursor.foreground#8ADF90
  • editorGroupHeader.tabsBackground#021a1e
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.background#052a30
  • editorHoverWidget.background#1e1e2e
  • editorHoverWidget.border#2a5560
  • editorIndentGuide.activeBackground1#2a5560
  • editorIndentGuide.background1#1e3540
  • editorLineNumber.activeForeground#5e8c85
  • editorLineNumber.foreground#1e4a52
  • editorOverviewRuler.border#1e1e2e
  • editorOverviewRuler.findMatchForeground#f9e2afA0
  • editorOverviewRuler.selectionHighlightForeground#000FFF80
  • editorSuggestWidget.background#1e1e2e
  • editorSuggestWidget.border#2a5560
  • editorSuggestWidget.foreground#A8A88D
  • editorSuggestWidget.highlightForeground#B3C4C5
  • editorSuggestWidget.selectedBackground#0a3540
  • editorWhitespace.foreground#1e354060
  • editorWidget.background#1e1e2e
  • editorWidget.border#2a5560
  • editorWidget.foreground#A8A88D
  • errorForeground#f38ba8
  • focusBorder#2DA697
  • foreground#A8A88D
  • gitDecoration.addedResourceForeground#54ce62
  • gitDecoration.conflictingResourceForeground#cba6f7
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.ignoredResourceForeground#587477
  • gitDecoration.modifiedResourceForeground#f9e2af
  • gitDecoration.untrackedResourceForeground#8ADF90
  • input.background#021a1e
  • input.border#2a5560
  • input.foreground#A8A88D
  • input.placeholderForeground#45475a
  • inputOption.activeBackground#2DA69740
  • inputOption.activeBorder#2DA697
  • list.activeSelectionBackground#0a3540
  • list.activeSelectionForeground#B3C4C5
  • list.errorForeground#f38ba8
  • list.focusBackground#0a3540
  • list.highlightForeground#8ADF90
  • list.hoverBackground#0d2f38
  • list.inactiveSelectionBackground#0d2f38
  • list.warningForeground#f9e2af
  • menu.background#021a1e
  • menu.foreground#A8A88D
  • menu.selectionBackground#0a3540
  • menu.selectionForeground#B3C4C5
  • menu.separatorBackground#2a5560
  • menubar.selectionBackground#0a3540
  • menubar.selectionForeground#B3C4C5
  • minimap.findMatchHighlight#f9e2af80
  • minimap.selectionHighlight#1a3aaa80
  • minimapSlider.activeBackground#2a554080
  • minimapSlider.background#2a554040
  • minimapSlider.hoverBackground#2a554060
  • notificationCenterHeader.background#042328
  • notifications.background#021a1e
  • notifications.foreground#A8A88D
  • notificationToast.border#2a5560
  • panel.background#021a1e
  • panel.border#1e1e2e
  • panelTitle.activeBorder#2DA697
  • panelTitle.activeForeground#B3C4C5
  • panelTitle.inactiveForeground#45475a
  • peekView.border#2DA697
  • peekViewEditor.background#021a1e
  • peekViewEditor.matchHighlightBackground#f9e2af40
  • peekViewResult.background#021a1e
  • peekViewResult.matchHighlightBackground#f9e2af40
  • peekViewResult.selectionBackground#0a3540
  • peekViewTitle.background#042328
  • peekViewTitleDescription.foreground#A8A88D
  • peekViewTitleLabel.foreground#B3C4C5
  • pickerGroup.border#2a5560
  • pickerGroup.foreground#45475a
  • progressBar.background#2DA697
  • quickInput.background#021a1e
  • quickInput.foreground#A8A88D
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#2a5560b0
  • scrollbarSlider.background#2a556060
  • scrollbarSlider.hoverBackground#2a556090
  • selection.background#1a3aaa70
  • settings.headerForeground#B3C4C5
  • settings.modifiedItemIndicator#2DA697
  • sideBar.background#021a1e
  • sideBar.border#0a354040
  • sideBar.foreground#A8A88D
  • sideBarSectionHeader.background#042328
  • sideBarSectionHeader.border#1e1e2e
  • sideBarSectionHeader.foreground#A8A88D
  • sideBarTitle.foreground#B3C4C5
  • statusBar.background#D6B58A
  • statusBar.border#00000000
  • statusBar.foreground#091405
  • statusBar.noFolderBackground#7f6b52
  • statusBar.noFolderForeground#091405
  • statusBarItem.hoverBackground#c4a37a
  • statusBarItem.remoteBackground#2DA697
  • statusBarItem.remoteForeground#042328
  • tab.activeBackground#042328
  • tab.activeBorderTop#2DA697
  • tab.activeForeground#D4E4E5
  • tab.border#021a1e
  • tab.hoverBackground#0a3540
  • tab.inactiveBackground#021a1e
  • tab.inactiveForeground#6b8c8f
  • tab.unfocusedActiveBorderTop#1a6860
  • terminal.ansiBlack#042328
  • terminal.ansiBlue#000FFF
  • terminal.ansiBrightBlack#45475a
  • terminal.ansiBrightBlue#73AAA9
  • terminal.ansiBrightCyan#B3C4C5
  • terminal.ansiBrightGreen#8ADF90
  • terminal.ansiBrightMagenta#cba6f7
  • terminal.ansiBrightRed#f38ba8
  • terminal.ansiBrightWhite#B3C4C5
  • terminal.ansiBrightYellow#f9e2af
  • terminal.ansiCyan#2DA697
  • terminal.ansiGreen#54ce62
  • terminal.ansiMagenta#cba6f7
  • terminal.ansiRed#f38ba8
  • terminal.ansiWhite#A8A88D
  • terminal.ansiYellow#f9e2af
  • terminal.background#021a1e
  • terminal.foreground#A8A88D
  • terminalCursor.foreground#8ADF90
  • titleBar.activeBackground#021a1e
  • titleBar.activeForeground#A8A88D
  • titleBar.border#00000000
  • titleBar.inactiveBackground#011418
  • titleBar.inactiveForeground#45475a
  • toolbar.hoverBackground#0a3540
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#54ce62—
string, string.quoted, string.template#2DA697—
punctuation.definition.string#228077—
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import, storage, storage.type, storage.modifier#d6e3e4—
entity.name.function, meta.definition.method entity.name.function, meta.function entity.name.function#A8A88D—
meta.function-call entity.name.function, meta.method-call entity.name.function#A8A88D—
variable, variable.other, variable.other.readwrite, variable.parameter#A8A88D—
variable.language#d6e3e4—
constant, variable.other.constant, constant.language#73AAA9—
constant.numeric#73AAA9—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, entity.name.namespace, entity.name.module, support.type, support.class#6C9585—
entity.other.inherited-class#6C9585italic
support.function, support.function.builtin#B3C4C5—
support.constant#73AAA9—
keyword.operator#B3C4C5—
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters, punctuation.definition.block#7a7a6e—
meta.preprocessor, punctuation.definition.preprocessor, keyword.control.import, keyword.control.export, entity.name.function.preprocessor#B3C4C5—
entity.name.tag#B3C4C5—
entity.other.attribute-name#A8A88D—
support.type.property-name.css, support.type.property-name#B3C4C5—
support.constant.property-value, support.constant.color, support.constant.font-name#2DA697—
invalid, invalid.illegal#f38ba8underline
invalid.deprecated#f38ba8italic
constant.character.escape#73AAA9—
string.regexp#54ce62—
markup.heading, entity.name.section.markdown#B3C4C5bold
markup.bold#B3C4C5bold
markup.italic#73AAA9italic
markup.underline.link, string.other.link.title.markdown#2DA697underline
markup.inline.raw, markup.raw.block#2DA697—
markup.quote#54ce62italic
markup.inserted, meta.diff.header.to-file#54ce62—
markup.deleted, meta.diff.header.from-file#f38ba8—
markup.changed#f9e2af—
meta.diff, meta.diff.header#A8A88D—
support.type.property-name.json#B3C4C5—
entity.name.tag.yaml#B3C4C5—
Seafloor Dark by Tim Destan - VS Code Theme