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.activeBackground#2f374b
  • activityBar.background#2f374b
  • activityBar.border#2f374b
  • activityBar.foreground#d7a31acf
  • activityBar.inactiveForeground#b2b2b25a
  • activityBarBadge.background#d7a31ae9
  • activityBarBadge.foreground#000000
  • badge.background#d7a31a
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#e4f0ff
  • breadcrumb.background#2f374b
  • breadcrumb.focusForeground#e4f0ff
  • breadcrumb.foreground#e4f0ff7e
  • button.background#d7a31ae1
  • button.foreground#ffffff
  • button.hoverBackground#d7a31a
  • button.secondaryBackground#1e5f7b
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#008b99
  • checkbox.background#2f374b
  • checkbox.border#00000000
  • checkbox.foreground#e4f0ff
  • debugExceptionWidget.background#2f374b
  • debugExceptionWidget.border#bacdff68
  • debugToolBar.background#2f374b
  • debugToolBar.border#bacdff68
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#0dad912e
  • diffEditor.insertedTextBorder#0dad9144
  • diffEditor.removedTextBackground#fd67533c
  • diffEditor.removedTextBorder#fd67531c
  • dropdown.background#2f374b
  • dropdown.border#00000000
  • dropdown.foreground#e4f0ff
  • editor.background#212634
  • editor.findMatchBackground#4e5362f1
  • editor.findMatchBorder#4e5362
  • editor.findMatchHighlightBackground#d6a3193c
  • editor.findMatchHighlightBorder#b4954268
  • editor.findRangeHighlightBackground#3d3d3d66
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#e4f0ffa5
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#1e5f7b97
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#c1d2ec34
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#007e8b3c
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#3b454f80
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#4e5362f1
  • editor.wordHighlightStrongBorder#4e5362f1
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#772e2e87
  • editorCursor.foreground#aeafad
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#e4f0ff
  • editorGroup.emptyBackground#212634
  • editorGroupHeader.border#0d1428
  • editorGroupHeader.tabsBackground#2f374b
  • editorGroupHeader.tabsBorder#303f64
  • editorGutter.addedBackground#00b389
  • editorGutter.background#2f374b
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#fd6753
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#2c7391
  • editorHoverWidget.background#2f374b
  • editorHoverWidget.border#4f586f
  • editorHoverWidget.foreground#e4f0ff
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#d6a3193c
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#9b9b9b
  • editorLink.activeForeground#9faace
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#007e8bc3
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2f374b
  • editorSuggestWidget.border#5c657b
  • editorSuggestWidget.foreground#e4f0ff
  • editorSuggestWidget.highlightForeground#d6a319
  • editorSuggestWidget.selectedBackground#d6a3195e
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252526
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#d7a31a78
  • focusBorder#d7a31a7e
  • foreground#999ea5
  • gitDecoration.addedResourceForeground#71faca
  • gitDecoration.conflictingResourceForeground#ea96db
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#b9b9bc95
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#45abff
  • gitDecoration.untrackedResourceForeground#04b7c0
  • icon.foreground#999ea5
  • input.background#2f374b
  • input.border#00000000
  • input.foreground#e4f0ff
  • input.placeholderForeground#e4f0ff66
  • inputOption.activeBackground#ffffff66
  • inputOption.activeBorder#5e667c
  • inputOption.activeForeground#e4f0ff
  • list.activeSelectionBackground#d7a31a64
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#202634
  • list.focusBackground#d59d1732
  • list.focusForeground#e2e2e2
  • list.highlightForeground#d7a31a
  • list.hoverBackground#d7a31a4a
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#d7a31a7e
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#d7a31a56
  • listFilterWidget.noMatchesOutline#d7a31a
  • listFilterWidget.outline#d7a31a
  • menu.background#2f374b
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#d7a31a7e
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#d7a31a7e
  • menubar.selectionForeground#e4f0ff
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#007e8b
  • merge.currentHeaderBackground#0a93a1
  • merge.incomingContentBackground#4d4d64
  • merge.incomingHeaderBackground#675d76
  • minimap.background#212634
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#4e5362f1
  • minimap.selectionHighlight#007e8b3c
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#00b389
  • minimapGutter.deletedBackground#fd6753
  • minimapGutter.modifiedBackground#2c7391
  • notificationCenter.border#e4f0ff42
  • notificationCenterHeader.background#414656
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#2f374b
  • notifications.border#e4f0ff42
  • notifications.foreground#e4f0ff
  • notificationsErrorIcon.foreground#fb7c63
  • notificationsInfoIcon.foreground#04b7c0
  • notificationsWarningIcon.foreground#ffd700d3
  • notificationToast.border#e4f0ff4c
  • panel.background#2f374b
  • panel.border#15151559
  • panelSection.border#e4f0ff24
  • panelTitle.activeBorder#d7a31a
  • panelTitle.activeForeground#d7a31a
  • panelTitle.inactiveForeground#e4f0ff
  • peekView.border#bbcaf038
  • peekViewEditor.background#313149
  • peekViewEditor.matchHighlightBackground#d6a3195e
  • peekViewEditor.matchHighlightBorder#d6a31991
  • peekViewEditorGutter.background#4d4d68
  • peekViewResult.background#2f374b
  • peekViewResult.fileForeground#dadefb
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2f374b
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#e5e5ff54
  • pickerGroup.foreground#d7a31aab
  • progressBar.background#d7a31a95
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#5f708689
  • scrollbarSlider.background#e4f0ff22
  • scrollbarSlider.hoverBackground#5f708689
  • selection.background#d7a31a58
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#999ea5
  • sideBar.background#2f374b
  • sideBar.dropBackground#202634
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#02020200
  • sideBarSectionHeader.foreground#ffffffcb
  • sideBarTitle.foreground#dbdbdb
  • statusBar.background#2f374b
  • statusBar.border#d59d1700
  • statusBar.debuggingBackground#e9accd
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#261c219d
  • statusBar.foreground#d5d6ffa7
  • statusBar.noFolderBackground#706484
  • statusBar.noFolderBorder#ff000000
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#d7a31a89
  • statusBarItem.remoteBackground#008b99
  • statusBarItem.remoteForeground#ffffffbf
  • tab.activeBackground#d7a31a89
  • tab.activeBorder#d7a31a
  • tab.activeBorderTop#00000000
  • tab.activeForeground#e4f0ff
  • tab.border#e4f0ff42
  • tab.hoverBackground#d7a31a3a
  • tab.hoverBorder#d7a31a68
  • tab.inactiveBackground#2f374b
  • tab.inactiveForeground#e4f0ff9b
  • terminal.ansiBlack#2c2423
  • terminal.ansiBlue#5ea2ec
  • terminal.ansiBrightBlack#918988
  • terminal.ansiBrightBlue#81b3ec
  • terminal.ansiBrightCyan#81eeb2
  • terminal.ansiBrightGreen#bbee78
  • terminal.ansiBrightMagenta#bb79ec
  • terminal.ansiBrightRed#f579b2
  • terminal.ansiBrightWhite#f5eeec
  • terminal.ansiBrightYellow#f5b378
  • terminal.ansiCyan#5eeea0
  • terminal.ansiGreen#a9ee55
  • terminal.ansiMagenta#a957ec
  • terminal.ansiRed#f557a0
  • terminal.ansiWhite#918988
  • terminal.ansiYellow#f5a255
  • terminal.border#e4f0ff24
  • terminal.foreground#e4f0fff5
  • terminal.selectionBackground#456fa334
  • terminalCursor.background#e4f0ff62
  • terminalCursor.foreground#e4f0ff
  • textLink.foreground#d7a31ae1
  • titleBar.activeBackground#2f374b
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#222836
  • titleBar.inactiveForeground#d1d1d19d
  • tree.indentGuidesStroke#d6a3193c
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant, entity.name.constant, variable.other.constant, variable.language#79b8ff
entity, entity.name#b392f0
variable.parameter.function#e1e4e8
entity.name.tag#85e89d
keyword#f97583
storage, storage.type#f97583
storage.modifier.package, storage.modifier.import, storage.type.java#e1e4e8
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff
support#79b8ff
meta.property-name#79b8ff
variable#ffab70
variable.other#e1e4e8
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string source#e1e4e8
string variable#79b8ff
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
string.regexp constant.character.escape#85e89dbold
support.constant#79b8ff
support.variable#79b8ff
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89d
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline

Shiki preview

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

Loading...

MoonKai by Halcolo - VS Code Theme