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.activeBorder#1c6b48
  • activityBar.background#fafafa
  • activityBar.border#f0f0f0
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#393a3450
  • activityBarBadge.background#4e4f47
  • activityBarBadge.foreground#fafafa
  • badge.background#393a3490
  • badge.foreground#fafafa
  • breadcrumb.activeSelectionForeground#22222215
  • breadcrumb.background#f7f7f7
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#6a737d
  • breadcrumbPicker.background#fafafa
  • button.background#1c6b48
  • button.foreground#fafafa
  • button.hoverBackground#1c6b48
  • checkbox.background#f7f7f7
  • checkbox.border#d1d5da
  • debugToolBar.background#fafafa
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#1c6b4815
  • diffEditor.removedTextBackground#ab595910
  • dropdown.background#fafafa
  • dropdown.border#f0f0f0
  • dropdown.foreground#393a34
  • dropdown.listBackground#f7f7f7
  • editor.background#fafafa
  • editor.findMatchBackground#e6cc7744
  • editor.findMatchHighlightBackground#e6cc7766
  • editor.focusedStackFrameHighlightBackground#fff5b1
  • editor.foldBackground#22222210
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#22222208
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#22222215
  • editor.selectionHighlightBackground#22222208
  • editor.stackFrameHighlightBackground#fffbdd
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#2993a3
  • editorBracketHighlight.foreground2#1e754f
  • editorBracketHighlight.foreground3#a65e2b
  • editorBracketHighlight.foreground4#a13865
  • editorBracketHighlight.foreground5#bda437
  • editorBracketHighlight.foreground6#296aa3
  • editorBracketMatch.background#1c6b4820
  • editorError.foreground#ab5959
  • editorGroup.border#f0f0f0
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#f0f0f0
  • editorGutter.addedBackground#1e754f
  • editorGutter.commentRangeForeground#393a3450
  • editorGutter.deletedBackground#ab5959
  • editorGutter.foldingControlForeground#393a3490
  • editorGutter.modifiedBackground#296aa3
  • editorHint.foreground#1e754f
  • editorIndentGuide.activeBackground#00000030
  • editorIndentGuide.background#00000015
  • editorInfo.foreground#296aa3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#4e4f47
  • editorLineNumber.foreground#393a3450
  • editorOverviewRuler.border#fff
  • editorStickyScroll.background#f7f7f7
  • editorStickyScrollHover.background#f7f7f7
  • editorWarning.foreground#a65e2b
  • editorWhitespace.foreground#00000015
  • editorWidget.background#fafafa
  • errorForeground#ab5959
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#1e754f
  • gitDecoration.conflictingResourceForeground#a65e2b
  • gitDecoration.deletedResourceForeground#ab5959
  • gitDecoration.ignoredResourceForeground#393a3450
  • gitDecoration.modifiedResourceForeground#296aa3
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#2993a3
  • input.background#f7f7f7
  • input.border#f0f0f0
  • input.foreground#393a34
  • input.placeholderForeground#393a3490
  • inputOption.activeBackground#393a3450
  • list.activeSelectionBackground#f7f7f7
  • list.activeSelectionForeground#393a34
  • list.focusBackground#f7f7f7
  • list.highlightForeground#1c6b48
  • list.hoverBackground#f7f7f7
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#fafafa
  • list.inactiveSelectionBackground#f7f7f7
  • list.inactiveSelectionForeground#393a34
  • menu.separatorBackground#f0f0f0
  • notificationCenterHeader.background#fafafa
  • notificationCenterHeader.foreground#6a737d
  • notifications.background#fafafa
  • notifications.border#f0f0f0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#ab5959
  • notificationsInfoIcon.foreground#296aa3
  • notificationsWarningIcon.foreground#a65e2b
  • panel.background#fafafa
  • panel.border#f0f0f0
  • panelInput.border#e1e4e8
  • panelTitle.activeBorder#1c6b48
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#6a737d
  • peekViewEditor.background#fafafa
  • peekViewResult.background#fafafa
  • pickerGroup.border#f0f0f0
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#ab5959
  • problemsInfoIcon.foreground#296aa3
  • problemsWarningIcon.foreground#a65e2b
  • progressBar.background#1c6b48
  • quickInput.background#fafafa
  • quickInput.foreground#393a34
  • quickInputList.focusBackground#f7f7f7
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#393a3450
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3450
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#1c6b48
  • sideBar.background#fafafa
  • sideBar.border#f0f0f0
  • sideBar.foreground#4e4f47
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.border#f0f0f0
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#fafafa
  • statusBar.border#f0f0f0
  • statusBar.debuggingBackground#f7f7f7
  • statusBar.debuggingForeground#4e4f47
  • statusBar.foreground#4e4f47
  • statusBar.noFolderBackground#fafafa
  • statusBarItem.prominentBackground#f7f7f7
  • tab.activeBackground#fafafa
  • tab.activeBorder#f0f0f0
  • tab.activeBorderTop#393a3490
  • tab.activeForeground#393a34
  • tab.border#f0f0f0
  • tab.hoverBackground#f7f7f7
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#6a737d
  • tab.unfocusedActiveBorder#f0f0f0
  • tab.unfocusedActiveBorderTop#f0f0f0
  • tab.unfocusedHoverBackground#fafafa
  • terminal.ansiBlack#121212
  • terminal.ansiBlue#296aa3
  • terminal.ansiBrightBlack#aaaaaa
  • terminal.ansiBrightBlue#296aa3
  • terminal.ansiBrightCyan#2993a3
  • terminal.ansiBrightGreen#1e754f
  • terminal.ansiBrightMagenta#a13865
  • terminal.ansiBrightRed#ab5959
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2993a3
  • terminal.ansiGreen#1e754f
  • terminal.ansiMagenta#a13865
  • terminal.ansiRed#ab5959
  • terminal.ansiWhite#dbd7caee
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • terminal.selectionBackground#22222215
  • textBlockQuote.background#fafafa
  • textBlockQuote.border#f0f0f0
  • textCodeBlock.background#fafafa
  • textLink.activeForeground#1c6b48
  • textLink.foreground#1c6b48
  • textPreformat.foreground#586069
  • textSeparator.foreground#d1d5da
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#4e4f47
  • titleBar.border#f7f7f7
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#6a737d
  • tree.indentGuidesStroke#e1e4e8
  • welcomePage.buttonBackground#f6f8fa
  • welcomePage.buttonHoverBackground#e1e4e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.label, entity.other.attribute-name, meta.directive, meta.tag.block.any, meta.object-literal.key, support.type.property-name, variable.object.property, variable.other.object.property, variable.other.property, variable.other.enummember, punctuation.attribute-shorthand#028dac—
