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.activeBackground#ffffff16
  • activityBar.activeBorder#b080ff
  • activityBar.background#080610
  • activityBar.border#1c1a24
  • activityBar.foreground#a8a0c0
  • activityBar.inactiveForeground#9890b0
  • activityBarBadge.background#b080ff
  • activityBarBadge.foreground#0a0810
  • badge.background#b080ff
  • badge.foreground#0a0810
  • button.background#b080ff
  • button.foreground#0a0810
  • button.hoverBackground#b080ff
  • debugIcon.breakpointForeground#f07090
  • debugIcon.pauseForeground#e5b567
  • debugIcon.startForeground#70c8a8
  • debugIcon.stopForeground#f07090
  • descriptionForeground#9890b0
  • diffEditor.border#1c1a24
  • diffEditor.insertedLineBackground#70c8a81a
  • diffEditor.insertedTextBackground#70c8a81a
  • diffEditor.removedLineBackground#f070901a
  • diffEditor.removedTextBackground#f070901a
  • disabledForeground#484060
  • dropdown.background#14121c
  • dropdown.border#2a2634
  • dropdown.foreground#e4e0f0
  • editor.background#0e0c16
  • editor.findMatchBackground#b080ff45
  • editor.findMatchHighlightBackground#b080ff45
  • editor.foreground#e4e0f0
  • editor.hoverHighlightBackground#ffffff0e
  • editor.inactiveSelectionBackground#ffffff12
  • editor.lineHighlightBackground#ffffff0c
  • editor.rangeHighlightBackground#ffffff12
  • editor.selectionBackground#b080ff2a
  • editor.selectionHighlightBackground#ffffff12
  • editor.wordHighlightBackground#ffffff12
  • editor.wordHighlightStrongBackground#b080ff2a
  • editorBracketMatch.background#ffffff1e
  • editorBracketMatch.border#b080ff80
  • editorCodeLens.foreground#9890b0
  • editorCursor.foreground#b080ff
  • editorError.foreground#f07090
  • editorGroup.background#0c0a12
  • editorGroup.border#1c1a24
  • editorGroupHeader.noTabsBackground#0e0c16
  • editorGroupHeader.tabsBackground#080610
  • editorGroupHeader.tabsBorder#1c1a24
  • editorGutter.addedBackground#70c8a8
  • editorGutter.background#0e0c16
  • editorGutter.deletedBackground#f07090
  • editorGutter.modifiedBackground#e5b567
  • editorHint.foreground#60d0e0
  • editorHoverWidget.background#14121c
  • editorHoverWidget.border#2a2634
  • editorIndentGuide.activeBackground1#3e3850
  • editorIndentGuide.background1#1c1a24
  • editorInfo.foreground#80b0ff
  • editorLightBulb.foreground#60d0e0
  • editorLineNumber.activeForeground#b080ff
  • editorLineNumber.foreground#524a68
  • editorOverviewRuler.addedForeground#70c8a8
  • editorOverviewRuler.deletedForeground#f07090
  • editorOverviewRuler.errorForeground#f07090
  • editorOverviewRuler.infoForeground#80b0ff
  • editorOverviewRuler.modifiedForeground#e5b567
  • editorOverviewRuler.warningForeground#e5b567
  • editorPane.background#0e0c16
  • editorRuler.foreground#1c1a24
  • editorSuggestWidget.background#14121c
  • editorSuggestWidget.border#2a2634
  • editorSuggestWidget.foreground#e4e0f0
  • editorSuggestWidget.highlightForeground#b080ff
  • editorSuggestWidget.selectedBackground#ffffff1c
  • editorWarning.foreground#e5b567
  • editorWhitespace.foreground#2c2838
  • editorWidget.background#14121c
  • editorWidget.border#2a2634
  • errorForeground#f07090
  • focusBorder#b080ff80
  • foreground#e4e0f0
  • gitDecoration.addedResourceForeground#70c8a8
  • gitDecoration.conflictingResourceForeground#e5b567
  • gitDecoration.deletedResourceForeground#f07090
  • gitDecoration.modifiedResourceForeground#e5b567
  • gitDecoration.renamedResourceForeground#c8a0ff
  • gitDecoration.untrackedResourceForeground#70c8a8
  • icon.foreground#a8a0c0
  • input.background#00000000
  • input.border#2a2634
  • input.foreground#e4e0f0
  • input.placeholderForeground#686080
  • inputOption.activeBackground#ffffff1c
  • inputOption.activeBorder#b080ff80
  • inputOption.activeForeground#b080ff
  • list.activeSelectionBackground#ffffff1c
  • list.activeSelectionForeground#e4e0f0
  • list.errorForeground#f07090
  • list.focusBackground#ffffff16
  • list.focusForeground#e4e0f0
  • list.highlightForeground#b080ff
  • list.hoverBackground#ffffff0e
  • list.hoverForeground#e4e0f0
  • list.inactiveSelectionBackground#ffffff1c
  • list.inactiveSelectionForeground#e4e0f0
  • list.warningForeground#e5b567
  • merge.currentContentBackground#80b0ff1a
  • merge.currentHeaderBackground#80b0ff1a
  • merge.incomingContentBackground#70c8a81a
  • merge.incomingHeaderBackground#70c8a81a
  • minimap.background#0e0c16
  • minimapSlider.activeBackground#ffffff2c
  • minimapSlider.background#ffffff18
  • minimapSlider.hoverBackground#ffffff2c
  • notificationCenterHeader.background#0c0a14
  • notifications.background#14121c
  • notifications.foreground#e4e0f0
  • notificationsErrorIcon.foreground#f07090
  • notificationsInfoIcon.foreground#80b0ff
  • notificationsWarningIcon.foreground#e5b567
  • panel.background#0c0a14
  • panel.border#1c1a24
  • panelInput.border#2a2634
  • panelTitle.activeForeground#e4e0f0
  • panelTitle.inactiveForeground#9890b0
  • peekViewEditor.background#0e0c16
  • peekViewEditor.matchHighlightBackground#b080ff45
  • peekViewResult.background#0c0a14
  • peekViewResult.selectionBackground#ffffff1c
  • peekViewTitle.background#0e0c16
  • problemsErrorIcon.foreground#f07090
  • problemsInfoIcon.foreground#80b0ff
  • problemsWarningIcon.foreground#e5b567
  • scrollbarSlider.activeBackground#ffffff2c
  • scrollbarSlider.background#ffffff18
  • scrollbarSlider.hoverBackground#ffffff2c
  • selection.background#ffffff1c
  • sideBar.background#0c0a14
  • sideBar.border#1c1a24
  • sideBar.foreground#e4e0f0
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#1c1a24
  • sideBarSectionHeader.foreground#e4e0f0
  • sideBarTitle.foreground#e4e0f0
  • statusBar.background#080610
  • statusBar.border#1c1a24
  • statusBar.foreground#9890b0
  • tab.activeBackground#0e0c16
  • tab.activeBorder#b080ff
  • tab.activeForeground#e4e0f0
  • tab.border#1c1a24
  • tab.hoverBackground#ffffff0e
  • tab.hoverForeground#e4e0f0
  • tab.inactiveBackground#080610
  • tab.inactiveForeground#9890b0
  • tab.unfocusedActiveBorder#b080ff80
  • terminal.ansiBlack#14121c
  • terminal.ansiBlue#80b0ff
  • terminal.ansiBrightBlack#484060
  • terminal.ansiBrightBlue#a0c8ff
  • terminal.ansiBrightCyan#80e0f0
  • terminal.ansiBrightGreen#90e0c0
  • terminal.ansiBrightMagenta#c8a0ff
  • terminal.ansiBrightRed#f0a0b0
  • terminal.ansiBrightWhite#f4f0ff
  • terminal.ansiBrightYellow#f0d080
  • terminal.ansiCyan#60d0e0
  • terminal.ansiGreen#70c8a8
  • terminal.ansiMagenta#b080ff
  • terminal.ansiRed#f07090
  • terminal.ansiWhite#a8a0c0
  • terminal.ansiYellow#e5b567
  • terminal.background#080610
  • terminal.foreground#e4e0f0
  • terminalCursor.foreground#b080ff
  • textLink.activeForeground#80b0ff
  • textLink.foreground#b080ff
  • textPreformat.background#0c0a12
  • textPreformat.foreground#e4e0f0
  • titleBar.activeBackground#080610
  • titleBar.activeForeground#e4e0f0
  • titleBar.border#1c1a24
  • titleBar.inactiveBackground#0a0810
  • titleBar.inactiveForeground#9890b0
  • toolbar.activeBackground#ffffff16
  • toolbar.background#0e0c16
  • toolbar.hoverBackground#ffffff0e
  • tree.inactiveIndentGuidesStroke#1c1a24
  • tree.indentGuidesStroke#1c1a24
  • tree.tableColumnsBorder#1c1a24
  • tree.tableOddRowsBackground#ffffff0e
  • widget.border#2a2634
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.other.attribute-name#c8a0ff
constant.language.boolean#f070b0
comment#686080italic
comment.block.documentation#686080italic
constant.language, constant#c8a0ff
entity.name.function, entity.name.function.constructor#80b0ff
meta.embedded#e4e0f0
markup.italic#e4e0f0italic
markup.bold#e4e0f0bold
entity.name.type.enum#c8a0ff
entity.name.function, support.function#80b0ff
markup.other.hint#60d0e0italic
keyword, storage.type, storage.modifier#b080ff
entity.name.label#c8a0ff
markup.underline.link#80b0ffunderline
string.other.link#80b0ff
constant.numeric#f070b0
keyword.operator#a090d0
comment, meta.suggestion#686080italic
meta.preprocessor#c8a0ff
source#e4e0f0
variable.other.property, support.type.property-name#70d8c0
punctuation#9890b0
punctuation.bracket#9890b0
punctuation.separator, punctuation.terminator#9890b0
punctuation.definition.list#9890b0
punctuation.definition#9890b0
string#60d0e0
constant.character.escape#c8a0ff
string.regexp#60d0e0
string.other#c8a0ff
constant.other.symbol#c8a0ff
entity.name.tag#b080ff
markup.raw, string.unquoted#60d0e0
entity.name.section#e4e0f0bold
entity.name.type, support.type#c8a0ff
entity.name.type.interface#c8a0ffitalic
entity.other.inherited-class#c8a0ffitalic
variable#e4e0f0
variable.other.member#70d8c0
variable.parameter#f070b0italic
variable.language#80b0ffitalic
entity.other.inherited-class, entity.name.type.variant#e4e0f0
Visqode Theme by Abdulla al mahin - VS Code Theme