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.activeBackground#00000000
  • activityBar.activeBorder#19D08AFF
  • activityBar.background#111D1EFF
  • activityBar.border#192828FF
  • activityBar.foreground#19D08AFF
  • activityBar.inactiveForeground#49737EFF
  • activityBarBadge.background#1D5942FF
  • activityBarBadge.foreground#FFFFFFFF
  • activityBarTop.activeBorder#19D08AFF
  • activityBarTop.dropBorder#19D08AFF
  • activityBarTop.foreground#19D08AFF
  • activityBarTop.inactiveForeground#49737EFF
  • badge.background#14402FFF
  • badge.foreground#19D08AFE
  • banner.background#14402FFF
  • banner.foreground#19D08AFF
  • banner.iconForeground#1BDE94FF
  • button.background#14402FFF
  • button.foreground#19D08AFF
  • button.hoverBackground#184E39FF
  • button.secondaryBackground#203739FF
  • button.secondaryHoverBackground#284447FF
  • button.separator#1A553EFF
  • chat.avatarBackground#1D3233FF
  • chat.avatarForeground#639caa
  • chat.requestBorder#192828FF
  • chat.slashCommandBackground#00000000
  • chat.slashCommandForeground#19D08AFF
  • checkbox.background#1D3133FF
  • checkbox.border#263C3EFF
  • checkbox.foreground#639caa
  • commandCenter.activeBackground#1A2E2FFF
  • commandCenter.activeBorder#192828FF
  • commandCenter.activeForeground#639caa
  • commandCenter.background#162426
  • commandCenter.border#192828FF
  • commandCenter.foreground#639caa
  • debugIcon.breakpointForeground#81568b
  • debugToolBar.background#162426
  • debugToolBar.border#1A2D2DFF
  • descriptionForeground#517680FF
  • diffEditor.border#192828FF
  • diffEditor.diagonalFill#192828FF
  • diffEditor.insertedLineBackground#66a76b16
  • diffEditor.insertedTextBackground#66a76b20
  • diffEditor.move.border#192828FF
  • diffEditor.moveActive.border#192828FF
  • diffEditor.removedLineBackground#a7666616
  • diffEditor.removedTextBackground#a7666620
  • disabledForeground#415E66FF
  • dropdown.background#1D3133FF
  • dropdown.border#263C3EFF
  • dropdown.foreground#639caa
  • dropdown.listBackground#162426
  • editor.background#111D1EFF
  • editor.findMatchBackground#19D08A2D
  • editor.findMatchBorder#19D08AFF
  • editor.findMatchHighlightBackground#19D08A2D
  • editor.findMatchHighlightBorder#19D08A2D
  • editor.findRangeHighlightBackground#19D08A2D
  • editor.findRangeHighlightBorder#19D08A2D
  • editor.foldBackground#00000000
  • editor.foreground#639caa
  • editor.lineHighlightBackground#162426
  • editor.rangeHighlightBackground#72C0C915
  • editor.selectionBackground#76C8CD14
  • editor.snippetFinalTabstopHighlightBackground#72C0C930
  • editor.snippetFinalTabstopHighlightBorder#72C0C930
  • editor.snippetTabstopHighlightBackground#72C0C915
  • editor.snippetTabstopHighlightBorder#72C0C915
  • editor.wordHighlightBackground#72C0C915
  • editor.wordHighlightBorder#72C0C915
  • editor.wordHighlightStrongBackground#72C0C920
  • editor.wordHighlightStrongBorder#72C0C920
  • editorBracketHighlight.foreground1#3c5358
  • editorBracketHighlight.foreground2#4d808b
  • editorBracketHighlight.foreground3#927486
  • editorBracketHighlight.foreground4#51718a
  • editorBracketHighlight.foreground5#7d816c
  • editorBracketHighlight.foreground6#938479
  • editorBracketHighlight.unexpectedBracket.foreground#BB6666FF
  • editorBracketMatch.border#517680FF
  • editorCodeLens.foreground#375860FF
  • editorCursor.background#19D08AFF
  • editorCursor.foreground#19D08AFF
  • editorError.foreground#BB6666FF
  • editorGhostText.foreground#4A6C74FF
  • editorGroup.border#192828FF
  • editorGroup.dropBackground#72C0C90E
  • editorGroupHeader.border#192828FF
  • editorGroupHeader.noTabsBackground#111D1EFF
  • editorGroupHeader.tabsBackground#111D1EFF
  • editorGroupHeader.tabsBorder#192828FF
  • editorGutter.addedBackground#66a76b
  • editorGutter.deletedBackground#a76666
  • editorGutter.modifiedBackground#9975b1
  • editorHint.foreground#4a6060
  • editorHoverWidget.background#192B2CFF
  • editorHoverWidget.border#253F41FF
  • editorHoverWidget.foreground#639caa
  • editorInfo.foreground#2A99B5FF
  • editorLightBulb.foreground#BBB466FE
  • editorLightBulbAi.foreground#BBB466FE
  • editorLightBulbAutoFix.foreground#19D08AFE
  • editorLineNumber.activeForeground#17C281FF
  • editorLineNumber.dimmedForeground#1C2E31FF
  • editorLineNumber.foreground#223e43
  • editorLink.activeForeground#578a97
  • editorOverviewRuler.addedForeground#66a76b
  • editorOverviewRuler.background#0E1819FF
  • editorOverviewRuler.border#192828FF
  • editorOverviewRuler.commentForeground#4A6C74FF
  • editorOverviewRuler.commentUnresolvedForeground#4A6C74FF
  • editorOverviewRuler.deletedForeground#A76666
  • editorOverviewRuler.errorForeground#BB6666FF
  • editorOverviewRuler.findMatchForeground#19D08A2D
  • editorOverviewRuler.infoForeground#2A99B5FF
  • editorOverviewRuler.modifiedForeground#9975b1
  • editorOverviewRuler.warningForeground#BBB466FF
  • editorOverviewRuler.wordHighlightForeground#72C0C915
  • editorOverviewRuler.wordHighlightStrongForeground#72C0C920
  • editorStickyScroll.background#111D1EFF
  • editorStickyScroll.border#192828FF
  • editorStickyScroll.shadow#00000058
  • editorStickyScrollHover.background#76C8CD14
  • editorUnicodeHighlight.border#BBB466FF
  • editorWarning.foreground#BBB466FF
  • editorWhitespace.foreground#19282c
  • editorWidget.background#162426
  • editorWidget.border#1A2D2DFF
  • editorWidget.foreground#639caa
  • editorWidget.resizeBorder#1A2D2DFF
  • errorForeground#BB6666FF
  • errorLens.errorBackground#00000000
  • errorLens.errorBackgroundLight#00000000
  • errorLens.errorForeground#BB6666FF
  • errorLens.errorForegroundLight#C96E6EFF
  • errorLens.hintBackground#00000000
  • errorLens.hintBackgroundLight#00000000
  • errorLens.hintForeground#4a6060
  • errorLens.hintForegroundLight#597676
  • errorLens.infoBackground#00000000
  • errorLens.infoBackgroundLight#00000000
  • errorLens.infoForeground#2A99B5FF
  • errorLens.infoForegroundLight#2DA5C4FF
  • errorLens.warningBackground#00000000
  • errorLens.warningBackgroundLight#00000000
  • errorLens.warningForeground#BBB466FF
  • errorLens.warningForegroundLight#CBC36FFF
  • extensionBadge.remoteBackground#14402FFF
  • extensionBadge.remoteForeground#19D08AFE
  • extensionIcon.preReleaseForeground#14402ffa
  • extensionIcon.sponsorForeground#19D08AFE
  • extensionIcon.starForeground#BBB466FE
  • extensionIcon.verifiedForeground#19D08AFE
  • focusBorder#19D08AFF
  • foreground#639caa
  • gitDecoration.addedResourceForeground#66a76b
  • gitDecoration.conflictingResourceForeground#a77e66
  • gitDecoration.deletedResourceForeground#a76666
  • gitDecoration.ignoredResourceForeground#385c60
  • gitDecoration.modifiedResourceForeground#9975b1
  • gitDecoration.renamedResourceForeground#8ea766
  • gitDecoration.untrackedResourceForeground#7580b1
  • gitlens.decorations.addedForegroundColor#66a76b
  • gitlens.decorations.deletedForegroundColor#a76666
  • gitlens.decorations.ignoredForegroundColor#385c60
  • gitlens.decorations.modifiedForegroundColor#9975b1
  • gitlens.decorations.renamedForegroundColor#8ea766
  • gitlens.decorations.untrackedForegroundColor#7580b1
  • gitlens.graphChangesColumnAddedColor#66a76b
  • gitlens.graphChangesColumnDeletedColor#a76666
  • gitlens.graphLane10Color#A2B86EFF
  • gitlens.graphLane1Color#2A99B5FF
  • gitlens.graphLane2Color#66BB66FF
  • gitlens.graphLane3Color#BBB466FF
  • gitlens.graphLane4Color#BB6666FF
  • gitlens.graphLane5Color#34BBBBFF
  • gitlens.graphLane6Color#AA6EB8FF
  • gitlens.graphLane7Color#846EB8FF
  • gitlens.graphLane8Color#6EB89CFF
  • gitlens.graphLane9Color#B8986EFF
  • icon.foreground#639caa
  • inlineChatInput.placeholderForeground#4A6C74FF
  • input.background#1D3133FF
  • input.border#263C3EFF
  • input.foreground#639caa
  • input.placeholderForeground#4A6C74FF
  • inputOption.activeBackground#14402FFF
  • inputOption.activeBorder#14402FFF
  • inputOption.activeForeground#19D08AFF
  • inputOption.hoverBackground#76C8CD14
  • inputValidation.errorBackground#3D2727FF
  • inputValidation.errorBorder#523434FF
  • inputValidation.errorForeground#BB6666FF
  • inputValidation.infoBackground#12363EFF
  • inputValidation.infoBorder#184954FF
  • inputValidation.infoForeground#2A99B5FF
  • inputValidation.warningBackground#44422BFF
  • inputValidation.warningBorder#595739FF
  • inputValidation.warningForeground#BBB466FF
  • keybindingLabel.background#14402FFF
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#00000000
  • keybindingLabel.foreground#19D08AFE
  • list.activeSelectionBackground#19D08A26
  • list.activeSelectionForeground#19D08AFF
  • list.activeSelectionIconForeground#19D08AFF
  • list.dropBackground#72C0C90E
  • list.errorForeground#AF6B6BFF
  • list.focusBackground#19D08A26
  • list.focusForeground#19D08AFF
  • list.focusOutline#19D08A26
  • list.hoverBackground#76C8CD14
  • list.hoverForeground#639caa
  • list.inactiveFocusOutline#19D08A26
  • list.inactiveSelectionBackground#19D08A26
  • list.inactiveSelectionForeground#19D08AFF
  • list.inactiveSelectionIconForeground#19D08AFF
  • menu.background#162426
  • menu.border#1A2D2DFF
  • menu.foreground#507f8b
  • menu.separatorBackground#1A2D2DFF
  • menubar.selectionBackground#76C8CD14
  • menubar.selectionForeground#639caa
  • minimap.background#131F21b9
  • minimap.errorHighlight#BB6666FF
  • minimap.findMatchHighlight#19D08A2D
  • minimap.infoHighlight#2A99B5FF
  • minimap.selectionHighlight#76C8CD14
  • minimap.selectionOccurrenceHighlight#72C0C915
  • minimap.warningHighlight#BBB466FF
  • minimapGutter.addedBackground#66a76b
  • minimapGutter.deletedBackground#A76666
  • minimapGutter.modifiedBackground#9975b1
  • panel.background#0E1819FF
  • panel.border#192828FF
  • panel.dropBorder#19D08AFF
  • panelSection.border#192828FF
  • panelSection.dropBackground#72C0C90E
  • panelSectionHeader.background#111D1EFF
  • panelSectionHeader.border#192828FF
  • panelSectionHeader.foreground#639caa
  • panelTitle.activeBorder#19D08AFF
  • panelTitle.activeForeground#19D08AFF
  • panelTitle.inactiveForeground#639caa
  • peekView.border#192828FF
  • peekViewEditor.background#0B1314FF
  • peekViewEditor.matchHighlightBackground#03774e1e
  • peekViewEditor.matchHighlightBorder#03774e1e
  • peekViewEditorGutter.background#0B1314FF
  • peekViewResult.background#0f1a1b
  • peekViewResult.fileForeground#639caa
  • peekViewResult.lineForeground#639caa
  • peekViewResult.matchHighlightBackground#03774e1e
  • peekViewResult.selectionBackground#19D08A26
  • peekViewResult.selectionForeground#17C281FF
  • peekViewTitle.background#0f1a1b
  • peekViewTitleDescription.foreground#517680FF
  • peekViewTitleLabel.foreground#639caa
  • pickerGroup.border#1A2D2DFF
  • pickerGroup.foreground#517680FF
  • problemsErrorIcon.foreground#BB6666FF
  • problemsInfoIcon.foreground#2A99B5FF
  • problemsWarningIcon.foreground#BBB466FF
  • profileBadge.background#1D5942FF
  • profileBadge.foreground#FFFFFFFF
  • progressBar.background#19D08AFF
  • quickInput.background#162426
  • quickInput.foreground#639caa
  • quickInputTitle.background#162426
  • sash.hoverBorder#19D08AFF
  • scrollbar.shadow#00000034
  • scrollbarSlider.activeBackground#18292AFF
  • scrollbarSlider.background#203739FF
  • scrollbarSlider.hoverBackground#284447FF
  • selection.background#19D08A33
  • settings.focusedRowBackground#76c9cd0b
  • settings.focusedRowBorder#76c9cd0b
  • settings.headerBorder#192828FF
  • settings.headerForeground#639caa
  • settings.modifiedItemIndicator#19D08AFF
  • settings.rowHoverBackground#76c9cd0b
  • sideBar.background#0E1819FF
  • sideBar.border#192828FF
  • sideBar.dropBackground#72C0C90E
  • sideBar.foreground#49737EFF
  • sideBarSectionHeader.background#111D1EFF
  • sideBarSectionHeader.border#192828FF
  • sideBarSectionHeader.foreground#49737EFF
  • sideBarTitle.background#111D1EFF
  • sideBarTitle.foreground#49737EFF
  • simpleFindWidget.sashBorder#263C3EFF
  • statusBar.background#111D1EFF
  • statusBar.border#192828FF
  • statusBar.debuggingBackground#614a60
  • statusBar.debuggingBorder#755974
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#517680FF
  • statusBar.noFolderBackground#111D1EFF
  • statusBar.noFolderBorder#192828FF
  • statusBar.noFolderForeground#517680FF
  • statusBarItem.activeBackground#76C8CD14
  • statusBarItem.hoverBackground#76C8CD14
  • statusBarItem.hoverForeground#639caa
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#517680FF
  • statusBarItem.remoteHoverBackground#76C8CD14
  • statusBarItem.remoteHoverForeground#639caa
  • symbolIcon.arrayForeground#a5985e
  • symbolIcon.booleanForeground#a5985e
  • symbolIcon.classForeground#1ebbae
  • symbolIcon.constantForeground#a5985e
  • symbolIcon.enumeratorForeground#4db4d3
  • symbolIcon.enumeratorMemberForeground#36bd95
  • symbolIcon.fieldForeground#639caa
  • symbolIcon.fileForeground#639caa
  • symbolIcon.folderForeground#639caa
  • symbolIcon.functionForeground#b87588
  • symbolIcon.interfaceForeground#36bd95
  • symbolIcon.keywordForeground#4db4d3
  • symbolIcon.methodForeground#b87588
  • symbolIcon.nullForeground#a5985e
  • symbolIcon.numberForeground#a5985e
  • symbolIcon.propertyForeground#846e8f
  • symbolIcon.snippetForeground#19D08AFF
  • symbolIcon.stringForeground#92b269
  • symbolIcon.textForeground#3f6972
  • symbolIcon.unitForeground#c28a5c
  • symbolIcon.variableForeground#639caa
  • tab.activeBackground#111D1EFF
  • tab.activeBorder#19D08AFF
  • tab.activeBorderTop#19D08AFF
  • tab.activeForeground#19D08AFF
  • tab.border#192828FF
  • tab.hoverForeground#19D08AFF
  • tab.inactiveBackground#111D1EFF
  • tab.inactiveForeground#49737EFF
  • terminal.ansiBlack#035779FF
  • terminal.ansiBlue#2A99B5FF
  • terminal.ansiBrightBlack#0B5B7AFF
  • terminal.ansiBrightBlue#2DA5C4FF
  • terminal.ansiBrightCyan#38C9C9FF
  • terminal.ansiBrightGreen#6FCC6FFF
  • terminal.ansiBrightMagenta#B776C6FF
  • terminal.ansiBrightRed#C96E6EFF
  • terminal.ansiBrightWhite#ADD0D9FF
  • terminal.ansiBrightYellow#CBC36FFF
  • terminal.ansiCyan#34BBBBFF
  • terminal.ansiGreen#66BB66FF
  • terminal.ansiMagenta#AA6EB8FF
  • terminal.ansiRed#BB6666FF
  • terminal.ansiWhite#A1C3CBFF
  • terminal.ansiYellow#BBB466FF
  • terminal.background#0E1819FF
  • terminal.border#192828FF
  • terminal.dropBackground#72C0C90E
  • terminal.findMatchBackground#19D08A2D
  • terminal.findMatchBorder#19D08AFF
  • terminal.findMatchHighlightBackground#19D08A2D
  • terminal.findMatchHighlightBorder#19D08A2D
  • terminal.foreground#639caa
  • terminal.hoverHighlightBackground#76C8CD14
  • terminal.selectionBackground#76C8CD14
  • terminal.selectionForeground#639caa
  • terminalCommandDecoration.defaultBackground#19D08AFF
  • terminalCommandDecoration.errorBackground#BB6666FF
  • terminalCommandDecoration.successBackground#66BB66FF
  • terminalCursor.background#19D08AFF
  • terminalCursor.foreground#19D08AFF
  • terminalOverviewRuler.findMatchForeground#19D08A2D
  • terminalStickyScrollHover.background#76C8CD14
  • testing.iconErrored#C96E6EFF
  • testing.iconFailed#BB6666FF
  • testing.iconPassed#66BB66FF
  • testing.iconQueued#19D08AFF
  • testing.iconSkipped#BBB466FF
  • testing.iconUnset#639caa
  • textBlockQuote.background#0B1314FF
  • textBlockQuote.border#17C281FF
  • textCodeBlock.background#0B1314FF
  • textLink.activeForeground#17C281FF
  • textLink.foreground#19D08AFF
  • textPreformat.background#0B1314FF
  • textPreformat.foreground#639caa
  • textSeparator.foreground#192828FF
  • titleBar.activeBackground#111D1EFF
  • titleBar.activeForeground#49737EFF
  • titleBar.border#192828FF
  • titleBar.inactiveBackground#111D1EFF
  • titleBar.inactiveForeground#49737EFF
  • toolbar.hoverBackground#76C8CD14
  • tree.inactiveIndentGuidesStroke#1C2E31FF
  • tree.indentGuidesStroke#36595DFF
  • walkThrough.embeddedEditorBackground#0B1314FF
  • walkthrough.stepTitle.foreground#639caa
  • welcomePage.tileBackground#162426
  • welcomePage.tileBorder#1A2D2DFF
  • welcomePage.tileHoverBackground#162426
  • widget.border#1A2D2DFF
  • widget.shadow#00000034
  • window.activeBorder#263C3EFF
  • window.inactiveBorder#192828FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#b46363—