string, source, text.html, text.html.derivative, meta.property-value, keyword.other.unit, support.type, support.constant.property-value, constant.numeric.css, constant.other.color.rgb-value.hex.css#017e5e—
punctuation.definition.entity.css, entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class.css, support.class.component, storage, keyword, keyword.control, keyword.operator, keyword.operator.word, keyword.operator.new.js, keyword.operator.relational, variable.language, variable.scss#ab6200—
constant, variable.member, variable.parameter, variable.other.constant.object, variable.other.constant.property, variable.other.constant, variable.other.object, variable.other.readwrite, meta.definition.variable, meta.type.declaration.ts, support.constant, support.variable.property, meta.diff, meta.diff.header, string.regexp#c44285—
variable.function, variable.annotation, support.function, support.macro, support.class, entity.name.function, string.other.link, markup.underline.link, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.accessor.optional, meta.command, string.unquoted.argument#266ad7—
keyword.operator.type, keyword.control.as, meta.brace.round, meta.brace.angle, meta.brace.square, meta.return.type, storage.type.function.arrow, punctuation, fenced_code.block.language#8f9aa1—
support.type, entity.name.type, meta.interface#a14fc4—
comment, punctuation.definition.comment#8d94a6—
markup.heading, punctuation.definition.heading#d4976cf2bold
markup.bold—bold
markup.italic——
markup.italic markup.bold | markup.bold markup.italic—bold italic
markup.list.numbered.bullet#A3CE9E—
markup.inserted#99C794—
markup.changed#EBCB8B—
message.error#EC5F66—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Gentle Clean by kricsleo - VS Code Theme