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#16181d
  • activityBar.border#1f2229
  • activityBar.foreground#b4b8c4
  • activityBar.inactiveForeground#5c5f6d
  • activityBarBadge.background#d97c9e
  • activityBarBadge.foreground#16181d
  • badge.background#d97c9e
  • badge.foreground#16181d
  • breadcrumb.activeSelectionForeground#7eb3c7
  • breadcrumb.focusForeground#b4b8c4
  • breadcrumb.foreground#858997
  • button.background#d97c9e
  • button.foreground#16181d
  • button.hoverBackground#e98aac
  • diffEditor.insertedTextBackground#88b3a026
  • diffEditor.removedTextBackground#c1788426
  • editor.background#1a1d23
  • editor.findMatchBackground#c9b5894d
  • editor.findMatchHighlightBackground#c9b58926
  • editor.findRangeHighlightBackground#c9b5891a
  • editor.foreground#b4b8c4
  • editor.inactiveSelectionBackground#7eb3c71a
  • editor.selectionBackground#7eb3c733
  • editor.selectionHighlightBackground#7eb3c71a
  • editorCursor.foreground#d97c9e
  • editorError.foreground#c17884
  • editorGutter.addedBackground#88b3a0
  • editorGutter.background#1a1d23
  • editorGutter.deletedBackground#c17884
  • editorGutter.modifiedBackground#c9b589
  • editorHint.foreground#858997
  • editorIndentGuide.activeBackground#5c5f6d
  • editorIndentGuide.background#1f2229
  • editorInfo.foreground#7eb3c7
  • editorLineNumber.activeForeground#858997
  • editorLineNumber.foreground#5c5f6d
  • editorOverviewRuler.addedForeground#88b3a0
  • editorOverviewRuler.border#1f2229
  • editorOverviewRuler.deletedForeground#c17884
  • editorOverviewRuler.errorForeground#c17884
  • editorOverviewRuler.findMatchForeground#c9b589
  • editorOverviewRuler.modifiedForeground#c9b589
  • editorOverviewRuler.warningForeground#d19a6f
  • editorSuggestWidget.background#232730
  • editorSuggestWidget.border#1f2229
  • editorSuggestWidget.selectedBackground#1f2229
  • editorWarning.foreground#d19a6f
  • editorWidget.background#232730
  • editorWidget.border#1f2229
  • gitDecoration.conflictingResourceForeground#d19a6f
  • gitDecoration.deletedResourceForeground#c17884
  • gitDecoration.ignoredResourceForeground#5c5f6d
  • gitDecoration.modifiedResourceForeground#c9b589
  • gitDecoration.untrackedResourceForeground#88b3a0
  • input.background#16181d
  • input.border#1f2229
  • input.foreground#b4b8c4
  • input.placeholderForeground#5c5f6d
  • inputOption.activeBorder#7eb3c7
  • list.activeSelectionBackground#1f2229
  • list.activeSelectionForeground#b4b8c4
  • list.focusBackground#1f2229
  • list.highlightForeground#7eb3c7
  • list.hoverBackground#1f222980
  • list.inactiveSelectionBackground#1f2229
  • merge.currentHeaderBackground#7eb3c733
  • merge.incomingHeaderBackground#a188b833
  • minimap.errorHighlight#c17884
  • minimap.findMatchHighlight#c9b589
  • minimap.selectionHighlight#7eb3c7
  • minimap.warningHighlight#d19a6f
  • notificationCenter.border#1f2229
  • notificationCenterHeader.background#232730
  • notifications.background#232730
  • notifications.border#1f2229
  • panel.background#1a1d23
  • panel.border#1f2229
  • panelTitle.activeBorder#7eb3c7
  • panelTitle.activeForeground#b4b8c4
  • panelTitle.inactiveForeground#858997
  • peekView.border#7eb3c7
  • peekViewEditor.background#16181d
  • peekViewResult.background#232730
  • peekViewTitle.background#16181d
  • progressBar.background#7eb3c7
  • scrollbarSlider.activeBackground#8589974d
  • scrollbarSlider.background#5c5f6d33
  • scrollbarSlider.hoverBackground#5c5f6d4d
  • sideBar.background#16181d
  • sideBar.border#1f2229
  • sideBar.foreground#858997
  • sideBarSectionHeader.background#1a1d23
  • sideBarSectionHeader.foreground#b4b8c4
  • sideBarTitle.foreground#b4b8c4
  • statusBar.background#16181d
  • statusBar.debuggingBackground#d19a6f
  • statusBar.debuggingForeground#16181d
  • statusBar.foreground#858997
  • statusBar.noFolderBackground#16181d
  • tab.activeBackground#1a1d23
  • tab.activeBorder#d97c9e
  • tab.activeBorderTop#d97c9e
  • tab.activeForeground#b4b8c4
  • tab.border#1f2229
  • tab.inactiveBackground#16181d
  • tab.inactiveForeground#5c5f6d
  • terminal.ansiBlack#16181d
  • terminal.ansiBlue#6b8db3
  • terminal.ansiBrightBlack#5c5f6d
  • terminal.ansiBrightBlue#83a5cc
  • terminal.ansiBrightCyan#96cce0
  • terminal.ansiBrightGreen#a0ccb8
  • terminal.ansiBrightMagenta#b9a0d1
  • terminal.ansiBrightRed#db909b
  • terminal.ansiBrightWhite#b4b8c4
  • terminal.ansiBrightYellow#e3cea1
  • terminal.ansiCyan#7eb3c7
  • terminal.ansiGreen#88b3a0
  • terminal.ansiMagenta#a188b8
  • terminal.ansiRed#c17884
  • terminal.ansiWhite#b4b8c4
  • terminal.ansiYellow#c9b589
  • terminal.background#1a1d23
  • terminal.foreground#b4b8c4
  • titleBar.activeBackground#16181d
  • titleBar.activeForeground#b4b8c4
  • titleBar.border#1f2229
  • titleBar.inactiveBackground#16181d
  • titleBar.inactiveForeground#5c5f6d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c5f6ditalic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof#d97c9e
entity.name.function, meta.function-call, support.function, meta.method.declaration entity.name.function#7eb3c7
string, string.quoted#88b3a0
constant.numeric#d19a6f
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#c9b589
variable.object.property, meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#6b8db3
constant, constant.language, variable.other.constant, support.constant#a188b8
variable, variable.other.readwrite#b4b8c4
variable.parameter, meta.parameters#858997
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#8b8f9c
punctuation, punctuation.separator, punctuation.terminator#5c5f6d
string.regexp#c17884
constant.character.escape#d19a6f
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d97c9e
entity.other.attribute-name#6b8db3
markup.heading, entity.name.section#d97c9ebold
markup.bold#6b8db3bold
markup.italic#7eb3c7italic
markup.underline.link, string.other.link#6b8db3
markup.inline.raw, markup.fenced_code#88b3a0
support.type.property-name.json#6b8db3
support.type.property-name.css#6b8db3
entity.other.attribute-name.class.css#c9b589
entity.other.attribute-name.id.css#a188b8
São Paulo Night by CarlosDanielDev - VS Code Theme