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#17181C
  • activityBar.border#292A33
  • activityBar.foreground#979AAF
  • activityBar.inactiveForeground#666A85
  • activityBarBadge.background#465086
  • activityBarBadge.foreground#CCCDD6
  • badge.background#292A33
  • badge.foreground#CCCDD6
  • button.background#5C5F70
  • button.hoverBackground#465086
  • button.secondaryBackground#5C5F70
  • button.secondaryHoverBackground#465086
  • debugIcon.breakpointCurrentStackframeForeground#B8A8B2
  • debugIcon.breakpointForeground#465086
  • debugTokenExpression.boolean#D380FF
  • debugTokenExpression.name#8980FF
  • debugTokenExpression.number#8FABFF
  • debugTokenExpression.string#7FD2A0
  • debugTokenExpression.value#8FABFF
  • debugToolBar.background#17181C
  • dropdown.background#292A33
  • dropdown.border#474A5C
  • dropdown.foreground#CCCDD6
  • dropdown.listBackground#17181C
  • editor.background#1E1F25
  • editor.findMatchBackground#98809080
  • editor.findMatchHighlightBackground#715B6975
  • editor.foldBackground#46508625
  • editor.foreground#9E9EC2
  • editor.hoverHighlightBackground#46508675
  • editor.inactiveSelectionBackground#5C5F7075
  • editor.lineHighlightBorder#292A33
  • editor.selectionBackground#46508650
  • editor.selectionHighlightBackground#46508675
  • editor.selectionHighlightBorder#B8A8B2
  • editor.stackFrameHighlightBackground#715B6950
  • editor.wordHighlightBackground#46508650
  • editorBracketHighlight.foreground1#7FD2A0
  • editorBracketHighlight.foreground2#8FABFF
  • editorBracketHighlight.foreground3#9969FF
  • editorBracketMatch.background#46508625
  • editorBracketMatch.border#B8A8B275
  • editorCursor.background#5C5F70
  • editorCursor.foreground#B8A8B2
  • editorGroup.border#292A33
  • editorGroupHeader.tabsBackground#17181C
  • editorGroupHeader.tabsBorder#292A33
  • editorLineNumber.activeForeground#979AAF
  • editorLineNumber.foreground#474A5C
  • editorOverviewRuler.border#1E1F25
  • editorOverviewRuler.bracketMatchForeground#715B69
  • editorOverviewRuler.findMatchForeground#715B69
  • editorOverviewRuler.wordHighlightForeground#46508677
  • editorOverviewRuler.wordHighlightTextForeground#465986AA
  • editorWidget.background#1E1F25
  • editorWidget.border#292A33
  • editorWidget.resizeBorder#292A33
  • focusBorder#988090
  • foreground#CCCDD6
  • icon.foreground#979AAF
  • input.background#292A33
  • input.border#474A5C
  • list.activeSelectionBackground#715B69
  • list.hoverBackground#474A5C
  • list.inactiveSelectionBackground#292A33
  • menu.separatorBackground#474A5C
  • minimap.findMatchHighlight#715B69
  • minimap.selectionHighlight#465086
  • minimap.selectionOccurrenceHighlight#465086
  • panel.border#292A33
  • scrollbar.shadow#17181C
  • scrollbarSlider.activeBackground#666A85
  • scrollbarSlider.background#292A33
  • scrollbarSlider.hoverBackground#474A5C
  • settings.modifiedItemIndicator#465086
  • sideBar.background#17181C
  • sideBar.border#292A33
  • sideBar.foreground#979AAF
  • sideBarSectionHeader.background#17181C
  • sideBarSectionHeader.border#292A33
  • statusBar.background#17181C
  • statusBar.border#292A33
  • statusBar.debuggingBackground#5C5F70
  • statusBar.foreground#CCCDD6
  • statusBarItem.hoverBackground#474A5C
  • statusBarItem.remoteBackground#292A33
  • tab.activeBorder#1E1F25
  • tab.activeForeground#CCCDD6
  • tab.border#292A33
  • tab.inactiveBackground#17181C
  • tab.inactiveForeground#666A85
  • textLink.activeForeground#B8A8B2
  • textLink.foreground#988090
  • titleBar.activeBackground#17181C
  • titleBar.activeForeground#979AAF
  • titleBar.border#292A33
  • titleBar.inactiveBackground#1E1F25
  • titleBar.inactiveForeground#666A85
  • toolbar.hoverBackground#292A33
  • widget.border#292A33
  • widget.shadow#17181C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function#FFAD80
storage.type#8980FF
keyword.control, keyword.operator.logical, keyword.operator.comparison#D380FF
keyword.operator#FF8090
string, punctuation.definition.string#7FD2A0
constant.numeric, invalid.illegal.constant.numeric#8FABFF
storage.modifier#9969FF
punctuation.definition.comment#7E7463
comment#7E7463italic
punctuation.separator, punctuation.terminator#A278BA
punctuation#8383AF
punctuation.definition.directive.c#D380FF
keyword.other.typedef.c#9969FF
meta.preprocessor.macro#9E9EC2
variable.parameter.preprocessor.c#FFA7C6
punctuation.separator.dot-access.c#9969FF
variable.parameter.probably#8980FF
entity.name.function.preprocessor.c, constant.other.placeholder.c#8FABFF
source.c constant.character.escape, keyword.other.unit#FBA697
support.type.property-name.json.comments, punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments#7FD2A0
string.quoted.double.json.comments, punctuation.definition.string.begin.json.comments, punctuation.definition.string.end.json.comments#FBA697
constant.language.json.comments#D380FF
Insano Theme by David Baez - VS Code Theme