meta.brace, punctuation, keyword.operator.class, keyword.operator.type.annotation, storage.type.function.arrow#375860FF—
comment, punctuation.definition.comment#3c7e8e—
entity.name.other.preprocessor, entity.name.function.preprocessor#968ba2—
keyword, keyword.control.directive, storage.modifier.async, storage.type.function#a47381—
support.class.component#628fc3—
storage, keyword.const.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.other.declaration-specifier, entity.name.tag, entity.name.section.markdown, entity.name.section.group-title#429db9—
support.type, entity.name.type, keyword.other.type#39b58f—
support.function, entity.name.function, variable.language.super#9580b2—
support.class, entity.name.class, entity.name.type.class, entity.name.type.module, entity.other.alias, entity.other.inherited-class#7c86bb—
support.other.namespace, entity.name.type.namespace#ad927b—
entity.other.attribute-name.id, entity.other.attribute-name.class#a09747—
string, markup.inline.raw.string, markup.fenced_code.block#829e60—
variable.other.link, string.interpolated, markup.underline.link#97a067—
constant, keyword.other.unit.hexadecimal, fenced_code.block.language#afa05f—
keyword.other.unit.px, storage.type.numeric.bigint#c28a5c—
variable, support.variable, entity.other.attribute, constant.other.caps, storage.modifier.package.java, storage.modifier.import.java#639caa—
variable.language.self, variable.language.this, variable.language.special.self, variable.language.special.this, variable.parameter.function.language.special.self, variable.parameter.function.language.special.this#4C6F78FFbold italic
variable.language.global#5d7a80bold
entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name, invalid.deprecated.entity.other.attribute-name.html#8f739d—
markup.inserted.diff, meta.diff.header.to-file#60a060—
meta.diff.header.from-file, markup.deleted.diff#bd6e6e—
markup.italic—italic
markup.bold—bold
markup.strikethrough—strikethrough

Shiki preview

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

Loading...

Ocean Green - Coding Theme