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#0D1015
  • activityBar.border#07090C
  • activityBar.foreground#7FB8C0
  • activityBar.inactiveForeground#444C56
  • activityBarBadge.background#4DBDA8
  • activityBarBadge.foreground#05100E
  • badge.background#4DBDA8
  • badge.foreground#05100E
  • breadcrumb.activeSelectionForeground#7FB8C0
  • breadcrumb.focusForeground#97A2AC
  • breadcrumb.foreground#626C76
  • breadcrumbPicker.background#0F1217
  • button.background#2D7A72
  • button.foreground#05100E
  • button.hoverBackground#368C82
  • button.secondaryBackground#1E2733
  • button.secondaryForeground#B6BEC7
  • descriptionForeground#828E96
  • dropdown.background#0D1015
  • dropdown.border#22303B
  • dropdown.foreground#B6BEC7
  • editor.background#11141A
  • editor.findMatchBackground#34564F
  • editor.findMatchHighlightBackground#2A4F4C80
  • editor.foreground#B6BEC7
  • editor.inactiveSelectionBackground#141A22
  • editor.lineHighlightBackground#161A21
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1E2733
  • editor.selectionHighlightBackground#171F29
  • editor.wordHighlightBackground#171F29
  • editor.wordHighlightStrongBackground#22303B
  • editorBracketHighlight.foreground1#88A496
  • editorBracketHighlight.foreground2#6B9AC2
  • editorBracketHighlight.foreground3#A99BE6
  • editorBracketHighlight.foreground4#69AE8F
  • editorBracketHighlight.foreground5#73B0B5
  • editorBracketHighlight.foreground6#73B4C2
  • editorBracketHighlight.unexpectedBracket.foreground#E66A6A
  • editorBracketMatch.background#22303B80
  • editorBracketMatch.border#4DBDA8
  • editorCursor.foreground#4DC0B0
  • editorError.foreground#E66A6A
  • editorGroup.border#07090C
  • editorGroupHeader.tabsBackground#0D1015
  • editorGroupHeader.tabsBorder#07090C
  • editorGutter.addedBackground#4DBDA8
  • editorGutter.deletedBackground#E66A6A
  • editorGutter.modifiedBackground#6B9AC2
  • editorHoverWidget.background#0F1217
  • editorHoverWidget.border#22303B
  • editorIndentGuide.activeBackground1#36424E
  • editorIndentGuide.background1#1A212A
  • editorInfo.foreground#6B9AC2
  • editorLineNumber.activeForeground#7FB8C0
  • editorLineNumber.foreground#363D47
  • editorLink.activeForeground#5FC2D6
  • editorSuggestWidget.background#0F1217
  • editorSuggestWidget.border#22303B
  • editorSuggestWidget.highlightForeground#4DC0B0
  • editorSuggestWidget.selectedBackground#1E2733
  • editorWarning.foreground#E0B458
  • editorWhitespace.foreground#20272F
  • editorWidget.background#0F1217
  • editorWidget.border#22303B
  • errorForeground#E66A6A
  • focusBorder#2D7A72
  • foreground#B6BEC7
  • gitDecoration.conflictingResourceForeground#E0B458
  • gitDecoration.deletedResourceForeground#E66A6A
  • gitDecoration.ignoredResourceForeground#444C56
  • gitDecoration.modifiedResourceForeground#6B9AC2
  • gitDecoration.untrackedResourceForeground#88A496
  • input.background#0D1015
  • input.border#22303B
  • input.foreground#B6BEC7
  • input.placeholderForeground#565F69
  • inputOption.activeBackground#1E2733
  • inputOption.activeBorder#4DBDA8
  • inputValidation.errorBackground#3A1A1A
  • inputValidation.errorBorder#E66A6A
  • list.activeSelectionBackground#1E2733
  • list.activeSelectionForeground#D4DCE3
  • list.errorForeground#E66A6A
  • list.focusBackground#1E2733
  • list.highlightForeground#4DC0B0
  • list.hoverBackground#161A21
  • list.inactiveSelectionBackground#141A22
  • list.warningForeground#E0B458
  • menu.background#0F1217
  • menu.border#22303B
  • menu.foreground#B6BEC7
  • menu.selectionBackground#1E2733
  • minimap.selectionHighlight#4DBDA880
  • minimapGutter.addedBackground#4DBDA8
  • minimapGutter.deletedBackground#E66A6A
  • minimapGutter.modifiedBackground#6B9AC2
  • notificationCenterHeader.background#0D1015
  • notifications.background#0F1217
  • notifications.border#22303B
  • panel.background#0F1217
  • panel.border#10151B
  • panelTitle.activeBorder#4DBDA8
  • panelTitle.activeForeground#7FB8C0
  • panelTitle.inactiveForeground#565F69
  • peekView.border#2D7A72
  • peekViewEditor.background#0F1217
  • peekViewResult.background#0D1015
  • peekViewTitle.background#0D1015
  • progressBar.background#4DBDA8
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#4DBDA880
  • scrollbarSlider.background#252F3A80
  • scrollbarSlider.hoverBackground#36424E
  • selection.background#1E2733
  • sideBar.background#0F1217
  • sideBar.border#07090C
  • sideBar.foreground#A2ACB6
  • sideBarSectionHeader.background#0F1217
  • sideBarSectionHeader.border#10151B
  • sideBarSectionHeader.foreground#97A2AC
  • sideBarTitle.foreground#828E96
  • statusBar.background#0D1015
  • statusBar.border#07090C
  • statusBar.debuggingBackground#2D7A72
  • statusBar.debuggingForeground#05100E
  • statusBar.foreground#97A2AC
  • statusBar.noFolderBackground#0D1015
  • statusBarItem.hoverBackground#1E2733
  • statusBarItem.remoteBackground#2D7A72
  • statusBarItem.remoteForeground#05100E
  • tab.activeBackground#11141A
  • tab.activeBorder#00000000
  • tab.activeBorderTop#4DBDA8
  • tab.activeForeground#D4DCE3
  • tab.border#07090C
  • tab.hoverBackground#161A21
  • tab.inactiveBackground#0D1015
  • tab.inactiveForeground#626C76
  • tab.unfocusedActiveForeground#97A2AC
  • terminal.ansiBlack#0D1015
  • terminal.ansiBlue#6B9AC2
  • terminal.ansiBrightBlack#444C56
  • terminal.ansiBrightBlue#7FBFEC
  • terminal.ansiBrightCyan#82D6E6
  • terminal.ansiBrightGreen#9FB8AC
  • terminal.ansiBrightMagenta#C0B4F0
  • terminal.ansiBrightRed#F08585
  • terminal.ansiBrightWhite#E8F0F0
  • terminal.ansiBrightYellow#EDC878
  • terminal.ansiCyan#5FC2D6
  • terminal.ansiGreen#88A496
  • terminal.ansiMagenta#A99BE6
  • terminal.ansiRed#E66A6A
  • terminal.ansiWhite#B6BEC7
  • terminal.ansiYellow#E0B458
  • terminal.background#0F1217
  • terminal.foreground#B6BEC7
  • terminalCursor.foreground#4DC0B0
  • textLink.activeForeground#82D6E6
  • textLink.foreground#5FC2D6
  • titleBar.activeBackground#0D1015
  • titleBar.activeForeground#B6BEC7
  • titleBar.border#07090C
  • titleBar.inactiveBackground#0D1015
  • titleBar.inactiveForeground#565F69
  • tree.indentGuidesStroke#22303B
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#5A6573italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage, storage.type, storage.modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.flow#9B93C4—
keyword.control.return, keyword.control.flow.return, keyword.control.trycatch, keyword.control.loop#63A98C—
entity.name.function, meta.function-call entity.name.function, support.function, meta.definition.method entity.name.function, entity.name.function.member, meta.method-call entity.name.function, support.function.method#6B9AC2—
variable.other.property, meta.property.object, support.variable.property, variable.other.object.property, meta.object-literal.key, variable.other.object.access#BCC4CD—
string, string.quoted, string.template, punctuation.definition.string#69AE8F—
constant.numeric, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#63AC8E—
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class, entity.name.type.class, meta.type.annotation entity.name.type#73B0B5—
variable, variable.other, variable.other.readwrite, variable.other.constant, meta.definition.variable entity.name, variable.other.object#8E94A6—
variable.parameter, meta.parameter, variable.parameter.function, variable.other.readwrite.alias#BCC4CD—
variable.language.this, variable.language.super, constant.language.this#73B4C2italic
support.variable, support.variable.dom, support.variable.property.dom, variable.language.window, variable.other.global#BCC4CD
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arrow, storage.type.function.arrow, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.definition.block, punctuation.section#9AA2AC—
entity.name.tag, punctuation.definition.tag#88A496—
entity.other.attribute-name#A99BE6italic
support.type.property-name.css, support.type.property-name#6B9AC2—
constant.character.escape, constant.other.placeholder, punctuation.definition.template-expression#73B4C2—
markup.heading, entity.name.section#6B9AC2bold
markup.bold#88A496bold
markup.italic#A99BE6italic
markup.inline.raw, markup.fenced_code#69AE8F—
markup.underline.link, string.other.link#5FC2D6underline
invalid, invalid.illegal#E66A6A—
comment.documentation, comment.block.documentation#69737Fitalic
Lagoon Dive Night by Peter Dobi - VS Code Theme