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.background#241D20
  • activityBar.border#2D2326
  • activityBar.foreground#E4D8DD
  • activityBar.inactiveForeground#756268
  • activityBarBadge.background#CE95A8
  • activityBarBadge.foreground#1C1619
  • button.background#CE95A8
  • button.foreground#1C1619
  • button.hoverBackground#D4A5B5
  • charts.blue#B4D9EE
  • charts.foreground#E4D8DD
  • charts.green#B8E6D0
  • charts.lines#CE95A8
  • charts.orange#D4A5B5
  • charts.purple#C5B3E6
  • charts.red#E8BCC8
  • charts.yellow#F2D4A7
  • editor.background#1C1619
  • editor.findMatchBackground#F2D4A770
  • editor.findMatchHighlightBackground#F2D4A740
  • editor.foldBackground#C5B3E620
  • editor.foreground#E4D8DD
  • editor.inactiveSelectionBackground#CE95A830
  • editor.lineHighlightBackground#2D2326
  • editor.selectionBackground#CE95A850
  • editor.wordHighlightBackground#B4D9EE40
  • editorBracketHighlight.foreground1#E8BCC8
  • editorBracketHighlight.foreground2#F2D4A7
  • editorBracketHighlight.foreground3#B8E6D0
  • editorBracketHighlight.foreground4#B4D9EE
  • editorBracketHighlight.foreground5#C5B3E6
  • editorBracketHighlight.foreground6#CE95A8
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorGroup.border#2D2326
  • editorGroup.dropBackground#CE95A820
  • editorGroupHeader.tabsBackground#1C1619
  • editorGroupHeader.tabsBorder#2D2326
  • editorGutter.addedBackground#B8E6D0
  • editorGutter.deletedBackground#E8BCC8
  • editorGutter.modifiedBackground#B4D9EE
  • editorOverviewRuler.addedForeground#B8E6D0
  • editorOverviewRuler.deletedForeground#E8BCC8
  • editorOverviewRuler.modifiedForeground#B4D9EE
  • extensionButton.prominentBackground#CE95A8
  • extensionButton.prominentForeground#1C1619
  • extensionButton.prominentHoverBackground#D4A5B5
  • focusBorder#CE95A8
  • gitDecoration.deletedResourceForeground#E8BCC8
  • gitDecoration.ignoredResourceForeground#756268
  • gitDecoration.modifiedResourceForeground#B4D9EE
  • gitDecoration.renamedResourceForeground#C5B3E6
  • gitDecoration.stageModifiedResourceForeground#F2D4A7
  • gitDecoration.untrackedResourceForeground#B8E6D0
  • gitGraph.branchLabel#E4D8DD
  • gitGraph.cursorColumnBackground#2D2326
  • gitGraph.cursorRowBackground#2D2326
  • gitGraph.localBranchBackground#B8E6D0
  • gitGraph.remoteBranchBackground#B4D9EE
  • gitGraph.rowHoverBackground#CE95A810
  • gitGraph.selectedRowBackground#CE95A820
  • gitGraph.tagLabelBackground#F2D4A7
  • gitGraph.tagLabelForeground#1C1619
  • input.background#2D2326
  • input.border#3D3336
  • input.foreground#E4D8DD
  • input.placeholderForeground#756268
  • inputOption.activeBorder#CE95A8
  • inputValidation.errorBackground#E8BCC820
  • inputValidation.errorBorder#E8BCC8
  • inputValidation.infoBackground#B4D9EE20
  • inputValidation.infoBorder#B4D9EE
  • inputValidation.warningBackground#F2D4A720
  • inputValidation.warningBorder#F2D4A7
  • list.activeSelectionBackground#CE95A850
  • list.activeSelectionForeground#E4D8DD
  • list.deemphasizedForeground#756268
  • list.errorForeground#E8BCC8
  • list.hoverBackground#2D2326
  • list.hoverForeground#E4D8DD
  • list.warningForeground#F2D4A7
  • menu.background#241D20
  • menu.foreground#E4D8DD
  • menu.selectionBackground#2D2326
  • menu.selectionBorder#CE95A8
  • menu.selectionForeground#E4D8DD
  • merge.currentContentBackground#CE95A820
  • merge.currentHeaderBackground#CE95A850
  • merge.incomingContentBackground#B4D9EE20
  • merge.incomingHeaderBackground#B4D9EE50
  • notificationCenter.border#2D2326
  • notifications.background#241D20
  • notifications.border#2D2326
  • notifications.foreground#E4D8DD
  • quickInput.background#241D20
  • quickInput.foreground#E4D8DD
  • quickInputList.focusBackground#2D2326
  • quickInputList.focusForeground#E4D8DD
  • scm.providerBorder#2D2326
  • sideBar.background#1C1619
  • sideBar.border#2D2326
  • sideBar.foreground#E4D8DD
  • sideBarSectionHeader.background#241D20
  • sideBarSectionHeader.foreground#E4D8DD
  • sideBarTitle.foreground#CE95A8
  • sourceControl.addedResourceForeground#B8E6D0
  • sourceControl.deletedResourceForeground#E8BCC8
  • sourceControl.modifiedResourceForeground#B4D9EE
  • statusBar.background#241D20
  • statusBar.border#2D2326
  • statusBar.debuggingBackground#CE95A8
  • statusBar.foreground#E4D8DD
  • statusBar.noFolderBackground#2D2326
  • statusBar.noFolderForeground#E4D8DD
  • statusBarItem.remoteBackground#CE95A8
  • statusBarItem.remoteForeground#1C1619
  • tab.activeBackground#2D2326
  • tab.activeBorder#CE95A8
  • tab.activeForeground#E4D8DD
  • tab.border#2D2326
  • tab.inactiveBackground#1C1619
  • tab.inactiveForeground#756268
  • terminal.ansiBlue#B4D9EE
  • terminal.ansiBrightBlue#B4D9EE
  • terminal.ansiBrightCyan#B4E6E6
  • terminal.ansiBrightGreen#B8E6D0
  • terminal.ansiBrightMagenta#CE95A8
  • terminal.ansiBrightRed#E8BCC8
  • terminal.ansiBrightYellow#F2D4A7
  • terminal.ansiCyan#B4E6E6
  • terminal.ansiGreen#B8E6D0
  • terminal.ansiMagenta#CE95A8
  • terminal.ansiRed#E8BCC8
  • terminal.ansiYellow#F2D4A7
  • terminal.background#1C1619
  • terminal.foreground#E4D8DD
  • textLink.activeForeground#CE95A8
  • textLink.foreground#B4D9EE
  • titleBar.activeBackground#241D20
  • titleBar.activeForeground#E4D8DD
  • titleBar.inactiveBackground#1C1619
  • titleBar.inactiveForeground#756268
  • welcomePage.background#1C1619
  • welcomePage.progress.background#2D2326
  • welcomePage.progress.foreground#CE95A8
  • welcomePage.tile.background#241D20
  • welcomePage.tile.hoverBackground#2D2326
  • welcomePage.tileHoverBorder#CE95A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.strikethrough#756268strikethrough
