Skip to main content
CodingTheme

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#c8ccc3
  • activityBar.activeBorder#c8ccc3
  • activityBar.background#dfe1dc
  • activityBar.border#c8ccc3
  • activityBar.foreground#4b5254
  • activityBar.inactiveForeground#60696b
  • activityBarBadge.background#e84c58
  • activityBarBadge.foreground#f2f2f2
  • badge.background#e84c58
  • badge.foreground#f2f2f2
  • breadcrumb.activeSelectionForeground#383e3f
  • breadcrumb.focusForeground#383e3f
  • breadcrumb.foreground#60696b
  • breadcrumbPicker.background#edeeeb
  • button.background#13665f
  • button.foreground#edeeeb
  • button.secondaryBackground#13665f
  • button.secondaryForeground#edeeeb
  • checkbox.background#f5f6f5
  • checkbox.border#c8ccc3
  • checkbox.foreground#4c7a90
  • debugConsole.errorForeground#e84c58
  • debugConsole.infoForeground#4c7a90
  • debugConsole.sourceForeground#4b5254
  • debugConsole.warningForeground#c5882c
  • debugConsoleInputIcon.foreground#a9779c
  • debugIcon.breakpointForeground#e84c58
  • debugTokenExpression.boolean#cd5c60
  • debugTokenExpression.error#e84c58
  • debugTokenExpression.name#e36b3f
  • debugTokenExpression.number#cd5c60
  • debugTokenExpression.string#39854c
  • debugTokenExpression.value#845a84
  • debugToolBar.background#f5f6f5
  • descriptionForeground#383e3f
  • diffEditor.insertedLineBackground#40826d25
  • diffEditor.removedTextBackground#cd5c6025
  • dropdown.background#f5f6f5
  • dropdown.border#c8ccc3
  • dropdown.foreground#60696b
  • dropdown.listBackground#f5f6f5
  • editor.background#edeeeb
  • editor.findMatchBackground#49bdb040
  • editor.findMatchHighlightBackground#49bdb030
  • editor.foldBackground#dfe1dc80
  • editor.foreground#383e3f
  • editor.inactiveSelectionBackground#d3e4f090
  • editor.lineHighlightBackground#dfe1dc
  • editor.rangeHighlightBackground#49bdb030
  • editor.selectionBackground#d3e4f0
  • editor.selectionHighlightBackground#d3e4f0
  • editorBracketHighlight.foreground1#4d9391
  • editorBracketHighlight.foreground2#a9779c
  • editorBracketHighlight.foreground3#4c7a90
  • editorBracketHighlight.foreground4#787096
  • editorBracketHighlight.foreground5#a0586c
  • editorBracketHighlight.foreground6#cd9575
  • editorBracketHighlight.unexpectedBracket.foreground#e84c58
  • editorBracketMatch.background#d3e4f0
  • editorBracketMatch.border#60696b
  • editorCursor.foreground#545c5e
  • editorGroup.border#d1d4cd
  • editorGroupHeader.tabsBackground#f5f6f5
  • editorGroupHeader.tabsBorder#d1d4cd
  • editorGutter.addedBackground#40826d
  • editorGutter.deletedBackground#cd5c60
  • editorGutter.modifiedBackground#73229e
  • editorIndentGuide.activeBackground#919a9c
  • editorIndentGuide.background#919a9c65
  • editorLineNumber.activeForeground#18a318
  • editorLineNumber.foreground#7c878a
  • editorLink.activeForeground#6d46e3
  • editorOverviewRuler.border#e84c58
  • editorWhitespace.foreground#919a9c
  • editorWidget.background#edeeeb
  • errorForeground#e84c58
  • focusBorder#c8ccc3
  • foreground#383e3f
  • gitDecoration.addedResourceForeground#40826d
  • gitDecoration.conflictingResourceForeground#e84c58
  • gitDecoration.deletedResourceForeground#cd5c60
  • gitDecoration.ignoredResourceForeground#879193
  • gitDecoration.modifiedResourceForeground#73229e
  • gitDecoration.submoduleResourceForeground#3b84cc
  • gitDecoration.untrackedResourceForeground#317a56
  • icon.foreground#4b5254
  • input.background#f5f6f5
  • input.border#c8ccc3
  • input.foreground#383e3f
  • input.placeholderForeground#383e3f90
  • keybindingLabel.foreground#4b5254
  • list.activeSelectionBackground#d3e4f0
  • list.activeSelectionForeground#4b5254
  • list.focusBackground#d1d4cd
  • list.focusForeground#60696b
  • list.highlightForeground#e84c58
  • list.hoverBackground#d1d4cd
  • list.hoverForeground#4b5254
  • list.inactiveFocusBackground#d1d4cd
  • list.inactiveSelectionBackground#d1d4cd
  • list.inactiveSelectionForeground#4b5254
  • merge.commonContentBackground#dfe1dc
  • merge.commonHeaderBackground#d1d4cd
  • merge.currentContentBackground#51827025
  • merge.currentHeaderBackground#51827060
  • merge.incomingContentBackground#3b84cc25
  • merge.incomingHeaderBackground#3b84cc60
  • notificationCenterHeader.background#dfe1dc
  • notificationCenterHeader.foreground#4b5254
  • notifications.background#edeeeb
  • notifications.border#d1d4cd
  • notifications.foreground#545c5e
  • notificationsErrorIcon.foreground#e84c58
  • notificationsInfoIcon.foreground#13665f
  • notificationsWarningIcon.foreground#c5882c
  • peekViewEditor.background#edeeeb
  • peekViewEditor.matchHighlightBackground#d3e4f080
  • peekViewResult.background#dfe1dc
  • peekViewResult.matchHighlightBackground#f3c91f80
  • pickerGroup.border#dfe1dc
  • pickerGroup.foreground#61259e
  • progressBar.background#6facb3
  • quickInput.background#edeeeb
  • quickInput.foreground#4b5254
  • scrollbarSlider.activeBackground#60696b
  • scrollbarSlider.background#60696b70
  • scrollbarSlider.hoverBackground#60696b90
  • sideBar.background#dfe1dc
  • sideBar.border#d1d4cd
  • sideBar.foreground#4b5254
  • sideBarSectionHeader.background#d1d4cd
  • sideBarSectionHeader.border#c8ccc3
  • sideBarSectionHeader.foreground#383e3f
  • sideBarTitle.foreground#4b5254
  • statusBar.background#5d8272
  • statusBar.border#d1d4cd
  • statusBar.debuggingBackground#a0586c
  • statusBar.debuggingForeground#edeeeb
  • statusBar.foreground#dfe1dc
  • statusBar.noFolderBackground#787096
  • statusBar.noFolderForeground#edeeeb
  • statusBarItem.remoteBackground#4c7a90
  • statusBarItem.remoteForeground#edeeeb
  • tab.activeBackground#edeeeb
  • tab.activeBorder#dfe1dc
  • tab.activeBorderTop#c8ccc3
  • tab.activeForeground#545c5e
  • tab.border#c8ccc3
  • tab.hoverBackground#dfe1dc
  • tab.hoverForeground#4b5254
  • tab.inactiveBackground#f5f6f5
  • tab.inactiveForeground#545c5e
  • terminal.ansiBlack#383e3f
  • terminal.ansiBlue#3b84cc
  • terminal.ansiBrightBlack#545c5e
  • terminal.ansiBrightBlue#4c7a90
  • terminal.ansiBrightCyan#008b8b
  • terminal.ansiBrightGreen#317a56
  • terminal.ansiBrightMagenta#6d46e3
  • terminal.ansiBrightRed#e84c58
  • terminal.ansiBrightWhite#f5f6f5
  • terminal.ansiBrightYellow#c5882c
  • terminal.ansiCyan#6facb3
  • terminal.ansiGreen#13665f
  • terminal.ansiMagenta#a9779c
  • terminal.ansiRed#e84c58
  • terminal.ansiWhite#c8ccc3
  • terminal.ansiYellow#e36b3f
  • terminal.foreground#60696b
  • textBlockQuote.background#f5f6f5
  • textBlockQuote.border#edeeeb
  • textCodeBlock.background#dfe1dc
  • textLink.activeForeground#6d46e3
  • textLink.foreground#6d46e3
  • textSeparator.foreground#d1d4cd
  • tree.indentGuidesStroke#919a9c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#13665f
entity.name.class, variable.other.enummember#e36b3f
storage.type#13665f
variable#845a84
string#39854c
punctuation.section.braces.begin#e36b3f
support.type#4c7a90
comment.line, comment.block#7c878a
punctuation.decorator, entity.name.function#cd5c60
constant.language.boolean#cd5c60
variable.other.readwrite#383e3f
meta.diff.header.git, meta.diff.index.git#73229e
meta.diff.header.from-file, markup.deleted.diff#cd5c60
meta.diff.header.to-file, markup.inserted.diff#40826d
meta.diff.range.unified#91762a
source.diff#383e3f
constant.numeric#cd5c60
entity.name.tag#845a84
meta.attribute.style#4c7a90

Shiki preview

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

Loading...

Kaolin Themes by zed-nait - VS Code Theme