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.activeBorder#6CC9C7
  • activityBar.background#0F1822
  • activityBar.border#FFFFFF0D
  • activityBar.foreground#F5F9FC
  • activityBar.inactiveForeground#6B7989
  • activityBarBadge.background#6CC9C7
  • activityBarBadge.foreground#0F1822
  • agentFeedbackInputWidget.border#FFFFFF14
  • agents.background#121C28
  • agentsBadge.background#6CC9C7
  • agentsBadge.foreground#0F1822
  • agentsChatInput.background#121C28
  • agentsChatInput.border#FFFFFF14
  • agentsChatInput.focusBorder#6CC9C7
  • agentsChatInput.foreground#ECF2F8
  • agentsChatInput.placeholderForeground#6B7989
  • agentSessionReadIndicator.foreground#94A3B533
  • agentSessionSelectedBadge.border#F5F9FC4D
  • agentSessionSelectedUnfocusedBadge.border#ECF2F84D
  • agentsGradient.tintColor#4A9897
  • agentsNewSessionButton.background#00000000
  • agentsNewSessionButton.border#FFFFFF14
  • agentsNewSessionButton.foreground#ECF2F8
  • agentsNewSessionButton.hoverBackground#FFFFFF14
  • agentsPanel.background#131D29
  • agentsPanel.border#FFFFFF26
  • agentsPanel.foreground#ECF2F8
  • agentStatusIndicator.background#FFFFFF0D
  • agentsUnreadBadge.background#6CC9C7
  • agentsUnreadBadge.foreground#0F1822
  • agentsUpdateButton.downloadedBackground#4A9897B3
  • agentsUpdateButton.downloadingBackground#4A989766
  • badge.background#6CC9C7
  • badge.foreground#0F1822
  • banner.background#DEB07140
  • banner.foreground#F5F9FC
  • banner.iconForeground#DEB071
  • breadcrumb.activeSelectionForeground#F5F9FC
  • breadcrumb.focusForeground#ECF2F8
  • breadcrumb.foreground#94A3B5
  • breadcrumbPicker.background#0B121C
  • button.background#4A9897
  • button.foreground#0B121C
  • button.hoverBackground#6CC9C7
  • button.secondaryBackground#FFFFFF14
  • button.secondaryForeground#ECF2F8
  • button.secondaryHoverBackground#FFFFFF1F
  • chat.avatarBackground#FFFFFF14
  • chat.avatarForeground#ECF2F8
  • chat.checkpointSeparator#FFFFFF14
  • chat.editedFileForeground#DEB071
  • chat.inputWorkingBorderColor1#4A9897
  • chat.inputWorkingBorderColor2#254A4B
  • chat.inputWorkingBorderColor3#88D8D8
  • chat.linesAddedForeground#88D8AE
  • chat.linesRemovedForeground#E89A95
  • chat.requestBackground#FFFFFF06
  • chat.requestBorder#FFFFFF14
  • chat.requestBubbleBackground#6CC9C710
  • chat.requestBubbleHoverBackground#6CC9C71F
  • chat.requestCodeBorder#FFFFFF14
  • chat.slashCommandBackground#6CC9C71A
  • chat.slashCommandForeground#6CC9C7
  • chat.thinkingShimmer#6CC9C7
  • debugConsole.errorForeground#E89A95
  • debugConsole.infoForeground#6CC9C7
  • debugConsole.warningForeground#DEB071
  • debugConsoleInputIcon.foreground#6CC9C7
  • debugIcon.breakpointCurrentStackframeForeground#6CC9C7
  • debugIcon.breakpointDisabledForeground#6B7989
  • debugIcon.breakpointForeground#E89A95
  • debugIcon.breakpointStackframeForeground#94A3B5
  • debugIcon.breakpointUnverifiedForeground#94A3B5
  • debugIcon.continueForeground#6CC9C7
  • debugIcon.disconnectForeground#94A3B5
  • debugIcon.pauseForeground#DEB071
  • debugIcon.restartForeground#6CC9C7
  • debugIcon.startForeground#6CC9C7
  • debugIcon.stepBackForeground#6CC9C7
  • debugIcon.stepIntoForeground#6CC9C7
  • debugIcon.stepOutForeground#6CC9C7
  • debugIcon.stepOverForeground#6CC9C7
  • debugIcon.stopForeground#E89A95
  • debugTokenExpression.boolean#9B7FD4
  • debugTokenExpression.error#E89A95
  • debugTokenExpression.name#B5C2D0
  • debugTokenExpression.number#F0D0A0
  • debugTokenExpression.string#DEB071
  • debugTokenExpression.value#ECF2F8
  • debugToolBar.background#0B121C
  • debugView.exceptionLabelBackground#E89A9540
  • debugView.exceptionLabelForeground#F5F9FC
  • debugView.stateLabelBackground#DEB07140
  • debugView.stateLabelForeground#F5F9FC
  • debugView.valueChangedHighlight#DEB07140
  • descriptionForeground#94A3B5
  • diffEditor.insertedLineBackground#0B2A38FF
  • diffEditor.insertedTextBackground#00000000
  • diffEditor.removedLineBackground#350707FF
  • diffEditor.removedTextBackground#00000000
  • diffEditorGutter.insertedLineBackground#00000000
  • diffEditorGutter.removedLineBackground#00000000
  • diffEditorOverview.insertedForeground#0A3D5AB0
  • diffEditorOverview.removedForeground#5A0E0EBD
  • dropdown.background#0B121C
  • dropdown.border#FFFFFF14
  • dropdown.foreground#ECF2F8
  • dropdown.listBackground#0B121C
  • editor.background#121C28
  • editor.findMatchBackground#DEB07140
  • editor.findMatchHighlightBackground#DEB07125
  • editor.foreground#ECF2F8
  • editor.inactiveSelectionBackground#6CC9C71A
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#6CC9C70D
  • editor.selectionBackground#6CC9C733
  • editor.selectionHighlightBackground#6CC9C71A
  • editor.snippetFinalTabstopHighlightBackground#6CC9C70D
  • editor.snippetFinalTabstopHighlightBorder#6CC9C726
  • editor.snippetTabstopHighlightBackground#6CC9C71A
  • editor.snippetTabstopHighlightBorder#6CC9C740
  • editor.wordHighlightBackground#6CC9C71A
  • editor.wordHighlightStrongBackground#6CC9C726
  • editorBracketHighlight.foreground1#6CC9C7
  • editorBracketHighlight.foreground2#DEB071
  • editorBracketHighlight.foreground3#BAA1E0
  • editorBracketHighlight.foreground4#95BFE0
  • editorBracketMatch.background#6CC9C71A
  • editorBracketMatch.border#6CC9C7
  • editorCursor.foreground#6CC9C7
  • editorError.foreground#E89A95
  • editorGhostText.background#00000000
  • editorGhostText.border#00000000
  • editorGhostText.foreground#6B7989
  • editorGroup.border#FFFFFF0D
  • editorGroupHeader.tabsBackground#131D29
  • editorGroupHeader.tabsBorder#FFFFFF0D
  • editorGutter.addedBackground#00000000
  • editorGutter.deletedBackground#00000000
  • editorGutter.modifiedBackground#00000000
  • editorHoverWidget.background#0B121C
  • editorHoverWidget.border#FFFFFF14
  • editorIndentGuide.activeBackground1#FFFFFF1A
  • editorIndentGuide.background1#FFFFFF0D
  • editorInfo.foreground#6CC9C7
  • editorLightBulb.foreground#DEB071
  • editorLightBulbAi.foreground#6CC9C7
  • editorLightBulbAutoFix.foreground#88D8AE
  • editorLineNumber.activeForeground#ECF2F8
  • editorLineNumber.foreground#6B7989
  • editorMinimap.inlineChatInserted#88D8AE99
  • editorMinimap.inlineChatRemoved#E89A9599
  • editorOverviewRuler.addedForeground#0A3D5AB0
  • editorOverviewRuler.deletedForeground#5A0E0EBD
  • editorOverviewRuler.errorForeground#E89A95
  • editorOverviewRuler.infoForeground#6CC9C7
  • editorOverviewRuler.inlineChatInserted#88D8AE99
  • editorOverviewRuler.inlineChatRemoved#E89A9599
  • editorOverviewRuler.modifiedForeground#7E541AFF
  • editorOverviewRuler.warningForeground#DEB071
  • editorRuler.foreground#FFFFFF0D
  • editorStickyScroll.background#121C28
  • editorStickyScroll.border#FFFFFF14
  • editorStickyScroll.shadow#00000000
  • editorStickyScrollHover.background#FFFFFF06
  • editorSuggestWidget.background#0B121C
  • editorSuggestWidget.border#FFFFFF14
  • editorSuggestWidget.selectedBackground#6CC9C71A
  • editorWarning.background#00000000
  • editorWarning.foreground#DEB071
  • editorWhitespace.foreground#FFFFFF14
  • editorWidget.background#0B121C
  • editorWidget.border#FFFFFF14
  • errorForeground#E89A95
  • extensionBadge.remoteBackground#6CC9C7
  • extensionBadge.remoteForeground#0F1822
  • extensionButton.background#FFFFFF14
  • extensionButton.foreground#ECF2F8
  • extensionButton.hoverBackground#FFFFFF1F
  • extensionButton.prominentBackground#4A9897
  • extensionButton.prominentForeground#0B121C
  • extensionButton.prominentHoverBackground#6CC9C7
  • extensionButton.separator#FFFFFF14
  • extensionIcon.preReleaseForeground#DEB071
  • extensionIcon.sponsorForeground#E89A95
  • extensionIcon.starForeground#DEB071
  • extensionIcon.verifiedForeground#6CC9C7
  • focusBorder#6CC9C7
  • foreground#ECF2F8
  • gitDecoration.conflictingResourceForeground#CC9DD8
  • gitDecoration.deletedResourceForeground#E89A95
  • gitDecoration.ignoredResourceForeground#6B7989
  • gitDecoration.modifiedResourceForeground#DEB071
  • gitDecoration.stageDeletedResourceForeground#E89A95
  • gitDecoration.stageModifiedResourceForeground#DEB071
  • gitDecoration.untrackedResourceForeground#88D8AE
  • icon.foreground#94A3B5
  • inlineChat.background#0B121C
  • inlineChat.border#FFFFFF14
  • inlineChat.foreground#ECF2F8
  • inlineChat.shadow#00000000
  • inlineChatDiff.inserted#88D8AE26
  • inlineChatDiff.removed#E89A9526
  • inlineChatInput.background#121C28
  • inlineChatInput.border#FFFFFF14
  • inlineChatInput.focusBorder#6CC9C7
  • inlineChatInput.placeholderForeground#6B7989
  • input.background#121C28
  • input.border#FFFFFF14
  • input.foreground#ECF2F8
  • input.placeholderForeground#6B7989
  • inputOption.activeBackground#6CC9C71A
  • inputOption.activeBorder#6CC9C7
  • inputValidation.errorBackground#E89A9540
  • inputValidation.errorBorder#E89A95
  • inputValidation.infoBackground#6CC9C740
  • inputValidation.infoBorder#6CC9C7
  • inputValidation.warningBackground#DEB07140
  • inputValidation.warningBorder#DEB071
  • keybindingLabel.background#FFFFFF0A
  • keybindingLabel.border#FFFFFF14
  • keybindingLabel.bottomBorder#FFFFFF0D
  • keybindingLabel.foreground#94A3B5
  • list.activeSelectionBackground#6CC9C71A
  • list.activeSelectionForeground#F5F9FC
  • list.filterMatchBackground#DEB07140
  • list.filterMatchBorder#00000000
  • list.focusBackground#6CC9C71A
  • list.focusForeground#F5F9FC
  • list.highlightForeground#6CC9C7
  • list.hoverBackground#6CC9C71A
  • list.hoverForeground#F5F9FC
  • list.inactiveSelectionBackground#6CC9C71A
  • list.inactiveSelectionForeground#ECF2F8
  • menu.background#0B121C
  • menu.border#FFFFFF14
  • menu.foreground#ECF2F8
  • menu.selectionBackground#6CC9C780
  • menu.selectionForeground#F5F9FC
  • menu.separatorBackground#FFFFFF14
  • menubar.selectionBackground#0B121C
  • menubar.selectionForeground#F5F9FC
  • minimap.chatEditHighlight#121C2899
  • minimap.findMatchHighlight#DEB07180
  • minimap.selectionHighlight#6CC9C780
  • minimapGutter.addedBackground#88D8AE
  • minimapGutter.deletedBackground#E89A95
  • minimapGutter.modifiedBackground#DEB071
  • minimapSlider.activeBackground#FFFFFF29
  • minimapSlider.background#FFFFFF14
  • minimapSlider.hoverBackground#FFFFFF1F
  • notificationCenter.border#FFFFFF14
  • notificationLink.foreground#6CC9C7
  • notifications.background#0B121C
  • notifications.border#FFFFFF14
  • notifications.foreground#ECF2F8
  • panel.background#131D29
  • panel.border#FFFFFF0D
  • panel.dropBorder#6CC9C7
  • panelSection.border#FFFFFF0D
  • panelSection.dropBackground#6CC9C71A
  • panelSectionHeader.background#131D29
  • panelSectionHeader.border#FFFFFF14
  • panelSectionHeader.foreground#F5F9FC
  • panelStickyScroll.background#131D29
  • panelStickyScroll.border#FFFFFF14
  • panelStickyScroll.shadow#00000000
  • panelTitle.activeBorder#6CC9C7
  • panelTitle.activeForeground#F5F9FC
  • panelTitle.border#FFFFFF0D
  • panelTitle.inactiveForeground#6B7989
  • peekView.border#6CC9C7
  • peekViewEditor.background#131D29
  • peekViewEditor.matchHighlightBackground#DEB07140
  • peekViewResult.background#0B121C
  • peekViewResult.matchHighlightBackground#DEB07140
  • peekViewResult.selectionBackground#6CC9C71A
  • peekViewResult.selectionForeground#F5F9FC
  • peekViewTitle.background#0B121C
  • pickerGroup.border#FFFFFF14
  • pickerGroup.foreground#6CC9C7
  • ports.iconRunningProcessForeground#88D8AE
  • progressBar.background#6CC9C7
  • quickInput.background#0B121C
  • quickInput.foreground#ECF2F8
  • quickInputList.focusBackground#6CC9C71A
  • quickInputList.focusForeground#F5F9FC
  • quickInputList.focusIconForeground#F5F9FC
  • scmGraph.foreground1#6CC9C7
  • scmGraph.foreground2#DEB071
  • scmGraph.foreground3#BAA1E0
  • scmGraph.foreground4#95BFE0
  • scmGraph.foreground5#E89A95
  • scmGraph.historyItemHoverAdditionsForeground#88D8AE
  • scmGraph.historyItemHoverDefaultLabelBackground#FFFFFF14
  • scmGraph.historyItemHoverDefaultLabelForeground#94A3B5
  • scmGraph.historyItemHoverDeletionsForeground#E89A95
  • scmGraph.historyItemHoverLabelForeground#F5F9FC
  • scrollbarSlider.activeBackground#FFFFFF29
  • scrollbarSlider.background#FFFFFF14
  • scrollbarSlider.hoverBackground#FFFFFF1F
  • selection.background#6CC9C733
  • settings.headerForeground#F5F9FC
  • settings.modifiedItemIndicator#6CC9C7
  • sideBar.background#131D29
  • sideBar.border#FFFFFF0D
  • sideBar.dropBackground#6CC9C71A
  • sideBar.foreground#ECF2F8
  • sideBarSectionHeader.background#131D29
  • sideBarSectionHeader.foreground#F5F9FC
  • sideBarStickyScroll.background#131D29
  • sideBarStickyScroll.border#FFFFFF14
  • sideBarStickyScroll.shadow#00000000
  • sideBarTitle.foreground#F5F9FC
  • statusBar.background#111B26
  • statusBar.border#FFFFFF0D
  • statusBar.debuggingBackground#DEB071
  • statusBar.debuggingForeground#0F1822
  • statusBar.foreground#94A3B5
  • statusBar.noFolderBackground#111B26
  • statusBar.noFolderForeground#94A3B5
  • statusBarItem.hoverBackground#FFFFFF14
  • statusBarItem.remoteBackground#4A9897
  • statusBarItem.remoteForeground#0B121C
  • tab.activeBackground#121C28
  • tab.activeBorderTop#6CC9C7
  • tab.activeForeground#F5F9FC
  • tab.border#FFFFFF0D
  • tab.inactiveBackground#131D29
  • tab.inactiveForeground#94A3B5
  • tab.unfocusedActiveBackground#121C28
  • tab.unfocusedActiveBorderTop#4A9897
  • tab.unfocusedActiveForeground#ECF2F8
  • tab.unfocusedInactiveForeground#6B7989
  • terminal.ansiBlack#0F1822
  • terminal.ansiBlue#95BFE0
  • terminal.ansiBrightBlack#6B7989
  • terminal.ansiBrightBlue#ADD4F0
  • terminal.ansiBrightCyan#88D8D8
  • terminal.ansiBrightGreen#A0E8C4
  • terminal.ansiBrightMagenta#D0B8F0
  • terminal.ansiBrightRed#F0ADA8
  • terminal.ansiBrightWhite#F5F9FC
  • terminal.ansiBrightYellow#E8C48A
  • terminal.ansiCyan#6CC9C7
  • terminal.ansiGreen#88D8AE
  • terminal.ansiMagenta#BAA1E0
  • terminal.ansiRed#E89A95
  • terminal.ansiWhite#ECF2F8
  • terminal.ansiYellow#DEB071
  • terminal.background#131D29
  • terminal.border#FFFFFF0D
  • terminal.findMatchBackground#DEB07140
  • terminal.findMatchHighlightBackground#DEB07125
  • terminal.foreground#ECF2F8
  • terminal.selectionBackground#6CC9C733
  • terminal.tab.activeBorder#6CC9C7
  • terminalCommandDecoration.defaultBackground#94A3B5
  • terminalCommandDecoration.errorBackground#E89A95
  • terminalCommandDecoration.successBackground#88D8AE
  • terminalCursor.foreground#6CC9C7
  • textLink.activeForeground#88D8D8
  • textLink.foreground#6CC9C7
  • titleBar.activeBackground#111B26
  • titleBar.activeForeground#94A3B5
  • titleBar.border#FFFFFF0D
  • titleBar.inactiveBackground#111B26
  • titleBar.inactiveForeground#6B7989
  • tree.inactiveIndentGuidesStroke#FFFFFF08
  • tree.indentGuidesStroke#FFFFFF14
  • welcomePage.tileBackground#131D29
  • welcomePage.tileBorder#FFFFFF14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#74849Aitalic
