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#ff7aa8
  • activityBar.background#0a080c
  • activityBar.border#1e1a20
  • activityBar.foreground#b0a0b0
  • activityBar.inactiveForeground#a090a0
  • activityBarBadge.background#ff7aa8
  • activityBarBadge.foreground#0c0a0e
  • badge.background#ff7aa8
  • badge.foreground#0c0a0e
  • button.background#ff7aa8
  • button.foreground#0c0a0e
  • button.hoverBackground#ff7aa8
  • debugIcon.breakpointForeground#f07080
  • debugIcon.pauseForeground#e5b567
  • debugIcon.startForeground#70c8a0
  • debugIcon.stopForeground#f07080
  • descriptionForeground#a090a0
  • diffEditor.border#1e1a20
  • diffEditor.insertedLineBackground#70c8a01a
  • diffEditor.insertedTextBackground#70c8a01a
  • diffEditor.removedLineBackground#f070801a
  • diffEditor.removedTextBackground#f070801a
  • disabledForeground#504050
  • dropdown.background#161218
  • dropdown.border#2c2630
  • dropdown.foreground#e8e0e8
  • editor.background#100e14
  • editor.findMatchBackground#ff7aa845
  • editor.findMatchHighlightBackground#ff7aa845
  • editor.foreground#e8e0e8
  • editor.hoverHighlightBackground#ffffff0e
  • editor.inactiveSelectionBackground#ffffff12
  • editor.lineHighlightBackground#ffffff0c
  • editor.rangeHighlightBackground#ffffff12
  • editor.selectionBackground#ff7aa82a
  • editor.selectionHighlightBackground#ffffff12
  • editor.wordHighlightBackground#ffffff12
  • editor.wordHighlightStrongBackground#ff7aa82a
  • editorBracketMatch.background#ffffff1e
  • editorBracketMatch.border#ff7aa880
  • editorCodeLens.foreground#a090a0
  • editorCursor.foreground#ff7aa8
  • editorError.foreground#f07080
  • editorGroup.background#0e0a10
  • editorGroup.border#1e1a20
  • editorGroupHeader.noTabsBackground#100e14
  • editorGroupHeader.tabsBackground#0a080c
  • editorGroupHeader.tabsBorder#1e1a20
  • editorGutter.addedBackground#70c8a0
  • editorGutter.background#100e14
  • editorGutter.deletedBackground#f07080
  • editorGutter.modifiedBackground#e5b567
  • editorHint.foreground#70d0f0
  • editorHoverWidget.background#161218
  • editorHoverWidget.border#2c2630
  • editorIndentGuide.activeBackground1#403840
  • editorIndentGuide.background1#1e1a20
  • editorInfo.foreground#70a0f0
  • editorLightBulb.foreground#70d0f0
  • editorLineNumber.activeForeground#ff7aa8
  • editorLineNumber.foreground#58505a
  • editorOverviewRuler.addedForeground#70c8a0
  • editorOverviewRuler.deletedForeground#f07080
  • editorOverviewRuler.errorForeground#f07080
  • editorOverviewRuler.infoForeground#70a0f0
  • editorOverviewRuler.modifiedForeground#e5b567
  • editorOverviewRuler.warningForeground#e5b567
  • editorPane.background#100e14
  • editorRuler.foreground#1e1a20
  • editorSuggestWidget.background#161218
  • editorSuggestWidget.border#2c2630
  • editorSuggestWidget.foreground#e8e0e8
  • editorSuggestWidget.highlightForeground#ff7aa8
  • editorSuggestWidget.selectedBackground#ffffff1c
  • editorWarning.foreground#e5b567
  • editorWhitespace.foreground#2e2830
  • editorWidget.background#161218
  • editorWidget.border#2c2630
  • errorForeground#f07080
  • focusBorder#ff7aa880
  • foreground#e8e0e8
  • gitDecoration.addedResourceForeground#70c8a0
  • gitDecoration.conflictingResourceForeground#e5b567
  • gitDecoration.deletedResourceForeground#f07080
  • gitDecoration.modifiedResourceForeground#e5b567
  • gitDecoration.renamedResourceForeground#c4a0ff
  • gitDecoration.untrackedResourceForeground#70c8a0
  • icon.foreground#b0a0b0
  • input.background#00000000
  • input.border#2c2630
  • input.foreground#e8e0e8
  • input.placeholderForeground#706070
  • inputOption.activeBackground#ffffff1c
  • inputOption.activeBorder#ff7aa880
  • inputOption.activeForeground#ff7aa8
  • list.activeSelectionBackground#ffffff1c
  • list.activeSelectionForeground#e8e0e8
  • list.errorForeground#f07080
  • list.focusBackground#ffffff16
  • list.focusForeground#e8e0e8
  • list.highlightForeground#ff7aa8
  • list.hoverBackground#ffffff0e
  • list.hoverForeground#e8e0e8
  • list.inactiveSelectionBackground#ffffff1c
  • list.inactiveSelectionForeground#e8e0e8
  • list.warningForeground#e5b567
  • merge.currentContentBackground#70a0f01a
  • merge.currentHeaderBackground#70a0f01a
  • merge.incomingContentBackground#70c8a01a
  • merge.incomingHeaderBackground#70c8a01a
  • minimap.background#100e14
  • minimapSlider.activeBackground#ffffff2c
  • minimapSlider.background#ffffff18
  • minimapSlider.hoverBackground#ffffff2c
  • notificationCenterHeader.background#0e0c12
  • notifications.background#161218
  • notifications.foreground#e8e0e8
  • notificationsErrorIcon.foreground#f07080
  • notificationsInfoIcon.foreground#70a0f0
  • notificationsWarningIcon.foreground#e5b567
  • panel.background#0e0c12
  • panel.border#1e1a20
  • panelInput.border#2c2630
  • panelTitle.activeForeground#e8e0e8
  • panelTitle.inactiveForeground#a090a0
  • peekViewEditor.background#100e14
  • peekViewEditor.matchHighlightBackground#ff7aa845
  • peekViewResult.background#0e0c12
  • peekViewResult.selectionBackground#ffffff1c
  • peekViewTitle.background#100e14
  • problemsErrorIcon.foreground#f07080
  • problemsInfoIcon.foreground#70a0f0
  • problemsWarningIcon.foreground#e5b567
  • scrollbarSlider.activeBackground#ffffff2c
  • scrollbarSlider.background#ffffff18
  • scrollbarSlider.hoverBackground#ffffff2c
  • selection.background#ffffff1c
  • sideBar.background#0e0c12
  • sideBar.border#1e1a20
  • sideBar.foreground#e8e0e8
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#1e1a20
  • sideBarSectionHeader.foreground#e8e0e8
  • sideBarTitle.foreground#e8e0e8
  • statusBar.background#0a080c
  • statusBar.border#1e1a20
  • statusBar.foreground#a090a0
  • tab.activeBackground#100e14
  • tab.activeBorder#ff7aa8
  • tab.activeForeground#e8e0e8
  • tab.border#1e1a20
  • tab.hoverBackground#ffffff0e
  • tab.hoverForeground#e8e0e8
  • tab.inactiveBackground#0a080c
  • tab.inactiveForeground#a090a0
  • tab.unfocusedActiveBorder#ff7aa880
  • terminal.ansiBlack#161218
  • terminal.ansiBlue#70a0f0
  • terminal.ansiBrightBlack#504050
  • terminal.ansiBrightBlue#90c0ff
  • terminal.ansiBrightCyan#90e0ff
  • terminal.ansiBrightGreen#90e0b8
  • terminal.ansiBrightMagenta#e8b0ff
  • terminal.ansiBrightRed#f0a0a8
  • terminal.ansiBrightWhite#f8f0f8
  • terminal.ansiBrightYellow#f0d080
  • terminal.ansiCyan#70d0f0
  • terminal.ansiGreen#70c8a0
  • terminal.ansiMagenta#c4a0ff
  • terminal.ansiRed#f07080
  • terminal.ansiWhite#b0a0b0
  • terminal.ansiYellow#e5b567
  • terminal.background#0a080c
  • terminal.foreground#e8e0e8
  • terminalCursor.foreground#ff7aa8
  • textLink.activeForeground#70d0f0
  • textLink.foreground#ff7aa8
  • textPreformat.background#0e0a10
  • textPreformat.foreground#e8e0e8
  • titleBar.activeBackground#0a080c
  • titleBar.activeForeground#e8e0e8
  • titleBar.border#1e1a20
  • titleBar.inactiveBackground#0c0a0e
  • titleBar.inactiveForeground#a090a0
  • toolbar.activeBackground#ffffff16
  • toolbar.background#100e14
  • toolbar.hoverBackground#ffffff0e
  • tree.inactiveIndentGuidesStroke#1e1a20
  • tree.indentGuidesStroke#1e1a20
  • tree.tableColumnsBorder#1e1a20
  • tree.tableOddRowsBackground#ffffff0e
  • widget.border#2c2630
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.other.attribute-name#e8b0ff
constant.language.boolean#ff9cc0
comment#706070italic
comment.block.documentation#706070italic
constant.language, constant#e8b0ff
entity.name.function, entity.name.function.constructor#70a0f0
meta.embedded#e8e0e8
markup.italic#e8e0e8italic
markup.bold#e8e0e8bold
entity.name.type.enum#e8b0ff
entity.name.function, support.function#70a0f0
markup.other.hint#70d0f0italic
keyword, storage.type, storage.modifier#ff7aa8
entity.name.label#e8b0ff
markup.underline.link#70d0f0underline
string.other.link#70d0f0
constant.numeric#ff9cc0
keyword.operator#b0a0d0
comment, meta.suggestion#706070italic
meta.preprocessor#c4a0ff
source#e8e0e8
variable.other.property, support.type.property-name#80e0c0
punctuation#a090a0
punctuation.bracket#a090a0
punctuation.separator, punctuation.terminator#a090a0
punctuation.definition.list#a090a0
punctuation.definition#a090a0
string#70d0f0
constant.character.escape#c4a0ff
string.regexp#70d0f0
string.other#c4a0ff
constant.other.symbol#c4a0ff
entity.name.tag#ff7aa8
markup.raw, string.unquoted#70d0f0
entity.name.section#e8e0e8bold
entity.name.type, support.type#c4a0ff
entity.name.type.interface#c4a0ffitalic
entity.other.inherited-class#c4a0ffitalic
variable#e8e0e8
variable.other.member#80e0c0
variable.parameter#ff9cc0italic
variable.language#70a0f0italic
entity.other.inherited-class, entity.name.type.variant#e8e0e8
Visqode Theme by Abdulla al mahin - VS Code Theme