Skip to main content
CodingTheme

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#191918
  • activityBar.border#19191860
  • activityBar.foreground#dedddf
  • activityBarBadge.background#d18144
  • activityBarBadge.foreground#1c100d
  • badge.background#d18144
  • badge.foreground#1c100d
  • breadcrumb.activeSelectionForeground#909eb8
  • breadcrumb.background#191918
  • breadcrumb.focusForeground#a7b6c9
  • breadcrumb.foreground#dedddf
  • breadcrumbPicker.background#32333c
  • button.background#32333c
  • debugToolBar.background#32333c
  • diffEditor.insertedTextBackground#A7B6C915
  • diffEditor.removedTextBackground#79BEDA20
  • dropdown.background#191918
  • dropdown.border#FAD29510
  • editor.background#191918
  • editor.findMatchBackground#e4eaf070
  • editor.findMatchHighlightBackground#a7b6c950
  • editor.foreground#e4eaf0
  • editor.lineHighlightBackground#32333c50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#a7b6c980
  • editor.selectionHighlightBackground#848da220
  • editorBracketMatch.background#a7b6c980
  • editorBracketMatch.border#e4eaf000
  • editorCursor.foreground#E4EAF0
  • editorError.foreground#d18144
  • editorGroup.border#343c3d30
  • editorGroupHeader.tabsBackground#191918
  • editorGutter.addedBackground#a7b6c980
  • editorGutter.deletedBackground#d18144
  • editorGutter.modifiedBackground#a7b6c980
  • editorIndentGuide.activeBackground#e4eaf0
  • editorIndentGuide.background#848da280
  • editorInfo.foreground#807CAE70
  • editorLineNumber.activeForeground#e4eaf0ba
  • editorLineNumber.foreground#909eb850
  • editorLink.activeForeground#79beda
  • editorMarkerNavigation.background#32333c
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#ff0000
  • editorOverviewRuler.findMatchForeground#ffffff00
  • editorOverviewRuler.infoForeground#ffffff00
  • editorOverviewRuler.warningForeground#ffffff00
  • editorRuler.foreground#343C3D
  • editorWarning.foreground#d18144
  • editorWhitespace.foreground#848da220
  • editorWidget.background#343c3de8
  • editorWidget.border#ffffff00
  • editorWidget.resizeBorder#dedddf
  • extensionButton.prominentBackground#A7B6C990
  • extensionButton.prominentHoverBackground#79BEDA
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#a7b6c9
  • gitDecoration.modifiedResourceForeground#a7b6c9
  • gitDecoration.untrackedResourceForeground#a7b6c9
  • input.background#191918
  • input.border#00000000
  • input.foreground#e4eaf0
  • input.placeholderForeground#848da280
  • inputOption.activeBackground#343c3dca
  • inputValidation.errorBorder#00000000
  • inputValidation.infoBorder#00000000
  • inputValidation.warningBorder#00000000
  • list.activeSelectionBackground#343c3d
  • list.activeSelectionForeground#e4eaf0
  • list.focusBackground#343c3d90
  • list.focusForeground#e4eaf0
  • list.highlightForeground#a7b6c9
  • list.hoverBackground#343c3d90
  • list.hoverForeground#e4eaf0
  • list.inactiveSelectionBackground#343c3d20
  • list.inactiveSelectionForeground#e4eaf0
  • list.warningForeground#e5a577
  • listFilterWidget.background#19191830
  • listFilterWidget.noMatchesOutline#19191830
  • listFilterWidget.outline#19191830
  • menu.background#191918
  • menu.border#343c3d
  • menu.foreground#a7b6c9
  • menu.selectionBackground#32333c
  • menu.selectionBorder#00000000
  • menu.selectionForeground#e4eaf0
  • menu.separatorBackground#909eb8
  • menubar.selectionBackground#32333C
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#e4eaf0
  • minimap.background#191918
  • minimapGutter.addedBackground#79BEDA
  • minimapGutter.deletedBackground#E4EAF0
  • minimapGutter.modifiedBackground#A7B6C9
  • minimapSlider.activeBackground#A7B6C9b0
  • minimapSlider.background#A7B6C980
  • minimapSlider.hoverBackground#A7B6C9a0
  • notificationLink.foreground#79beda
  • peekView.border#343c3d
  • peekViewEditor.background#32333c
  • peekViewEditor.matchHighlightBackground#a7b6c980
  • peekViewEditorGutter.background#191918
  • peekViewResult.background#191918
  • peekViewResult.matchHighlightBackground#a7b6c980
  • peekViewResult.selectionBackground#e4eaf020
  • peekViewTitle.background#32333c
  • peekViewTitleDescription.foreground#a7b6c9c6
  • pickerGroup.foreground#86B066
  • progressBar.background#e5a577
  • scrollbar.shadow#d18144
  • scrollbarSlider.activeBackground#e4eaf0bb
  • scrollbarSlider.background#a7b6c950
  • scrollbarSlider.hoverBackground#e4eaf050
  • selection.background#a7b6c950
  • sideBar.background#191918
  • sideBar.border#343c3d70
  • sideBar.foreground#848da2
  • sideBarSectionHeader.background#191918
  • sideBarSectionHeader.border#19191860
  • sideBarSectionHeader.foreground#848da2
  • sideBarTitle.foreground#a7b6c9
  • statusBar.background#191918
  • statusBar.border#343c3d50
  • statusBar.debuggingBackground#5a2d18
  • statusBar.debuggingForeground#a7b6c9
  • statusBar.foreground#a7b6c9
  • statusBar.noFolderBackground#191918
  • statusBarItem.hoverBackground#86B06620
  • statusBarItem.remoteBackground#132316
  • statusBarItem.remoteForeground#a7b6c9
  • tab.activeBackground#3f3c39
  • tab.activeBorder#00000000
  • tab.activeForeground#e4eaf0
  • tab.activeModifiedBorder#00000000
  • tab.border#00000000
  • tab.inactiveBackground#3f3c3940
  • tab.inactiveForeground#848da2c5
  • tab.unfocusedActiveBackground#3f3c3920
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveForeground#848da29d
  • tab.unfocusedInactiveBackground#3f3c3920
  • tab.unfocusedInactiveForeground#848da29d
  • textLink.activeForeground#79beda
  • textLink.foreground#1d315d
  • titleBar.activeBackground#191918
  • titleBar.activeForeground#a7b6c9
  • titleBar.border#19191860
  • titleBar.inactiveBackground#191918
  • titleBar.inactiveForeground#848da2
  • tree.indentGuidesStroke#343C3D
  • widget.shadow#d18144

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs, variable.other.object.property.cs#e4eaf0eb
storage.modifier, constant.language, punctuation.squarebracket, variable.other.object.cs#a7b6c9
entity, storage.modifier.cs, punctuation.terminator.statement.cs, punctuation.parenthesis, punctuation.accessor.cs#848da2
comment.line.double-slash.cs, comment.block.cs, entity.name.tag.localname.cs#fad295
comment.block.documentation.cs#e5a577
string.quoted.double.cs#d18144
keyword.control.conditional, keyword.control.switch.cs, keyword.control.default.cs, keyword.control.case.cs, keyword.control.loop#5acab4
#acdaef
#79beda
#43977b
entity.name.function.cs#b5d379e8
#86b066
keyword.control.flow#b25899
entity.name.type.cs, keyword.type.cs, keyword.other.enum.cs, entity.name.type.enum.cs#656474
keyword.preprocessor, punctuation.separator.hash.cs, keyword.operator.null-conditional.cs#ef7f73
string.quoted.double.cs, comment.line.double-slash.csitalic
string.unquoted.preprocessor.message.cs, keyword.preprocessor.region.cs, punctuation.separator.hash.cs, keyword.operatorbold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Hollow Knight Theme by emericoude - VS Code Theme