markup.heading#CE95A8bold
markup.bold#B4D9EEbold
markup.italic#C5B3E6italic
markup.inline.raw, markup.fenced_code, markup.raw.block#B8E6D0
markup.underline.link#B4D9EEunderline
markup.list.bullet#F2D4A7
markup.quote#E4D8DDitalic
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#756268
string#B4D9EE
keyword#CE95A8
entity.other.attribute-name.tsx#F2D4A7
entity.name.function, entity.name.function.tsx, meta.function-call, meta.function.expression, meta.method.declaration, meta.definition.method, meta.definition.function, meta.function-call.tsx, support.function, variable.function#C5B3E6italic
meta.function-call.arguments, meta.function-call.arguments.python, meta.item-access.python, meta.indexed-name.python#E4D8DD
support.type, support.type.primitive.tsx, support.type.primitive#B8E6D0italic
meta.embedded.expression.tsx meta.tag.attributes.tsx variable.other.readwrite.tsx#C5B3E6italic
variable.other.readwrite.tsx, variable.other.constant.tsx, meta.embedded.expression.tsx variable.other.readwrite.tsx#E4D8DD
support.type.property-name.json
string.quoted.double.json, string.quoted.single.json, meta.structure.dictionary.value.json string.quoted.double.json#E4D8DD
meta.definition.variable.tsx meta.array-binding-pattern-variable.tsx variable.other.constant.tsx#E4D8DD
comment, comment.block.documentation#756268italic
entity.name.function#E8BCC8italic
constant.numeric#F2D4A7
support.type, entity.name.type, support.class#C5B3E6italic
storage.type#D4A5B5
entity.name.type#B4E6E6
support.class#E6B3CCitalic
ThemeDatabase All Themes by enes ozturk - VS Code Theme