keyword, storage.type, storage.modifier#9B7FD4
keyword.control#C9A6E8
keyword.operator#94A3B5
string, punctuation.definition.string#DEB071
constant.character.escape#6CC9C7
entity.name.function, support.function#E8B49B
entity.name.type, entity.name.class, support.type, support.class#95BFE0
entity.name.type.interface, entity.name.type.parameter#95BFE0
variable, variable.other, variable.parameter#c2ccd7
variable.language#9B7FD4
variable.other.property, variable.other.object.property, support.type.property-name#B5C2D0
constant.numeric#F0D0A0
constant.language, support.constant#F0D0A0
entity.name.tag, punctuation.definition.tag#E8B49B
entity.other.attribute-name#9B7FD4
meta.decorator, punctuation.decorator, meta.decorator entity.name.function#6CC9C7
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.separator, punctuation.terminator#94A3B5
entity.name.namespace, entity.name.module#95BFE0
variable.other.enummember, constant.other.enum#F0D0A0
support.type.property-name.json#B5C2D0
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#B5C2D0
keyword.other.unit.css, keyword.other.unit.scss#F0D0A0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6CC9C7
string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp#6CC9C7
heading.1.markdown, markup.heading.setext.1.markdown, entity.name.section.markdown#F5F9FCbold
heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading.setext.2.markdown#6CC9C7bold
punctuation.definition.heading.markdown#6CC9C7
markup.italic#ECF2F8italic
markup.bold#F5F9FCbold
markup.underline.link, string.other.link#6CC9C7
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown#DEB071
markup.inline.raw.string.markdown#E8B49B
markup.fenced_code.block.markdown, punctuation.definition.markdown#94A3B5
markup.inserted#88D8AE
markup.deleted#E89A95
markup.changed#DEB071
identifier.quoted.double.al#8CB87E
Operator Dark by Flemming Bakkensen - VS Code Theme